Pertanyaan Bagaimana saya bisa mengunggah file secara asynchronous?


Saya ingin mengunggah file secara asinkron dengan jQuery. Ini adalah HTML saya:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Dan di sini saya Jquery kode:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

Alih-alih file yang diunggah, saya hanya mendapatkan nama file. Apa yang dapat saya lakukan untuk memperbaiki masalah ini?

Solusi Saat Ini

Saya menggunakan Plugin Formulir jQuery untuk mengunggah file.


2606
2017-10-03 10:22


asal


Jawaban:


Dengan HTML5 Anda dapat membuat unggahan file dengan Ajax dan jQuery. Tidak hanya itu, Anda dapat melakukan validasi file (nama, ukuran, dan jenis MIME) atau menangani peristiwa kemajuan dengan tag kemajuan HTML5 (atau div). Baru-baru ini saya harus membuat pengunggah file, tetapi saya tidak ingin menggunakannya Flash atau Iframes atau plugin dan setelah melakukan riset, saya menemukan solusinya.

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Pertama, Anda dapat melakukan validasi jika Anda mau. Misalnya, dalam acara onChange dari file:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Sekarang Ajax kirimkan dengan klik tombol:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

Seperti yang Anda lihat, dengan upload file HTML5 (dan beberapa penelitian) tidak hanya menjadi mungkin tetapi super mudah. Cobalah dengan Google Chrome karena beberapa komponen HTML5 dari contoh tidak tersedia di setiap browser.


2335
2018-01-06 13:34



Ada berbagai plugin siap pakai untuk melakukan pengunggahan file untuk jQuery.

Melakukan pengunggahan semacam ini bukanlah pengalaman yang menyenangkan, sehingga orang senang menggunakan solusi siap pakai.

Berikut ini beberapa:

Anda dapat mencari lebih banyak proyek pada NPM (menggunakan "jquery-plugin" sebagai kata kunci) atau di Github.


334
2017-10-15 10:35



Pembaruan 2017: Itu masih tergantung pada browser anda penggunaan demografis.

Suatu hal yang penting untuk dipahami dengan HTML5 "baru" file API adalah itu tidak didukung hingga IE 10. Jika pasar spesifik yang Anda tuju memiliki tingkat kesensitifan yang lebih tinggi daripada rata-rata terhadap versi Windows yang lebih lama, Anda mungkin tidak memiliki akses ke sana.

Memasuki tahun 2017, sekitar 5% dari browser adalah salah satu dari IE 6, 7, 8, atau 9. Jika Anda masuk ke perusahaan besar (misalnya ini adalah alat B2B, atau sesuatu yang Anda berikan untuk pelatihan) nomor tersebut dapat meroket. Baru beberapa bulan yang lalu — di tahun 2016— saya berurusan dengan perusahaan yang menggunakan IE8 di lebih dari 60% mesin mereka.

Jadi sebelum Anda melakukan sesuatu: periksa browser apa anda pengguna digunakan. Jika tidak, Anda akan belajar pelajaran yang cepat dan menyakitkan tentang mengapa "bekerja untuk saya" tidak cukup baik dalam pengiriman ke klien.

Jawaban saya dari tahun 2008 berikut.


Namun, ada metode upload file non-JS yang layak. Anda dapat membuat iframe di halaman (yang Anda sembunyikan dengan CSS) dan kemudian menargetkan formulir Anda untuk memposting ke iframe itu. Halaman utama tidak perlu dipindahkan.

Ini adalah pos "nyata" sehingga tidak sepenuhnya interaktif. Jika Anda memerlukan status, Anda memerlukan sesuatu di sisi server untuk memprosesnya. Ini bervariasi secara besar-besaran tergantung pada server Anda. ASP.NET memiliki mekanisme yang lebih bagus. PHP polos gagal, tetapi Anda dapat menggunakannya Perl atau modifikasi Apache untuk mengatasinya.

Jika Anda memerlukan banyak file-upload, sebaiknya lakukan setiap file satu per satu (untuk mengatasi batas unggah file maksimum). Poskan formulir pertama ke iframe, pantau progresnya menggunakan yang di atas dan setelah selesai, poskan formulir kedua ke iframe, dan seterusnya.

Atau gunakan solusi Java / Flash. Mereka jauh lebih fleksibel dalam apa yang bisa mereka lakukan dengan posting mereka ...


237
2017-10-03 10:41



Saya merekomendasikan menggunakan Pengupload Halus plugin untuk tujuan ini. Anda JavaScript kode akan menjadi:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

105
2017-11-21 16:38



Catatan: Jawaban ini sudah usang, sekarang mungkin untuk mengunggah file menggunakan XHR.


Anda tidak dapat mengunggah file menggunakan XMLHttpRequest (Ajax). Anda dapat mensimulasikan efek menggunakan iframe atau Flash. Sangat bagus Plugin Formulir jQuery yang memposting file Anda melalui iframe untuk mendapatkan efeknya.


87
2017-10-03 10:36



Ini File AJAX mengunggah plugin jQuery mengunggah file somehwere, dan meneruskan Menanggapi panggilan balik, tidak ada yang lain.

  • Itu tidak tergantung pada HTML spesifik, berikan saja a <input type="file">
  • Ini tidak mengharuskan server Anda untuk merespons dengan cara tertentu
  • Tidak masalah berapa banyak file yang Anda gunakan, atau di mana mereka berada di halaman

- Gunakan sesedikit -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- atau sebanyak -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

81
2017-07-29 00:34



Membungkus pembaca masa depan.

Asynchronous File Upload

Dengan HTML5

Anda dapat mengunggah file dengan jQuery menggunakan $.ajax() metode jika FormData dan API File didukung (kedua fitur HTML5).

Anda juga dapat mengirim file tanpa FormData tetapi bagaimanapun juga API File harus ada untuk memproses file sedemikian rupa sehingga bisa dikirim bersama XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Untuk JavaScript yang cepat dan murni (tidak ada jQuery) contohnya lihat "Mengirim file menggunakan objek FormData".

Fallback

Ketika HTML5 tidak didukung (tidak API File) satu-satunya solusi JavaScript murni lainnya (no Flash atau plugin browser lainnya) adalah iframe tersembunyi teknik, yang memungkinkan untuk meniru permintaan asynchronous tanpa menggunakan XMLHttpRequest obyek.

Ini terdiri dari pengaturan iframe sebagai target formulir dengan input file. Ketika pengguna mengirimkan permintaan dibuat dan file diunggah tetapi respons ditampilkan di dalam iframe alih-alih merender ulang halaman utama. Menyembunyikan iframe membuat seluruh proses transparan bagi pengguna dan mengemulasi permintaan asynchronous.

Jika dilakukan dengan benar, itu harus bekerja secara virtual di browser apa pun, tetapi memiliki beberapa peringatan sebagai cara mendapatkan respons dari iframe.

Dalam hal ini Anda mungkin lebih suka menggunakan plugin wrapper seperti Bifröst yang menggunakan teknik iframe tetapi juga menyediakan transportasi Ajax jQuery memungkinkan untuk mengirim berkas hanya dengan $.ajax() metode seperti ini:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Plugin

Bifröst hanyalah wrapper kecil yang menambahkan dukungan fallback ke metode ajax jQuery, tetapi banyak dari plugin yang disebutkan di atas seperti Plugin Formulir jQueryatau Upload File jQuery sertakan seluruh tumpukan dari HTML5 ke fallback yang berbeda dan beberapa fitur yang berguna untuk mempermudah proses. Tergantung pada kebutuhan dan persyaratan Anda, Anda mungkin ingin mempertimbangkan implementasi telanjang atau salah satu dari plugin ini.


75
2017-08-25 14:17



Saya telah menggunakan skrip di bawah ini untuk mengunggah gambar yang berfungsi dengan baik.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

Penjelasan

Saya menggunakan respons div untuk menampilkan animasi pengunggahan dan respons setelah unggahan selesai.

Bagian terbaik adalah Anda dapat mengirim data tambahan seperti id & dll dengan file saat Anda menggunakan skrip ini. Saya telah menyebutkannya extra-data seperti dalam naskah.

Di tingkat PHP ini akan berfungsi sebagai upload file normal. data tambahan dapat diambil sebagai $_POST data.

Di sini Anda tidak menggunakan plugin dan semacamnya. Anda dapat mengubah kode seperti yang Anda inginkan. Anda tidak membabi buta coding di sini. Ini adalah fungsi inti dari setiap upload file jQuery. Sebenarnya Javascript.


57
2018-01-25 11:03