1. Описание причин использования плагина WebUploader
Меня обманул проект, который я делаю сейчас.
Позвольте мне сначала поговорить о моей архитектуре проекта Spring+Struts2+mybatis+mysql
Тогда что. Было решено, что этого будет достаточно для загрузки в соответствии с 2G, поэтому я использовал плагин AjaxFileUpload. Поскольку я использовал это для загрузки изображений раньше, я использовал их напрямую при загрузке вложения.
Различные коды и коды были проверены. Нет проблем с загрузкой 2G -файлов. Хитрость пришла. После того, как проект был запущен, клиент попросил загрузить файлы 4G, и было даже более 20 г. Полем Нани, ты не сказал это раньше. Полем Полем
В соответствии с IE11, используйте плагин ajaxfileupload.js для загрузки файлов, которые превышают 4G, и IE напрямую бросает исключение. Сообщение с арифметическим результатом, превышающим 32 бита.
Как показано на рисунке ниже:
В качестве дополнительного примечания, моя система-64-битная память 8G, браузер Google и браузер IE11-все 32-битные. Это проблема для загрузки 8G с использованием AjaxFileUpload под Google. О ошибках не сообщается.
IE11 имеет более 4G, и неправильно сообщать о приведенной выше картине напрямую. ни за что. Измените плагин.
2. Выбор плагина
1. Плагин загрузки потока. Stream-это плагин для решения проблемы загрузки файлов различными браузерами. Это комбинация флэш -версии uploadify и HTML5. Адрес плагина http://www.twinkling.cn/
Функция действительно очень мощная, но стиль CSS фиксирован, что сильно отличается от стиля панели прогресса моего текущего проекта. Отказаться от этого плагина
2. Плагин WhebuploAder. WebUploader - это простой современный компонент загрузки файлов в основном HTML5 и дополнен Flash, разработанной командой Baidu Webfe (FEX). В современных браузерах мы можем дать полную игру с преимуществами HTML5, не отказываясь от основных браузеров IE, и продолжать использовать исходное время выполнения Flash и совместимы с IE6+, IOS 6+ и Android 4+. Тот же метод вызова может быть выбран пользователями по желанию.
Использование большей фрагментации файлов одновременная загрузка значительно повышает эффективность загрузки файлов. Адрес плагина http://fex.baidu.com/webuploader/
Этот плагин может настроить стили CSS. Функции также очень мощные, поэтому я решительно принял этот плагин.
3. Загрузка единого файла WebUploader
Я использую версию WebUploader 0.1.5. WebUploader в основном нарезает большие файлы на клиенте, такие как отправка запросов на шардинг каждые 5 м и получение файлов из фона для объединения файлов. Есть два способа объединения файлов. Первый - передать все осколки на задний план, а затем объединить их. Это для того, чтобы убедиться, что порядок шардинга является правильным, а второй - слияние во время шарда. Я использовал второй в проекте. Загрузка файлов с использованием веб -загрузчика требует трех ресурсов: JS, CSS и SWF.
1. Принципировать файлы JS
<script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script>
2. Представьте стиль CSS
<link href = "../ main/css/webuploader.css" rel = "stylesheet" type = "text/css"/>
3. Представьте SWF . SWF не ссылается на это напрямую. Просто укажите путь SWF, когда инициализируется WebUploader.
4. Upload3.html
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "ja" lang = "ja"> <Head> <meta http-feviv = "content-type" content = "text/html; charset = utf-8"/> <meta-type Questp = "-Lawge ="-Lawge = "-lavage ="-lavage = "-languge ="-languge = "-languge ="-language = "-laving ="-lavage = "-laving ="-laving = "lawge =" html; /> <meta http-equiv = "content-script-type" content = "text/javascript"/> <meta http-equiv = "content-type" content = "text/css"/> <title> demo </title> <link href = "../ main/css/v1.css" relshe-lets href = "../ css/css-v1.css" relshetshet "=" text/css/css/v1.css "relshetshet". /> <link href = "../ main/css/webuploader.css" rel = "styleSheet" type = "text/css"/> <script type = "text/javascript" src = "../ main/js/jquery-1.11.1.min.js"> </script> <script type = "javascript/javascript" javascript " src = "../ main/js/jquery-2.1.4.min.js"> </script> <script type = "text/javascript" src = "../ main/js/jquery-ui.min.js"> </script> <script type = "text/javascript" src = "../ main/js/bootstrap datepicker.min.js"> </script> <script type = "text/javascript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = text/javascript " src = "../ main/js/locales/bootstrap datepicker.ja.min.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script> <script type = "text/javascript" src = "../ js/contents/upload3 id = "Прикрепить"> </div> <input type = "button" value = "upload" id = "upload"/> </div> </div> <div id = "uploader1"> <! --- Используется для хранения информации о файле-> <div id = "thelist1"> </div> <div> <div id = "multi"> </div> <input = "value =" ud valud = "up-valload =" up-valload = "up-valload =" up-valload = "up-valload =" up-valud " </div> </div> </body> </html>
Картина относительно проста, выглядит так
5.Upload3.js
Включая загрузку с одним файлом, многопрофильную загрузку и несколько экземпляров WebUploader
/********************************************* • Бесполезно, хотя я открыл отладку, имя ввода действительно было изменено. // Файлв. Файл не может быть извлечен при использовании файла //. Рекомендуется, чтобы у автора было время изменить это место, он убьет людей. Сервер: «Содержание мощности! Ajaxattachupload.action», Duplicate: true, // - это то же самое, что File RESIZE: FALSE, FormData: {«Статус»: «Файл», «Содержание Chunked: True, // Проблемная обработка chunksize: 5 * 1024 * 1024, // 5 м за среза chuntry: false, // если он не удается, не пробуйте потоки: 1, // загружать одновременное число. Максимальное количество процессов загрузки разрешено одновременно. // Runtimeorder: 'Flash', // Отключить функцию глобального сопротивления. Это не появится, когда изображение перетаскивается на страницу, откройте изображение. disableglobaldnd: true}); // When a file is added, uploader.on( "fileQueued", function( file ) {console.log("fileQueued:");$list.append( "<div id='"+ file.id + "' class='item'>" +"<h4 class='info'>" + file.name + "</h4>" +"<p class='state'>Waiting for upload...</p>" +"</div>");}); // Когда все файлы загружаются, uploader.on ("uploadfination", function () {console.log ("uploadfine:");}) // Когда файл загружается на ответ сервера, это событие будет отправлено, чтобы спросить, является ли ответ сервера. uploader.on ("uploadAccept", function (object, ret) {// Сервер ответил //ret._raw аналогична Datavar Data = json.parse (ret._Raw); if (data.ResultCode! = "1" && data.ResultCode! "9") {uploader.reset (); Alert ("erron"); return false;}} else {// e05017uploader.reset (); alert ("erron"); return false;}}) // бесплатно, когда загрузка файла успешно. uploader.on ("uploadsuccess", function (file) {$ ("#"+file.id) .find ("p.state"). Text ("uploaded");}); uploader.on ("uploadError", функция (файл) {$ ("#" file.id) .find ("p.state"). error");uploader.cancelFile(file);uploader.removeFile(file,true);uploader.reset();});$("#upload").on("click", function() {uploader.upload();})});/******************************************************WebUpload Single file Загрузите конец ********************************************* // ***************************************** Filesize = 0; '../../main/js/uploader.swf', server: "contentsdetail! Multiupload.action", Duplicate: true, // - это тот же файл resize: false, formdata: {"Статус": "multi", "contentsDto.contentsId": "0000004730", "uploadnum": "0000004730", "EssuestFlg": 'false'}, Compress: Null, // картина не сжимается кусочкой: true, // shashize: 5 * 1024 * 1024, // 5mhry////////вание. Сбой, не пытайтесь еще раз потоки: 1, // загружать параллельный номер. Максимальное количество процессов загрузки разрешено одновременно. // filenumLimit: 50, // Проверьте общее количество файлов. Если он превышает его, не будет разрешено присоединиться к очереди .// Runtimeorder: 'Flash', // Отключить функцию глобального перетаскивания. Таким образом, когда изображение перетаскивается на страницу, откройте изображение. disableglobaldnd: true}); // Когда добавляется файл, uploader.on ("filequed", function (file) {console.log ("filequed:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<H4 class = 'info'>" + file.name + "</h4>" + "<p class = '> wate o a a a ate o a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a wait'> wait wo a wait '> name.name +" </h4> " +". +"</div>");}); // При запуске загрузчика, uploader.on ("startupload", function () {console.log ("startupload"); // Добавить дополнительные параметры формы $ .extend (true, uploader.options.formdata, {"FileSize": FileSize, "MultifilEname": fileName.join (","), "filesizeOneByOne": FileSizeOneByOne.join (",")}); uploader.on ("uploadAccept", function (object, ret) {// ответный сервер //ret._raw похож на dataConsole.log ("uploadAccept"); console.log (ret); var data = json.parse (ret._raw); if (data.Resultcode! == "9") {alert ("error"); uploader.reset (); return;}} else {uploader.reset (); alert ("error");}}) uploader.on ("uploadSuccess", function (file) {$ ("#"+file.id ) .find ("p.state"). Text ("uploaded");}); uploader.on ("uploadError", function (файл, разум) {$ ("#"+file.id) .find ("p.state"). Text ("uploaderror"); console.log (file); console. i = 0; i <fileArray.length; i ++) {uploader.cancelfile (fileArray [i]); uploader.removefile (fileArray [i], true);} uploader.reset (); Ошибка события uploader.on ("error", function () {console.log ("error"); uploader.reset (); filesize = 0; filename = [];; файл dizeOneByone = []; alert («Ошибка»);}) // Если это кнопка загрузки в модальном поле, контроль не будет сработана, когда нажимает кнопку «Нажатие». File/* $ ("#multi .webuploader-pick"). click (function () {uploader.reset (); filesize = 0; filename = [];; файл dizeonybyone = []; $ ("#multi: file"). Click (); // Ключевой код}); /// Откройте загрузку после выбора файла "). $ (document) .on ("change", "input [name = 'multifile']", function () {var filearray1 = uploader.getfiles (); for (var i = 0; i <fileArray1.length; i ++) {// Использование файлов += fileArray1 [i] .size; fileSizeOneByone.push (fileArray1 [i] .size); filenAme.push (fileArray1 [i] .name);} console.log (fileSize); console.log (fileSize); консоль.log (fileSizeOneByone); консоль (fiLename); upload*/$("input[name='multiUpload']").on("click",function(){uploader.upload();})});/******************************************************WebUpload Multi-file upload конец ************************************************************************************************************************************************ LastModifiedDate = [Ср 27 апреля 2016 2016 16:45:01 GMT+0800 (стандартное время Китая)], кусочки = [3], chunk = [0], type = [audio/wav], uid = [yangl], id = [wu_file_0], size = [268620636], name = [3. wav], // formAtaa parameta. contentsdto.contententsid = [0000004730], ESISTFLG = [false], status = [file], uploadnum = [0000004730]} *****************************************************************************************************************6.contentsdetail.action
// единый файл загрузка фонового кода public void ajaxattachupload () {string path = "d: // test //"+filefilename; try {file file = this.getfile (); fileutil.randomaccessfile (path, file); // Если файл не маленький, и 5m, значение параметра shard chunk - это path, файл); nullif (stringutils.isempty (chunk)) {outjson ("0", "успех", "");} else {// chunk shard index начинается с 0 // cunks total shard count if (integer.valueof (chunk) == (integer.valueof (chunks) - 1) {outjson (uperly ", upegliely", upeling ",", ",", ", upeculy", upegliely., upegliely. ");} else {outjson (" 2 "," uploading " + filefilename +" Chunk: " + chunk," ");}}} catch (Exception e) {outJson (" 3 "," upload fail "," ");}}Fileutil.java
/*** Укажите местоположение, чтобы начать записывать файл* @param Tempfile вводный файл* @param outpath path в выходной файл (path + file name)* @throws ioexception*/public static void randomaccessfile (string outpath, file tempfile) throws ioexception {randomaccessfile rafile = null; nul File (Outpath); // Открыть целевой файл в чтении и записи rafile = new randomaccessfile (dirfile, "rw"); rafile.seek (rafile.length ()); inputstream = new BufferedInputStream (new FileInputStream (Tempfile)); Byte [] buf = new Byte [1024]; int length = 0; while (длина = inputstream.read (buf))! IoException (e.getMessage ());} наконец {try {if (inputStream! = Null) {inputStream.close ();} if (rafile! = Null) {rafile.close ();}} catch (Исключение e) {throw new ioExexage (e.getMessage ()); 7. Эффект изображения
Выше приведено соответствующее знание метода загрузки больших файлов, отдельных файлов и нескольких файлов в Java, представленных редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!