区分图像错误和形状错误
Differentiate image errors and form errors
我使用的是dropzone.js。我有一个表单,在单击提交按钮时提交输入和图像。但是,当我返回一个输入(而不是图像)错误的错误时,error
事件也会显示图像有错误,即使它没有。
例如,如果其中一个输入为空,并且表单返回了一个错误消息"请填写表单",则上传的图像也会(错误地)出现错误,并且这会在HTML:中发生变化
<div class="dz-error-message"><span data-dz-errormessage="">[object Object]</span></div>
实际返回的错误(注意图像没有错误):
{"success":"false","messages":{"message":["The message field is required."]}}
我的问题是,我如何修改我的代码,以识别返回的错误是图像错误还是表单输入错误?
这是我的JS:
Dropzone.options.formPost = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25,
maxFilesize: 5,
acceptedFiles: "image/*",
clickable: "#image-upload",
init: function() {
var myDropzone = this;
var form = $("#form-post");
this.element.querySelector('button[type="submit"]').addEventListener("click", function(e)
{
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("addedfile", function()
{
// some stuff
});
this.on("sendingmultiple", function()
{
// some stuff
});
this.on("successmultiple", function(files, response)
{
// some stuff
});
this.on("errormultiple", function(files, response)
{
// if an error is return, even though it has nothing to do with the image, it will show that the image has an error
$.each(response.messages, function(key, value)
{
form.find('.form-group#' + key).addClass('has-error');
form.find('.form-group#' + key + ' .form-error').html(value[0]).fadeIn();
});
});
}
}
PHP(Laravel):
public function createPost()
{
$rules = array(
'message' => 'required',
);
$validator = Validator::make(Input::except('file'), $rules);
if ($validator->fails())
{
return Response::json(array(
'success' => 'false',
'messages' => $validator->messages()
), 400);
}
else
{
$post = new Post;
$post->user_id = getUserID();
$post->message = Input::get('message');
$post->ip_address = getUserIP();
$post->save();
$files = Input::file('file');
if ($files)
{
/**
* Create a new directory for the post images.
*/
File::makeDirectory(public_path() . '/uploads/posts/' . $post->id, 0775);
foreach ($files as $file)
{
$file_rules = array('file' => 'image|max:5000');
$validator = Validator::make(array('file' => $file), $file_rules);
if ($validator->fails())
{
return Response::json(array(
'success' => 'false',
'messages' => $validator->messages()
), 400);
}
else
{
$ext = $file->getClientOriginalExtension();
$dest = public_path() . '/uploads/posts/' . $post->id . '/';
$file_name = str_random(6);
$upload_success = $file->move($dest, $file_name . '.' . $ext);
if (!$upload_success)
{
return Response::json(array(
'success' => 'false',
), 400);
}
}
}
}
return Response::json(array(
'success' => 'true'
), 200);
}
}
可能,下面的代码会对图像字段进行更改,而不应该这样做。
form.find('.form-group#' + key).addClass('has-error');
form.find('.form-group#' + key + ' .form-error').html(value[0]).fadeIn();
您可以在浏览器的JS控制台中手动检查form.find('.form-group#whatever')
是否真的能够指向正确的元素。也许form.find('.form-group#whatever')
指向了所有的输入元素,这导致了问题。
查看HTML代码也会很有帮助。
相关文章:
- 从安卓设备将图像上传到服务器时,文件扩展名错误
- 未捕获的类型错误: 无法读取未定义的属性“图像”
- 在Firefox中导出高图表时出现黑色图像错误
- 错误:$injector:modulerr加载图像时模块处于角度
- 错误时用图像替换视频
- jQuery:获取图像加载错误的详细信息
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 尝试getUrl图像时,Firefox WebExtension出现安全错误
- cordova图像上传出现文件传输错误
- JS预加载图像错误
- JQuery 图像错误处理
- 图像滑块的错误
- 铯:使用自己的OpenStreetMap服务器.:“无法获取图像磁贴”错误
- lightgallery type未加载错误图像
- 火狐 SDK 错误“图像包含错误,无法显示”
- JavaScript 代码错误:图像不显示
- 使用带有错误图像路径的 jQuery 加载打开的页面
- IE 11错误-图像在标签内的形式-需要保存鼠标事件
- 图像交替功能交替错误图像
- 如何为页面上的所有图像设置错误图像