jQuery文件上传：是否可以通过提交按钮触发上传？
我正在使用jQuery文件上传基于AJAX的上传。 它总是在选择文件后开始上传。 是否可以更改行为以使用“提交”按钮？ 我知道问题＃35 ，但选择beforeSend似乎已被删除。
我使用的是Basic插件 ，而不是完整版。
也许我应该按照建议切换到基于简单XHR的上传： jQuery Upload Progress和AJAX文件上传 。
如果你有按钮
你可以试试
$('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { $("#up_btn").off('click').on('click', function () { data.submit(); }); }, });
编辑：根据评论，一个更好的答案考虑到避免重复的请求。 （也工作unbind ，我不检查是否bind和unbind但jquery团队建议on和off 链接自1.7）
您也可以在jquery.fileupload.js中找到
第142行有一个‘autoUpload’选项。
uploadedBytes: undefined, // By default, failed (abort or error) file uploads are removed from the // global progress calculation. Set the following option to false to // prevent recalculating the global progress data: recalculateProgress: true, // Interval in milliseconds to calculate and trigger progress events: progressInterval: 100, // Interval in milliseconds to calculate progress bitrate: bitrateInterval: 500, // By default, uploads are started automatically when adding files: autoUpload: true // <<---------- here
这些答案都不适用于多个文件上传。 我的案例涉及在评论主题中允许多个附件。 所以我需要先保存评论以获取ID，然后上传并保存所有附件。 这似乎是一件微不足道的事情，但使用这个插件并不是那么直观。 我的解决方案在jQuery中使用自定义事件，效果很好。
当前接受的答案绑定到“添加”回调中按钮的单击事件，但是对每个文件调用一次“添加”回调。 如果您每次仅取消绑定所有事件，则仅上载最后一个文件。
$('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { $("#up_btn").on('customName', function (e) { data.submit(); }); }, });
通过将提交按钮绑定到自定义名称，我们可以在提交图像之前进行任何我们想要的预处理。 在我的情况下，它涉及提交评论并取回我在单独电话中所做的评论ID。 此代码只响应单击，但您可以在触发事件之前执行任何操作。
$("#up_btn").on('click', function (e) { e.preventDefault(); $("#up_btn").trigger( "customName"); });
您可以在触发事件时传递所需的任何数据，因此它可以让您完全控制您的表单。
你可以通过挂钩添加事件来做到这一点。 在那里你阻止上传者做它的默认行为。 jquery-file-upload -docs解释了这一点，但它有点难以找到。
以下是在blueimp基本上传器教程中编写的：
$(function () { $('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { data.context = $('').text('Upload') .appendTo(document.body) .click(function () { data.context = $('').text('Uploading...').replaceAll($(this)); data.submit(); }); }, done: function (e, data) { data.context.text('Upload finished.'); } }); });
实际上非常重要的是，您创建的提交按钮不在表单内！
确保每次添加文件时都不通过附加事件来堆叠事件。 这样，表单将被多次提交。
我会做这样的事情
$('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { $("#up_btn").off('click').on('click', function () { data.submit(); }); }, });
注意off（）方法删除所有先前附加的事件。
使用添加模板跟随显示上传和下载必须这样做
$('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { var that = this; $.blueimp.fileupload.prototype.options.add.call(that, e, data); $("#up_btn").on('click', function () { data.submit(); }); }, });
在下载的示例中导航到js/jquery.fileupload-ui.js ，并且您将拥有autoUpload ，默认情况下设置为true ，然后将其设置为“ false ”，然后您可以使用提交行为。
编辑：
试试这个基本实现：
以下是使用按钮实现文件上传的方法：
这是按钮：
这是输入元素：
这是SaveInfo（）函数：
//use this function to save Info with Attached file function SaveInfo() { // setup our wp ajax URL var action_url = document.location.protocol + '//' + document.location.host + '/SaveInfo'; $('body').addClass('waiting'); //get the file(s) var filesList = $('input[type="file"]').prop('files'); //Initialize the file uploader $('#Editor').fileupload(); //Editor is the Id of the form //Along with file, this call internally sends all of the form data!!! $('#Editor').fileupload('add', { files: filesList, url: action_url }) $('#Editor').bind('fileuploaddone', function (e, data) { e.preventDefault(); //stop default behaviour! if (data.result.status == 1) { //saved! //do something useful here... } $('body').removeClass('waiting'); }); // Callback for failed (abort or error) uploads: $('#Editor').bind('fileuploadfail', function (e, data) { e.preventDefault(); //stop default behaviour! $('body').removeClass('waiting'); }); }
注意：它可能不是很优雅，但它适用于我。 这也将表单中的所有字段发送到服务器。 如果文件也被上传，这将仅发送表单中的字段。 如果文件不存在，则不会将表单数据发送到服务器！ 虽然我没有用多个文件测试它，但是这个方法也可以扩展为多个文件。 当我尝试它时，我会用信息更新这篇文章。
使用以下：
它为我做了伎俩。