Html5+websocket реализует примеры загрузки много -файлов одновременно

Загрузка нескольких файлов одновременно в традиционном HTTP -приложении и загрузка и просмотр прогресса загрузки - это очень хлопотная вещь, конечно, управление и загрузку очень гибко. Одно документ также очень удобен.

Вероятно, предварительно просмотрите функции, которые вам нужно сделать:

Основная функция заключается в том, что пользователь может напрямую перетаскивать и отбрасывать файл папки в веб -страницу и загружать его.

Чтобы облегчить информацию о чтении файла, простой класс объекта с информацией о файле инкапсулируется на основе исходного файла.

 Функция FileInfo (File, Pageize) {this.size = file.size; страницы = 0; 16); lse {this.pages = math.floor (this.size / this.pagesize);}} fileinfo.prototype.reset = function () {this.pageindex = 0; Function () {var binary = 'var bytes = new uint8aray (this.databuffer) var len = bytes.bytelength; i])} return window.btoa (binary);} fileinfo.prototype.onloaddata = function (evt) {var obj = evt.target [Tag]; DataBuffer = evt .target.Result; }} FileInfo. Reader [Tag] = это; Count; Канал = file._channel; }}} Function (result) {if (result.status == null || result.status == undefined) {file.pageindex ++; if (file.pageindex <file.pages) {file.load (file.onuploaddata);}} else {if (file.uploaderror! = null) file.uploaderror (file, data.status);}); = function (Channel, url) {var fi = this; if (if (if (если (если result.status == null || result.status == undefined) {fi._channel = channel; fi._url = result.data; fi.load (fi.onuploaddata);} else {если (file. uploadError! = null) file.uploaderRor (fi, result.status);}});}

Обработка класса очень проста. Файл. Отправить на сервер на WebSocket.

Нет необходимости делать сложные вещи в HTML5.

 Функция ondragenter (e) {e.stoppropagation (); (e) {e.stoppropagation (); ('Crounded');

Вам нужно только получить связанные файлы перетаскивания во время процесса Ondrop.

В настоящее время вам нужно только создать связанный объект FileInfo для выбранного файла и вызовать метод загрузки.

 Функция OnFileoPen (files) {if (files.length> 0) {for (var i = 0; i <files.length; i ++) {var info = new fileInfo (файлы [i], 32768); ;

Обновите информацию о ходе процесса загрузки файла через событие uploadprocess

 Функция onuploadProcess (file) {$ ('#p_' + file.id) .progressbar ({value: (file.pageindex / file.pages) * 100, text: file.filename + ' + fi le.uploadbytes +' / / ' + file.size +'] '});}

С помощью поддержки Beetle для WebSocket, реализация соответствующего сервера очень проста.

 //// <summary> /// Copyright © Henryfan 2012 /// CreateTime: 2012/12/14 21:13:34 /// </summary> Общественный класс Pages, String Base64data) {console.writeLine (fileId: {2}, pageIndex: {0} страницы: {1} dataLength: {3}, pageIndex, fileId, base64data.lengt h);} public stringfile (string fileid, String FileName, Long Size) {Console.WriteLine (FileId: {2}, имя файла: {0} размер: {1}, имя файла, размер, fileId);

В методе загрузки файлов есть два, а также метод получения файла загрузки.

Вам нужен только более простой код для достижения функции загрузки много -файлов. Обработка маски плюс плюс потеря Base64 относительно тяжелая.

Загрузить код: websocketupload.rar

Выше всего содержимое этой статьи.