如何使用 jquery 文件上传发送额外的表单字段

Question

我正在使用 jquery 文件上传将文件上传到服务器端操作。但是，我还想发送其他表单字段作为表单提交的一部分。此外，我希望表单提交仅在单击 "submit" 按钮时发生。

使用 jquery 文件上传是否可行？

我创建了一个 jsbin：http://jsbin.com/mozujilede/1/edit?html,js,output

期望的行为：

如果用户尝试上传的文件超过允许的限制，他们应该收到警告
附加表单数据应与多个文件一起发送到服务器端
只有当用户点击提交按钮时，表单提交才会发生。

这就是我现在正在做的事情：

var maxFiles = 10;
$('#fileupload').fileupload({
    singleFileUploads: false,
    url: '/uploadUrl'
}).bind('fileuploadadd', function (e, data) {
        var input = $('#input');
        data.formData = {example: input.val()};
        var fileCount = data.files.length;
        if (fileCount > maxFiles) {
            alert("The max number of files is "+maxFiles);
            return false; 
        }
    });

Answer 1

试试这个

var byButton = false;
$("#sub-but").on("click",function(){
  var inp = $("#files")[0];
  if(inp.files.length > 10){
    alert("Max number of files");
    return false;
  }
  byButton = true;
  $("#myForm").submit();
});
function validate(){
  if(!byButton)
     return false;
  byButton = false;
  return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" onsubmit="return validate();">
  <input type="text" placeholder="some extra items"/>
  <input type="file" id="files" multiple="multiple"/>
  <input type="button" value="Submit" id="sub-but"/>
</form>

如何使用 jquery 文件上传发送额外的表单字段

How to send additional form fields using jquery file upload

html

javascript

jquery

jquery-file-upload