将jQuery File Upload Plugin（多文件上传）和jQuery Validation Plugin脚本放在同一页面（一个表单）上有问题。
如果我关闭jQuery验证一切正常，我可以上传图像文件并将它们放在自动生成的输入字段中，然后在表单提交中获取它们的值。如果我包含jQuery Validation Plugin，则上传不起作用，我无法在生成的输入上获取图像文件名值。
工作表单为here（没有jQuery验证）。
任何人都知道问题出在哪里？我怎么解决呢？或者我只是从网站上的特定表单中删除jQuery验证（这不是最佳解决方案，但它会起作用）？
答案 0 :(得分：1)
想出来，<div id="mulitplefileuploader">Upload</div>必须在验证表格之外，一切正常。图像在服务器上正确上载，文件名值的输入字段在验证表单中生成，并在ajax post请求中传递。
答案 1 :(得分：0)
始终将输出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>
修改 我查看了你的链接。您需要在底部包含验证插件，这应该可以解决冲突。我强烈建议在浏览器中使用开发人员工具。 ＆＃34;在Chrome中，打开开发人员工具/检查元素 - 单击控制台日志 - 您将看到冲突的位置。＆＃34;
<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>