1. Обзор курса
При разработке системы веб -приложений функция загрузки файлов является очень распространенной функцией. Сегодня давайте в основном поговорим о соответствующей технической реализации функции загрузки файлов в Javaweb. Благодаря быстрому развитию интернет -технологий требования пользователей к опыту на веб -сайтах становятся все выше и выше. Существует также много инновационных моментов в технологии функции загрузки файлов, таких как асинхронная загрузка, загрузка перетаскивания, загрузка, загрузка, загрузка мониторинга прогресса, миниатюры файлов, большая точка перерыва файлов, непрерывная трансмиссия, большие файлы мгновенной трансмиссии и т. Д.
Основы, необходимые для этого курса:
Понять основное содержание протокола HTTP
Базовая технология эксплуатации потока ввода -вывода
Основы сервлета
Базовые знания о технологии JavaScript/JQUERY
2. Основы загрузки файлов
Для загрузки файлов браузер передает файл на сторону сервера в форме потока во время процесса загрузки, и все потоковые данные будут переданы на сторону сервера с помощью HTTP -запроса. Следовательно, формат запрошенного контента при загрузке файла должен быть в основном понят.
Страница загрузки файла:
<form action = "/itheimaupload/uploadservlet" method = "post" enctype = "Multipart/Form-Data"> Пожалуйста, выберите загруженный файл: <input type = "file" name = "/> <br/> <input type =" sope "value =" sup "/> </form>
Контент HTTP -запроса:
3. Java Fanage использует сервлет для получения файлов
Это хлопотно, если вы используете Сервлет для получения входного потока загруженных файлов, а затем анализировать параметры запроса в нем. Следовательно, вообще говоря, фон выбирает использование компонента загрузки файлов с обычной помощью, инструмент Apache с открытым исходным кодом.
// Java фоновый код: Commons-FileUpload Компонент загружает файл открытый класс uploadServlet Extens httpservlet {public void Doget (httpservlectrequest, httpservletresponse response) Throws ServletException, ioException {// 1. Настройка кэша diskfileitemfactory factory = new DiskFileItemFactory (1*1024*1024, New File ("c:/tempfiles/")); // 2. Создать ServlefileUpload Object ServletFileUpload SFU = new ServletFileUpload (Factory); // Решение китайской проблемы имени файла sfu.setheAderencoding ("UTF-8"); // 3. Resolve try {list <fieleItem> list = sfu.parseRequest (request); // разрешить все содержимое if (list! = Null) {for (fileitem item: list) {// определить, является ли это нормальным параметром формы if (item.isformfield ()) {// ultian form parameters // atem attribute attribute strice string inteme = get item.get -get item.get get itlem. value = item.getString ("UTF-8"); } else {// file if (item.getName ()! = null &&! item.getName (). equals ("")) {// Сохранить в сервере жесткий диск файл. (FileUploadexception e) {e.printstackTrace ();}} public void dopost (httpservletrequest, httpservletresponse response) throws servletexception, ioexception {Doget (запрос, ответ);}}4. Используйте WebUploader для загрузки компонентов
На передней части страницы загрузки файла мы можем использовать несколько более полезных компонентов загрузки, таких как компонент с открытым исходным кодом Baidu. Этот компонент может в основном соответствовать некоторым ежедневным функциям загрузки файлов, таких как асинхронная загрузка, загрузка перетаскивания, вставка загрузки, загрузка мониторинга прогресса, миниатюры файлов и даже большие точки остановки файлов для продолжения передачи и большую передачу файлов в секундах.
Загрузите компонент WebUpload
http://fex.baidu.com/webuploader/ Загрузите пакет Webupload на официальном веб -сайте WebUpload
Структура каталога WebUpload:
Основная демонстрация загрузки файла (включая прогресс загрузки)
внешний интерфейс
1.1 Импортировать требуемый CSS, JS на странице
<link rel = "styleSheet" type = "text/css" href = "$ {pagecontext.request.contextPath} /css/webuploader.css"> <script type = "text/javascript" src = "$ {pagecontext.request.contextpath } /js/jquery-1.10.2.min.js "> </script> <script type =" text/javascript "src =" $ {pagecontext.request.contextpath} /js/webuploader.js "> </script>1.2 Запишите тег страницы загрузки
<!-Загрузить div-> <div id = "uploader"> <!-Показать информацию о списке файлов-> <ul id = "filelist"> </ul> <!-Выберите область файла-> <div id = "filepicker">, чтобы выбрать файл </div> </div>
1.3 Написание кода WebUpload
<script type = "text/javascript"> // 1. Инициализировать WebUpload и настройка глобальных параметров var oploader = webUploader.create ({// Flashk Control Adder: "$ {pagecontext.request.contextpath} /js/uploader.swf", // Бэкэнд -адресом. Выберите: "#FilePicker", // Автосалочная файл Auto: true,}); // 2. После выбора файла отображение очереди информации о информации файла // Зарегистрировать событие FileQueed: запускается при добавлении файла в файл Queue //: представляет в данный момент выбранное в данный момент файл uploader.on ("filequed", function (file) {// Добавить информацию Div $ ("#filelist"). class = 'fileInfo'> <pan> "+file.name+" </span> <div class = 'wation'> ждать загрузки ... </div> <span class = 'text'> </span> </div> ");}); // 3. Зарегистрировать Загрузку Прогресс Прослушивание // Файл: Загрузка файла // процент: доля текущего прогресса. Максимум IS IS 1. id.find ("span.text"). Text (math.round (процент*100)+"%");}); // 4. Зарегистрируйте и загружайте прослушивание // файл: загруженный файл // Ответ: данные, возвращаемые фоном, return uploader.on ("uploadSuccess", function (файл, ответ) {// Обновление информации о состоянии $ ("#"+file.id) .find ("div.state").2) Бэкэнд -код сервлета
DiskFileItemFactory Factory = new DiskFileIteMfactory (); ServletFileUpload SFU = New ServletFileUpload (Factory); SFU.SetheAderencoDing ("UTF-8"); Try {list <fileitem> elects = sfu.parserequest (recement); для (fileItem item: iteps). Информация} else {// Информация о файле // Судья о том, что только файлы должны быть сохранены и обработаны System.out.println ("Полученное имя файла:"+item.getName ()); // Скопируйте файл на жесткий диск в фоновой FileUtils.copyInputStreamtile (item.getInputStream (), new FilePath (ServerPath+"/"+item.getName (); Сохраняет успешно ");}}} catch (fileuploadexception e) {e.printstacktrace ();}Создать эскизы изображения
Ключевой момент: вызов uploader.makethumb () Метод для генерации миниатюр
uploader.on ("fileQued", function (file) {// Приложение информации файла div $ ("#filelist"). Append ("<div id = '"+file.id+"' class = 'fileinfo'> <img/> <pan>"+file.name+"</span> class = '> watchload ... </div> class = 'text'> </span> </div> "); // Сделать магистрали изображения: Call Makethumb () Метод // Ошибка: не удалось создать миниатюры // src: path of thenknails uploader.makethub if (erry) {id.find ("img"). Заменить ("невозможно предварительно просмотреть");} // Если это удастся, миниатюр будет отображаться в указанном положении ID.Find ("img"). ATTR ("src", src);Перетаскивать, вставить и загружать
1) Добавить Div в область перетаскивания на странице
<!-Загрузить div-> <div id = "uploader"> <!-Область перетаскивания файла-> <div id = "dndarea"> <p> Перетащите файл непосредственно, чтобы автоматически загрузить </p> </div> <!-Показать информацию о списке файлов-> <ul id = "filelist"> </ul> <!-Select File-> <div = "filepicker"> select file kink at file to select file to to select file to to select file to div> </ul> <!
2) Добавить параметры перетаскивания в параметрах глобальной конфигурации веб -сайта.
// 1. Инициализировать WebUpload и настройка глобальных параметров var oploader = webUploader.create ({// Flashk Control Adder: "$ {pagecontext.request.contextpath} /js/uploader.swf", // Бэкэнд -адресом. Выберите: «#filepicker», // Автогрузка файла загрузки Auto: true, // включить функцию перетаскивания, укажите область перетаскивания dnd: «#dndarea», // Отключить функцию перетаскивания в других местах страницы, чтобы предотвратить страницу непосредственно открыть файл DisableBaldnd: true // enable paste: «#uploader»});Загрузить большие файлы в куски
1) Добавить параметры загрузки блока в глобальные параметры WebUploader
// 1. Инициализировать WebUpload и настройка глобальных параметров var oploader = webUploader.create ({// Flashk Control Adder: "$ {pagecontext.request.contextpath} /js/uploader.swf", // Бэкэнд -адресом. Выберите: «#filepicker», // Автогрузка файла загрузки Auto: true, // включить функцию перетаскивания, указать область перетаскивания DND: «#dndarea», // Отключить функцию перетаскивания страниц в других местах, чтобы предотвратить открытие страницы, // set in chunked: true, // enable paste paste:#uploader », // set in chenked: true, // ulable paste:#uploader», // set in chenked: true, // pastlegult whes whe to to to grobloader », // set in chenked: true, // paste -wordload. Chunked: true, // размер файла на блок (по умолчанию 5M) Chunksize: 5*1024*1024, // Открыть несколько одновременных потоков (по умолчанию 3) потоки: 3, // При загрузке текущего файла PreparenextFile: true});2) Мониторинг трех временных точек для загрузки файлов
После добавления вышеупомянутых трех конфигураций вы обнаружите, что, когда файл превышает 5 м, WebUploAder автоматически отправит файл на фон.
Каждый запрос блока содержит информацию:
Вы можете прослушать три важных момента времени в загрузке файлов в кусочках.
Перед набором-файлом: вызовите перед-центю перед пособием: если есть блоки, вызовите Ful-File после того, как каждый блок отправит: вызовут после того, как все блоки отправляются // 5. Следите за тремя временными моментами загрузки файла (Примечание: этот раздел кода должен быть размещен до WebUploader.create) // Временный пункт 1 :: Перед загрузкой всех блоков (1. Уникальная отметка файла может быть рассчитана; 2. Это может определить, передается ли он в секунде) ///// Если загрузка в чертов Точка перерыва непрерывная передача) // Шаг 3: После того, как все кусочки успешно загружаются (1. Уведомление о слиянии кусочных файлов) WebUploader.uploader.register ({»перед снимком-файлом:« beforesendfile »,« Перед судом »:« beforesend »,« Впоследствии-send-file »:« Послеподняк ». Во всех кусках Beersendfi le: function () {// 1. Запросите, сохранил ли фон текущий блок. Если он существует, пропустите файл блока, чтобы реализовать функцию непрерывной передачи точки прорыва}, // Шаг 3: Вызовите эту функцию после того, как все блоки загружаются успешно atfosdendfile: function () {// 1. Если он загружен в блоки, все файлы блоков объединяются через фон}});перед логикой перед судом:
// Используйте метод md5file () для вычисления уникального тега файла // Эта функция получает deferredbeforeSendFile: function (file) {// Создание отложенного заповедника = webUploader.deferred (); // 1. Рассчитайте уникальный тег файла, используемый для непрерывной передачи и второй передачи (New WebUploader.uploader ()). Md5file (файл, 0,5*1024*1024) .progress (function (процент) {$ ("#"+file.id) .find ("div.state"). Получено ... ");}). Тогда (function (val) {uniquefileTag = val; $ ("#"+file.id) .find (" div.state "). Текст (" успешно полученная информация о файле "); // Только когда информация файла будет успешно получена, следующая операция будет выполнена deferred.rosolve ();////////coler (///////coalert (//////calert (//////calert (///////вакое Запросите, сохранил ли фон файл. Если он существует, файл будет пропущен, чтобы реализовать вторую функцию Pass // return deferred.promise ();}ЛОГИКА ЛОГИТЕЛЬНОСТИ:
// Отправить уникальный тег текущего файла на фон, который используется для создания каталога, который сохраняет кусочек файла Beforesend: function () {// Перенос уникальный тег текущего файла на фон, который используется для создания каталога, который сохраняет кусочек файла.3) Фон должен сохранить все кусочки файлов
// Создать каталог для каждого файла и сохранить все кусочки файла этого файла // Судите, был ли он загружен в куски, если (кусочки! if (! chunksdir.exists ()) {chunksdir.mkdir ();} if (chunk! = null) {// Сохранить chunkfile Chunkfile = новый файл (chunksdir.getpath ()+"/"+chunkfile); fileutils.copyinputStreamtifile (item.getInputStream ();4) Столь регистрации уведомляет бэкэнд, чтобы объединить все кусочки файлов
// Столь регистрации уведомляет фон для объединения файлов после распределения логики: effeksendfile: function (file) {// 1. Если загружены в куски, объедините все кусочные файлы через фон // Запрос фона слияния файлов $ .ajax ({type: «post», url: "$ {pagecontext.request.contextPath}/uploadcheckservlet? Filename: file.name}, dataType: "json", success: function (response) {alert (response.msg);}});} // слияние фона все кусочки if ("mergechunks" .equals (action)) {System.out.println ("Start Merge files ...) request.getParameter ("fileMd5"); string fileName = request.getParameter ("filename"); // Читать все файлы в файле каталогов f = новый файл (ServerPath+"/"+fileMd5); файл [] fileArray = f.listfiles (newFileFilter () {// Exculate Disterly Distorly, как давно допущено в файл publice boolean (newfiefilter () {// Exculate Disterly, в то же время, как и File Publice Boolean (newfiefilter () {// Exculate Disterly, как давно принять файл boolean (newfiefilter () {// Excul {if (pathname.isdirectory ()) {return false;} return true;}}); // конвертировать в коллекцию для облегчения списка сортировки <File> fileList = new ArrayList <File> (Arrays.aslist (fileArray)); // Сортировать от Small Collections.sort (fileList, New Comparator <File> () {public int -comp., файл int (file int int (file int (file int int (file int (file int (file int o1, file in) {if (integer.parseint (o1.getName ())) <integer.parseint (o2.getName ())) {return -1;} return 1;}}); файл outputFile = new File (ServerPath+"/"+fileName); // Создание filefile.createNewfile (); // ware -ware newchannel = newchannel = new newchannel = newchannel = newchannel = newchannel = newchannel = newchannel = newchannel = new watchannel = newchannel = new newchannel = new. FileOutputStream (outputFile) .getChannel (); // Merge fileChannel Inchannel; для (файл файла: fileList) {inchannel = new FileInputStream (file) .getChannel (); inchannel.transferto (0, inchannel.size (), OutChannel); inchannel.close (); // delete shard file.delete ();} // clear file tempfile = new file (serverpath+"/"+fillemd5); if (tempfile.isdirectory () && tempfile.exists ()) {tempfile.delete ();} // Закрыть потоковую optchannel.close (); response.setcontenttype ("text/html; charset = utf-8"); response.getWriter (). write ("/" msg/":/" reply.).Большие файловые точки перерыва продолжаются
Основываясь на реализации загрузки блоков, очень просто внедрить непрерывную передачу точки останова! ! !
внешний интерфейс:
// Временная точка 2: Если есть загрузка блока, эта функция вызывается перед каждой загрузкой блока // блок: представляет текущий объект блока Beforesend: function (block) {// 1. Запросите, сохранил ли фон текущий блок. Если он существует, пропустите файл блока, чтобы реализовать функцию непрерывной передачи точки перерыва var deferred = webuploader.deferred (); // Запросить, сохраняет ли фон информацию файла. Если он был спасен, он будет пропущен. Если это не так, то содержимое Chunk будет отправлено $ .ajax ({type: «post», url: «$ {pagecontext.request.contextpath}/uploadcheckservlet? Action = CheckChunk», Data: {// Файл уникальный markemd5: filEmd5, // current Chunk sffize chunk: block.chunk, // currentks size chunk chunk. lock.end block.start}, dataType: "json", успех: функция (ответ) {if (response.ifexist) {// Блок существует, пропустите блок deferred.reject ();} els Фон -создание каталога, который сохраняет блокировки файла this.Owner.options.formdata.filemd5 = filemd5; return deferred.promise (); },За кулисами:
// Проверьте, существует ли кусок или сохраняет private void checkChunk (httpservletrequest, httpservletresponse response) throws ioexception, filenotfoundexception {System.out.println ("CheckChunk ..."); String fileMd5 = request.getParameter ("filemD5"); string shunk = request.getNakMeter ("chringUnkAmeter;" chunkNATER ("kryNk.grekNater; request.getParameter ("Chunksize"); File CheckFile = новый файл (ServerPath+"/"+fileMD5+"/"+chunk); response.setContentType ("text/html; charset = utf-8"); // проверка файла существует и размер. checkfile.length () == integer.parseint (chunksize)) {response.getWriter (). write ("{/" ifexist/": 1}");} else {outs.getWriter (). write ("{/" ifexist/": 0}");}}}}}}}}}}}}}Передача файла за считанные секунды
Перед всеми блочными запросами может быть реализована вторая трансферная функция! ! !
внешний интерфейс:
beforesendfile: function (file) {// Создать defferedvar deferred = webuploader.deferred (); // 1. Рассчитайте уникальную оценку файла, используемой для непрерывной передачи точки останова (New WebUploader.uploader ()). Md5file (файл, 0,5*1024*1024) .progress (function (процент) {$ ("#"+file.id) .find ("div.state"). = val; $ ("#"+file.id) .find ("div.state"). $ .ajax ({type: "post", url: "$ {pagecontext.request.contextpath}/uploadcheckservlet? FILEMD5: FILEMD5}, DATATYPE: "json", успех: function (response) {if (response.ifexist) {$ ("#"+file.id) .find ("div.state"). Текст ("Успешно передал"); deferred.resolve ();}}});}); // return deferredreturn deferred.promise ();},За кулисами:
// Проверить, связаны ли данные MD5 файла с базой данных Private void fileCheck (httpservletRequest, httpservletresponse response) throws ioexception, filenotfoundexception {string filemd5 = request.getParameter ("fileMd5"); Hashmap <string, string> (); database.put ("576018603f4091782b68b78af85704a1", "01. Курс Review.Itcast "); outs.setContentType (" text/html; charset = utf-8 "); if (база данных.containskey (filemd5)) {response.getWriter (). Write (" {/"ifexist/": 1} ");} else {recsome.getWriter ().Выше приведено примером объяснения загрузки и загрузки файла Javaweb, которую редактор представил вам (Cool File Dulate Technology). Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!