Przesyłanie pliku jQuery: czy można wyzwolić przesyłanie za pomocą przycisku przesyłania?

Question

Używam jQuery file upload do przesyłania plików opartych na technologii AJAX. Zawsze rozpoczyna przesyłanie po wybraniu pliku. Czy można zmienić zachowanie, aby użyć przycisku "submit"? Jestem świadomy Issue #35, ale opcja beforeSend wydaje się być usunięta.

Używam Basic Plugin, a nie pełnej wersji.

Może powinienem przełączyć się na przesyłanie oparte na zwykłym XHR zgodnie z sugestią: jQuery Upload Progress and AJAX file upload.

Answer 1

jeśli masz przycisk

<button id="up_btn">Upload</button> 

Można spróbować z

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

EDYCJA: w zależności od komentarzy lepsza odpowiedź uznana off, aby uniknąć powielonych żądań. (Również pracować unbind, nie sprawdzić, czy jest bind i unbind ale zespół jQuery polecić on i offlink od 1,7)

Answer 2

W pobranych próbek przejdź do js/jquery.fileupload-ui.js i że trzeba będzie autoUpload który jest ustawiony domyślnie true iść naprzód i to na „false”, a następnie można użyć przedstawienia zachowań.

EDIT:

Wypróbuj za podstawowy realizacji:

<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> 

Answer 3

Można również znaleźć w jquery.fileupload.js

Jest " opcja autoUpload”w linii 142.

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 

Answer 4

pamiętaj, aby nie układać zdarzenia według mocowania wydarzenie każdym razem, gdy plik jest dodawany. W ten sposób formularz zostanie przesłany wiele razy.

chciałbym zrobić coś takiego

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

Zawiadomienie metodę off(), aby usunąć wszystkie poprzednie dołączone wydarzenia.

Answer 5

za pomocą szablonów Dodaj do podążać pokazując wysyłania i pobierania musi zrobić to w ten sposób

$('#fileupload').fileupload({ 
 
    dataType: 'json', 
 
    add: function (e, data) { 
 
     var that = this; 
 
\t  $.blueimp.fileupload.prototype.options.add.call(that, e, data); 
 
     $("#up_btn").on('click', function() { 
 
      data.submit(); 
 
     }); 
 
    }, 
 
});

Answer 6

można to zrobić przez zahaczenie do dodać wydarzenie. Tam uniemożliwisz programowi przesyłającemu zachowanie domyślne. Pliki wyjaśniające o przesłaniu pliku jquerywyjaśniają to, ale trochę trudno je znaleźć.

Następujące jest napisane w 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.'); 
     } 
    }); 
}); 

To rzeczywiście jest bardzo ważne, że przycisk submit tworzysz nie jest wewnątrz formularza!

Answer 7

Użyj następujących:

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     $('#fileupload').fileupload({ 
      autoUpload: true 
     }); 
    }); 
</script> 

To załatwiło sprawę dla mnie.

Answer 8

Żadna z tych odpowiedzi nie działa w przypadku przesyłania wielu plików. Mój przypadek wymagał dopuszczenia wielu załączników w wątku komentarzy. Musiałem więc najpierw zapisać komentarz, aby uzyskać identyfikator, a następnie przesłać i zapisać wszystkie załączniki. Wydaje się to banalną rzeczą, ale z tą wtyczką nie jest to aż tak intuicyjne. Moje rozwiązanie wykorzystuje niestandardowe zdarzenia w jQuery i działa świetnie.

Aktualnie akceptowana odpowiedź wiąże się ze zdarzeniem kliknięcia przycisku w wywołaniu zwrotnym "dodaj", ale wywołanie zwrotne "dodaj" jest wywoływane raz dla każdego pliku. Jeśli usuniesz wszystkie zdarzenia za każdym razem, tylko ostatni plik zostanie przesłany.

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

Wiążąc przycisk przesyłania z niestandardową nazwą, możemy wykonać dowolne przetwarzanie przed wysłaniem obrazów. W moim przypadku polegało to na przesłaniu komentarza i odzyskaniu komentarza, który zrobiłem w oddzielnym wywołaniu. Ten kod odpowiada tylko na kliknięcie, ale możesz zrobić, co chcesz, przed uruchomieniem zdarzenia.

$("#up_btn").on('click', function (e) { 
    e.preventDefault(); 
    $("#up_btn").trigger("customName"); 
}); 

Możesz przekazać dowolne dane, gdy uruchomisz zdarzenie, dzięki czemu naprawdę uzyskasz pełną kontrolę nad formularzem.

Answer 9

Oto jak I wdrożone przesyłanie plików za pomocą przycisku:

Oto przycisk:

<button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button> 

Oto element wejściowy:

<input id="fileupload" type="file" name="files[]" style="display: none;"> 

Oto SaveInfo () funkcja:

//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'); 
     }); 
    } 

Uwaga: To może nie być zbyt eleganckie, ale działa dla mnie. Spowoduje to również wysłanie wszystkich pól w formularzu na serwer. To będzie TYLKO wysłać pola w formularzu, jeśli plik jest również przesyłany. Jeśli plik nie jest obecny, NIE będzie wysyłał danych formularza na serwer! Chociaż nie przetestowałem tego z wieloma plikami, ta metoda może zostać rozszerzona tak, aby robić także wielokrotności. Kiedy go wypróbuję, zaktualizuję ten post informacjami.