Загрузка файла jQuery: возможно ли инициировать загрузку с помощью кнопки отправки?

Я использую загрузку файла jQuery для загрузки на основе AJAX. Он всегда начинает загрузку после выбора файла. Можно ли изменить поведение, чтобы использовать кнопку «отправить»? Мне известно о beforeSend № 35 , но опция beforeSend кажется удаленной.

Я использую Basic Plugin , а не полную версию.

Возможно, мне стоит просто переключиться на загрузку на основе простой XHR, как было предложено там: загрузка файла jQuery и загрузка файла AJAX .

если у вас есть кнопка

  

Вы можете попробовать

 $('#fileupload').fileupload({ dataType: 'json', add: function (e, data) { $("#up_btn").off('click').on('click', function () { data.submit(); }); }, }); 

EDIT: в соответствии с комментариями лучше ответить, чтобы избежать дублирования запросов. (также работать unbind , я не проверяю, является ли bind и unbind но команда jquery рекомендует включать и 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 

Ни один из этих ответов не будет работать для нескольких загрузок файлов. В моем случае было задействовано несколько вложений в stream комментариев. Поэтому мне сначала нужно было сохранить комментарий, чтобы получить идентификатор, а затем загрузить и сохранить все вложения. Это похоже на тривиальную вещь, но с этим плагином это не интуитивно. Мое решение использует пользовательские события в jQuery и отлично работает.

Текущий принятый ответ связывается с событием клика кнопки в обратном вызове «добавить», но обратный вызов «добавить» вызывается один раз для каждого файла. Если вы отключаете все события каждый раз, когда загружается только последний файл.

 $('#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"); }); 

Вы можете передавать любые данные, которые вы хотите, когда запускаете событие, поэтому оно действительно дает вам полный контроль над вашей формой.

Вы можете сделать это, подключившись к событию добавления . Там вы не позволяете загрузчику выполнять свое поведение по умолчанию. 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 к 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'); }); } 

Примечание. Это может быть не очень элегантно, но это работает для меня. Это также отправит все поля в форме на сервер. Это будет ТОЛЬКО отправлять поля в форме, если файл также загружается. Если файл отсутствует, это НЕ отправит данные формы на сервер! Хотя я не тестировал его с несколькими файлами, этот метод может быть расширен и для мультипликаторов. Когда я попробую, я обновлю это сообщение с информацией.

Используйте следующее:

  

Он сделал трюк для меня.

  • Предварительный просмотр веб-страницы jQuery
  • jQuery не-AJAX POST
  • Как расширить модуль загрузки Bootstrap Twitter
  • Правильный способ интеграции плагинов jQuery в AngularJS
  • Как проверить, загружен ли плагин jQuery?
  • Проверка ввода массива с использованием модуля проверки правильности jquery
  • Установите ширину разделителя «Позиция: фиксированный» относительно родительского div
  • полный календарный выбор ячейки на мобильном устройстве?
  • jqGrid итерация по сетке Данные в подсети
  • Как запустить jQuery Fancybox при загрузке страницы?
  • Загрузочная карусель с несколькими кадрами одновременно
  • Давайте будем гением компьютера.