HTML5+Websocket mengimplementasikan contoh pengunggahan multi -file secara bersamaan

Mengunggah beberapa file secara bersamaan dalam aplikasi HTTP tradisional dan mengunggah dan melihat kemajuan pengunggahan adalah hal yang sangat merepotkan. dari sepotong dokumen juga sangat nyaman.

Mungkin pratinjau fungsi yang perlu Anda lakukan:

Fungsi utama adalah bahwa pengguna dapat secara langsung menyeret dan menjatuhkan file folder ke dalam halaman web dan mengunggahnya.

Untuk memfasilitasi informasi membaca file, kelas informasi sederhana, kelas objek dibaca dikapsulasi berdasarkan file asli.

 Functionfo (file, halaman) {this.size = file.size; Halaman = 0; 16); lse {this.pages = math.floor (this.size / this.pagesize);}} fileInfo.prototype.reset = function () {this.pageIndex = 0; Function () {var Binary = 'var bytes = uint8aray baru (this.databuffer) var len = bytes.bytelength; i])} return window.btoa (biner);} fileInfo.prototype.onloadData = function (evt) {var obj = evt.target [tag]; databuffer = evt .target.Result; if (obj.loadCallback! = null) obj.loadCallback (obj);} else {if (obj.uploadError! = null) obj.uploadError (fi, evt.target.er ror); }} FileInfo. Pembaca [tag] = ini; Count; Channel = file._channel; var url = file._url; }}} Function (hasil) {if (result.status == null || result.status == tidak terdefinisi) {file.pageIndex ++; if (file.pageIndex <file.pages) {file.load (file.onuploaddata);}} else {if (file.uPloadError! = null) file.uploadError (file, data.status);}); = fungsi (saluran, url) {var fi = this; if (if (if (if result.status == null || result.status == tidak terdefinisi) {fi._channel = channel; fi._url = result.data; fi.load (fi.onuploaddata);} else {if (file. unggahror! = null) file.uploadError (fi, result.status);}});}

Pemrosesan kelas sangat sederhana. file.

Tidak perlu melakukan hal -hal rumit di HTML5 untuk diseret di HTML5.

 Fungsi onsdragenter (e) {e.stoppropagation (); (E) {E.StopPropagation (); ('Rounded');

Anda hanya perlu mendapatkan file drag dan drop terkait selama proses OnDrop.

Pada saat ini, Anda hanya perlu membuat objek FileInfo terkait untuk file yang dipilih, dan hubungi metode unggahan.

 Function onFileOpen (file) {if (file.length> 0) {for (var i = 0; i <file.length; i ++) {var info = FileInfo baru (file [i], 32768); ;

Perbarui Informasi Kemajuan File Unggah Melalui Event Unggah

 Function onuploadprocess (file) {$ ('#p_' + file.id) .progressBar ({value: (file.pageIndex / file.pages) * 100, teks: file.fileName + ' + fi le.uploadbytes +' / ' + file.size +'] '});}

Dengan bantuan dukungan Beetle untuk Websocket, implementasi server yang sesuai sangat sederhana

 /// <ringkasan> // Halaman, String Base64Data) {Console.WriteLine (FileId: {2}, PageIndex: {0} halaman: {1} DataLength: {3}, PageIndex, FileID, base64Data.lengt h);} Uploadfile string publik (string fileid, base64data.lengt h); string fileName, ukuran panjang) {Console.WriteLine (FileID: {2}, nama file: {0} ukuran: {1}, nama file, ukuran, fileID);

Ada dua dalam metode server untuk mengunggah permintaan file, dan metode penerima blok unggahan.

Anda hanya membutuhkan kode sederhana di atas untuk mencapai fungsi pengunggahan multi -file. Prosesing Mask Plus Plus Plus Plus Base64 relatif berat.

Kode Unduh: WebSocketUpload.rar

Di atas adalah semua isi artikel ini.