Fileupload adalah komponen unggahan file besar yang ditulis dalam javascript murni di luar negeri. Komponen ini mendukung fungsi seperti unggahan shard, kelanjutan breakpoint, dan beberapa file.
Berikut adalah cara untuk menggunakan Template Kustom Komponen Fileupload Component (FineUploaderbasic):
Berikut ini adalah kode konfigurasi:
Konfigurasi front-end:
<!-Tombol Definisi-> <Div ID = "BASIC_UPLOADER_FINE"> <i> </i> Pilih File </div> <Div ID = "Triggerupload"> Klik untuk mengunggah </Div> <!-Tampilkan informasi-> <Div ID = "Pesan"> </Div> <Div ID = "Cancelupload"> Batal </Div> </Div = " id = "PauseUpload"> Suspend unggahan </div> <div id = "continedupload"> Lanjutkan unggah </div> <script> $ (dokumen) .ready (function () {$ fub = $ ('#basic_uploader_fine'); $ pesan = $ ('#pesan'); var var unggah = QQ.FINE baru. Benar, // Tombol Upload Multi-File: $ fub [0], // Tombol Upload Autoupload: false, // Jika Anda tidak mengunggah secara otomatis, hubungi metode unggahan yang rangka, 'JPEG', 'JPG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'ZG', 'JPEG', 'JPG', 'JPG', 'JPG', 'JPG', 'JPG', ' absolute address) request: { endpoint: 'server/endpoint.php' }, retry: { enableAuto: false // defaults to false Automatically retry}, chunking: { enabled: true, partSize: 500, // Group size, default is 2M concurrent: { enabled: true // Concurrent group upload, default 3 concurrent}, success: { endpoint: "Server/endpoint.php? Done" // Upload grup diselesaikan setelah diproses}}, // Callback Function Callbacks: {// File mulai mengunggah OnSubmit: Function (id, fileName) {$ message.append ('<Div ID = "File-' + ID + '" Style = "Margin: 20px 0 0" fileName) { $('#file-' + id).addClass('alert-info') .html('<img src="client/loading.gif"> ' + 'Initializing ' + '"'); }, //Progress bar onProgress: function(id, fileName, loaded, total) { if (loaded < total) { progress = Math.round(loaded / total * 100) + '% dari ' + Math.round (Total/1024) +' KB '; $ ('#File- ' + ID) .Removeclass (' Alert-Info ') .html (' Img Src = "http://img.zcool.cn/community/01ff2756629d09d09d09d09.cn2 File ... ' + Progress); }, // Setelah mengunggah diselesaikan secara lengkap: function (id, fileName, responseJson) {if (responseJson.success) {var img = responseJson ['target'] $ ('#file-' + id) .removeclass ('warnin-info') .addclass ('waspada'). + '' + nama file + '");} else {$ ('#file- ' + id) .removeclass (' alert-info ') .addclass (' waring-error ') .html (' </</i> 'Onbon,}}, oBSEOR, ONDER, ACREAST, ACREAT, ACRIRE, ACREAT, ACREOR, ACRIBSE, ACRION, NAMA APA. Maybexhrorxdr) {Console.log (id + '_' + nama + '_' + alasan); unggahan.cancel (0); unggah. PauseUpload (0);});Kode PHP:
//Handler.php situs web resmi file membutuhkan_once "handler.php"; $ unggah = unggah baru (); // jenis file batas $ unggah-> diizinkan extensions = array (); // Batas ukuran file $ unggah-> sizelimit = null; // unggah kotak file $ unggah-> inputname = "qqfile"; // Tentukan lokasi penyimpanan file yang dikelompokkan $ unggah-> chunksfolder = "chunks"; $ Method = $ _server ["request_method"]; Handler.php kode dan menambahkan aturan pembuatan folder [Anda juga dapat menyesuaikannya]) $ unggahDirectory = $ unggah-> getPathName ('member_avatar'); if ($ method == "post") {header ("tipe konten: teks/polos"); // Gabungkan grup setelah unggahan grup selesai jika (isset ($ _ get ["done"])) {$ result = $ unggah-> Combinechunks ($ unggahDirectory); // gabungan file yang dikelompokkan} else {// mulai mengunggah file $ result = $ unggah-> handleupload ($ unggahDirectory); // Dapatkan nama yang diunggah $ hasil ["unggahName"] = $ unggah-> getUploadName (); } echo json_encode ($ result);} // hapus pemrosesan file lain jika ($ method == "delete") {$ result = $ unggah-> handledeLete ($ unggahDirectory); echo json_encode ($ result);} else {header ("http/1.0 405 metode tidak diperbolehkan");}Di atas adalah konfigurasi template khusus sederhana, saya harap ini akan membantu untuk pembelajaran semua orang.