Загрузка файла jQuery: возможно ли инициировать загрузку с помощью кнопки отправки?
Я использую загрузка файла jQuery для загрузки на основе AJAX. Он всегда начинает загрузку после выбора файла. Можно ли изменить поведение, чтобы использовать кнопку "отправить"? Я знаю Проблема № 35, но опция beforeSend
, похоже, была удалена.
Я использую Основной плагин, а не полную версию.
Возможно, мне стоит просто переключиться на загрузку на основе простой XHR, как было предложено там: jQuery Upload Progress и загрузка файла AJAX.
Ответы
Ответ 1
если у вас есть кнопка
<button id="up_btn">Upload</button>
Вы можете попробовать с помощью
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").off('click').on('click', function () {
data.submit();
});
},
});
ИЗМЕНИТЬ: в соответствии с комментариями лучше ответить off
, чтобы избежать дублирования запросов. (также работает unbind
, я не проверяю, есть ли bind
и unbind
, но команда jquery рекомендует on
и off
link так как 1.7)
Ответ 2
Вы также можете найти в 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
Ответ 3
Ни один из этих ответов не будет работать для нескольких загрузок файлов. В моем случае было задействовано несколько вложений в поток комментариев. Поэтому мне сначала нужно было сохранить комментарий, чтобы получить идентификатор, а затем загрузить и сохранить все вложения. Это похоже на тривиальную вещь, но с этим плагином это не интуитивно. Мое решение использует пользовательские события в jQuery и отлично работает.
Текущий принятый ответ связывается с событием нажатия кнопки в обратном вызове 'add', но обратный вызов 'add' вызывается один раз для каждого файла. Если вы отключаете все события каждый раз, когда загружается только последний файл.
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").on('customName', function (e) {
data.submit();
});
},
});
Связывая кнопку отправки с пользовательским именем, мы можем выполнить любую предварительную обработку, которую мы хотим, перед отправкой изображений. В моем случае это связано с отправкой комментария и возвратом идентификатора комментария, который я сделал в отдельном вызове. Этот код просто реагирует на щелчок, но вы можете делать все, что хотите, перед запуском события.
$("#up_btn").on('click', function (e) {
e.preventDefault();
$("#up_btn").trigger( "customName");
});
Вы можете передавать любые данные, которые хотите получить при запуске события, поэтому он действительно дает вам полный контроль над вашей формой.
Ответ 4
Не устанавливайте события, добавляя событие каждый раз, когда файл добавляется. Таким образом, форма будет представлена несколько раз.
Я бы сделал что-то вроде этого
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
$("#up_btn").off('click').on('click', function () {
data.submit();
});
},
});
Обратите внимание на метод off(), чтобы удалить все предыдущие прикрепленные события.
Ответ 5
для использования добавляемых шаблонов, чтобы следить за загрузкой и загрузкой, необходимо сделать это таким образом
$('#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();
});
},
});
Ответ 6
Вы можете сделать это, подключившись к событию добавления. Там вы не позволяете загрузчику выполнять свое поведение по умолчанию. Jquery-file-upload-docs объясняют это, но его немного сложно найти.
В учебнике по загрузке байкеров blueimp написано:
$(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.');
}
});
});
На самом деле очень важно, что создаваемая вами кнопка отправки не находится внутри формы.
Ответ 7
В загруженном примере Перейдите к js/jquery.fileupload-ui.js
, и в этом случае у вас будет autoUpload
, который установлен true
по умолчанию, и он будет "false
", тогда вы можете использовать поведение отправки.
EDIT:
Попробуйте это для основной реализации:
<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>
Ответ 8
Вот как я реализовал загрузку файлов с помощью кнопки:
Вот кнопка:
<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');
});
}
Примечание:
Это может быть не очень элегантно, но это работает для меня.
Это также отправит все поля в форме на сервер.
Это будет ТОЛЬКО отправлять поля в форме, если файл также загружается. Если файл отсутствует, это НЕ отправит данные формы на сервер! Хотя я не тестировал его с несколькими файлами, этот метод может быть расширен и для мультипликаторов. Когда я попробую, я обновлю это сообщение с информацией.
Ответ 9
Использовать следующее:
<script type="text/javascript" charset="utf-8">
$(function () {
$('#fileupload').fileupload({
autoUpload: true
});
});
</script>
Он помогло.