将jQuery File Upload Plugin（多文件上传）和 jQuery Validation Plugin 脚本放在同一页面（一个表单）时遇到问题。
如果我关闭 jQuery 验证一切正常，我可以获取上传的图像文件并将它们放入自动生成的输入字段中，然后在表单提交时获取它们的值。如果我包含 jQuery 验证插件，则上传不起作用，并且我无法在生成的输入中获取图像文件名值。
工作表单是here（没有 jQuery 验证）。
谁知道问题出在哪里？我该如何解决？还是我只是从网站上的特定表单中删除 jQuery Validation（这不是最好的解决方案，但它会起作用）？
【问题讨论】：
标签： jquery
想通了，<div id="mulitplefileuploader">Upload</div> 必须在验证表单之外，一切正常。图像在服务器上正确上传，并在验证表单中生成带有文件名值的输入字段并在 ajax 发布请求中传递。
【讨论】：
始终将输出 div 放在表单和 javascript 之外。以这种格式。
<script src="jquery.js" type="text/javascript"></script>
<script src="jqueryPlugins.js" type="text/javascript"></script>
<div id="mulitplefileuploader">Upload</div>
<form></form>
<script type="text/javascript"> ... </script>
编辑： 我看过你的链接。您需要在底部包含您的验证插件，这应该可以解决冲突。我也强烈建议在浏览器中使用开发者工具。 “在 Chrome 中，打开开发人员工具/检查元素 - 单击控制台日志 - 你会看到冲突在哪里。”
<html lang="en"><head>
<meta charset="utf-8">
<link href="uploadfile.css" rel="stylesheet">
<script src="../../js/jquery-1.10.1.min.js"></script>
<script src="jquery.uploadfile.min.js"></script>
</head>
<body>
<form id="form_galerija" action="" method="post" novalidate="novalidate">
<p><input type="text" name="name" id="name" value="" placeholder="Name..."></p>
<p><input type="text" name="surname" id="surname" value="" placeholder="Surname..."></p>
<div id="files">
</div>
<p><input type="submit" name="submit_ok" value="Dodaj slike"></p>
</form>
<script type="text/javascript">
$(document).ready(function(){
var validator = $('#form_galerija').validate({
rules:{
name:{required:true},
surname:{required:true}
},
messages:{
name:{required:'Name je obavezan!'},
surname:{required:'Surname je obavezan!'}
},
submitHandler: function(form){
$('#submit_ok').attr('disabled','disabled');
$('#submit_ok').attr('value','Pričekajte...');
$(form).ajaxSubmit({
url: 'http://www.agroklub.com/test/image3/index2.php',
success: function(r){
if (r.match(/true/gi)) {
title = $('#name').val();
alert('Slika "'+title+'" je uspješno dodana!' + r);
}
else {
$('#submit_ok').removeAttr('disabled');
$('#submit_ok').attr('value','Dodaj slike');
alert('Greška prilikom dodavanja slika!' + r);
}
}
});
}
});
});
</script>
<div class="ajax-upload-dragdrop" style="vertical-align:top;"><div class="ajax-file-upload" style="position: relative; overflow: hidden; cursor: default;">Upload<form method="POST" action="upload.php" enctype="multipart/form-data" style="margin: 0px; padding: 0px;"><input type="file" id="ajax-upload-id-1417544307288" name="slika[]" multiple="" style="position: absolute; cursor: pointer; top: 0px; width: 64px; height: 35px; left: 0px; z-index: 100; opacity: 0;"></form></div><span><b>Drag & Drop Files</b></span></div><div id="mulitplefileuploader" style="display: none;">Upload</div><div></div>
<div id="status"></div>
<script>
$(document).ready(function(){
var broj = 1;
var settings = {
url: "upload.php",
dragDrop:true,
fileName: "slika",
multiple:true,
allowedTypes:"jpg",
returnType:"json",
onSuccess:function(files,data,xhr)
{
//alert((data));
$("#files").append("<input type='text' value='" + data + "' name='file_" + broj + "' />");
broj++;
},
showDelete:true,
deleteCallback: function(data,pd)
{
for (var i=0; i<data.length; i++)
{
$.post("delete.php",{op:"delete",name:data[i]},
function(resp, textStatus, jqXHR)
{
//Show Message
$("#status").append("<div>File Deleted</div>");
});
}
pd.statusbar.hide(); //You choice to hide/not.
}
}
var uploadObj = $("#mulitplefileuploader").uploadFile(settings);
});
</script>
<script src="../../js/jquery.validate.min.js"></script>
</body></html>
【讨论】：