Question

我使用jquery文件上传将文件上传到服务器端操作。但是，我还想在表单提交中发送其他表单字段。另外，我希望只有在＆＃34;提交＆＃34;单击按钮。

使用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文件上传发送其他表单字段

1 个答案: