Введение в веб -загрузчик
WebUploader - это простой современный компонент загрузки файлов в основном HTML5 и дополнен Flash, разработанной командой Baidu Webfe (FEX). В современных браузерах мы можем дать полную игру с преимуществами HTML5, не отказываясь от основных браузеров IE, и продолжать использовать исходное время выполнения Flash и совместимы с IE6+, iOS 6+, Android 4+. Два набора времени выполнения, один и тот же метод вызова может быть выбран пользователями по желанию. Использование большей фрагментации файлов одновременная загрузка значительно повышает эффективность загрузки файлов.
Здесь мы используем пример с официального сайта для загрузки нашего личного аватара.
Наше внимание уделяется загрузке файлов с использованием WebUploader в Spring Boot Project, поэтому мы можем напрямую реализовать простую функцию только для справки.
Вот пример, загруженный с официального веб -сайта: функция загрузки изображения с обрезкой.
Мы используем примеры для реконструкции загрузок аватара в проекте.
Эффект выглядит так:
Во -первых, давайте пересмотрим наш пример -код WebUploader.
Ниже приведены некоторые коды в моем проекте:
(function (factory) {if (! window.jquery) {alert ('jQuery требуется.')} jQuery (function () {factory.call (null, jquery);});}) ($) {// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. Erry («WebUploader не поддерживает браузер, который вы используете. '); _.Deferred (); }); file.trigger ('resize', blob.size, size); file._meta); Ложно, // Можно избежать режима. $ .trim ($ ("#base_url"). val ()) + '/static/webuploader/uploader.swf', filenumlimit: 1, // разрешены только файлы изображений. 'JPG, JPEG, PNG', // Решение WebUploader Chrome Нажмите на поле выбора файла загрузки, чтобы отложить за несколько секунд, прежде чем ответ будет медленным миметипам: 'Image/JPG, изображение/JPEG, изображение/PNG' // Модифицировать эту строку} // FormData: {"Авторизация": // Chunked: True, // Shash // Chunksize: 10 * 1024 * 1024, // Размер Shash Указывает // потоки: 1, // количество потоков // DisableGlobaldnd: True // Disable Drag // onerror: function () {// var argis = [] .slice.call (аргументы, 0); }}); }); 'uploadSuccess', function (file) {showinfo ("uploadSuccess"); file._info.width; --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. upload-btn'); var iSbase64, поддерживаемый, обратный вызов; $ image.cropper ({aspectratio: 4/4, preview: ".img-preview", dode: function (data) {// console.log (data);}}); Функция srcwrap (src, cb) {// нам нужно проверить это в первый раз. if (typeof iSbase64supported === 'undefined') {(function () {var data = new image (); var support = true; data.onload = data.onerror = function () {if (this.width! = 1 || this.height! }) (); } if (iSbase64supported) {cb (src); } else {// в противном случае нам нужна поддержка сервера. // конвертировать BASE64 в файл. // $ .ajax ('', {// method: 'post', // data: src, // datatype: 'json' //}). Dod (function (response) {// if (response.result) {// cb (response.result); //} else {// alert ("preview Error"); //}); }} btn.on ('click', function () {callback && callback ($ image.cropper ("getData")); return false;}); return {setSource: function (src) {// Обработка BASE64 не поддерживается. // обычно встречается в IE6-IE8 SRCWRAP (src, function (src) {$ image.cropper ("setimgsrc", src);}); container.removeclass ('webuploader-element-invisible'); вернуть это; }, getImagesize: function () {var img = $ image.get (0); return {width: img.naturalwidth, высота: img.naturalheight}}, setcallback: function (cb) {callback = cb; вернуть это; }, disable: function () {$ image.cropper ("disable"); вернуть это; }, enable: function () {$ image.cropper ("enable"); вернуть это; }}}}}) (); // ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Uploader.crop (data); Uploader.upload (); }); }); // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Есть также некоторые коды для страницы:
Вот код для части контроллера:
@RequestMapping (value = "/student/studiveImgfileUpload", method = requestMethod.post) @Responsebody String StulityImgfileUpload (@RequestParam MultipartFile файл, httpservletrequest) {logger.info ("avatar avatar upload ...")//get file string string string rystrilenam logger.info ("Имя файла загрузки:" + OriginalFilEname) String realPath = request.getServletContext (). getRealPath ("/public/") string uploadfilename = system.currenttimemillis () + "_" + OriginalFilename logger.info ("Получите путь upload:" + ", upleanme boolean. // Merge Files Files randomAccessfile rafile = null bufferedinptream inputstream = null try {file dirfile = new File (realPath, uploadfilename) // Открыть целевой файл в rafile = newardaccessfile (dirfile, "rw") rafile.seek (rafile.length ()) BufferedInputStream (file.getInputStream ()) byte [] buf = new Byte [1024] int length = 0 while ((length = inputstream.read (buf))! = -1) {rafile.write (buf, 0, length)}} catch (Exception e) {flag = logger.info ("uplult ulight:" + e.getmes IoException (e.getMessage ())} nyastly {try {if (inputStream! = Null) {inputStream.close ()} if (rafile! = Null) {rafile.close ()}} Catch (Exception e) {flag = false logger.info ("upload erirs:" + e.getmessage () ekexexcept (e.). }Это просто реализует функцию использования WebUploader для загрузки файлов в Spring Boot Project.
Суммировать
Выше приведено в Spring Boot, введенный вам редактором. Он использует WebUploader для загрузки файлов. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!