我正在使用 jQuery file upload 进行基于 AJAX 的上传。它总是在选择文件后开始上传。是否可以更改行为以使用“提交”按钮？我知道Issue #35，但选项beforeSend 似乎已被删除。
我使用的是Basic Plugin，而不是完整版。
也许我应该按照那里的建议切换到基于纯 XHR 的上传：jQuery Upload Progress and AJAX file upload。
【问题讨论】：
标签： jquery jquery-plugins
如果你有按钮
<button id="up_btn">Upload</button>
你可以试试
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").off('click').on('click', function () {
data.submit();
});
},
});
编辑：根据 cmets 一个更好的答案考虑 off 以避免重复请求。 （也可以工作unbind，我不检查是否是bind 和unbind 但jquery 团队推荐on 和off link 从1.7 开始）
【讨论】：
one 而不是on（并在提交后重新绑定事件）以避免重复请求
$("#imgupload").unbind('click').on('click', function(){data.submit();});
off 和 on 按预期工作。在此处查看one 的示例：jsfiddle.net/jet8umej
这些答案都不适用于多个文件上传。我的案例涉及在评论线程中允许多个附件。所以我需要先保存评论获取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.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
【讨论】：
您可以通过挂钩 add 事件来做到这一点。在那里，您可以阻止上传者执行其默认行为。 jquery-file-upload-docs 解释了这一点，但有点难找。
下面写在blueimp basic uploader tutorial：
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
data.context = $('<p/>').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”，然后您可以使用提交行为。
编辑：
试试这个基本实现：
<script>
/*global $ */
$(function() {
$('.file_upload').fileUploadUI({
url: 'FileUpload.ashx',
method: 'POST',
uploadTable: $('#files'),
downloadTable: $('#files'),
buildUploadRow: function (files, index) {
return $('<tr><td>' + files[index].name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<\/td><\/tr>');
},
buildDownloadRow: function(file) {
return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>'
+ '<td class="file_uploaded">' +
'<span class="ui-icon ui-icon-check"><\/span>' +
'<\/td><\/tr>');
}, beforeSend: function(event, files, index, xhr, handler, callBack) {
if (files[index].size > 500000) {
handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!');
setTimeout(function() {
handler.removeNode(handler.uploadRow);
}, 10000);
return;
}
callBack();
}
});
});
</script>
【讨论】：
这是我使用按钮实现文件上传的方式：
这是按钮：
<button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button>
这里是输入元素：
<input id="fileupload" type="file" name="files[]" style="display: none;">
这里是 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');
});
}
注意： 它可能不是很优雅，但它对我有用。 这也会将表单中的所有字段发送到服务器。 如果文件也在上传，这只会发送表单中的字段。如果文件不存在，则不会将表单数据发送到服务器！虽然我没有用多个文件对其进行测试，但这种方法也可以扩展为多个文件。当我尝试它时，我会用信息更新这篇文章。
【讨论】：