Web Uploaderの紹介
Webuploaderは、主にHTML5であるシンプルな最新ファイルアップロードコンポーネントであり、Baidu Webfe(FEX)チームが開発したFlashによって補足されています。最新のブラウザでは、主流のIEブラウザを放棄せずにHTML5の利点に完全なプレイを行うことができ、元のフラッシュランタイムを引き続き使用し、IE6+、iOS 6+、Android 4+と互換性があります。実行時間の2つのセット、同じコールメソッドは、ユーザーが自由に選択できます。大きなファイルフラグメンテーションの同時アップロードを使用すると、ファイルアップロードの効率が大幅に向上します。
ここでは、公式ウェブサイトの例を使用して、個人的なアバターをアップロードします。
私たちの焦点は、Spring Boot ProjectでWebuploaderを使用してファイルをアップロードする方法に焦点を当てているため、参照のみの単純な関数を直接実装できます。
公式Webサイトからダウンロードされた例を以下に示します。トリミングのある画像アップロード機能。
例を使用して、プロジェクトのアバターアップロードを改造します。
効果は次のようになります:
まず、Webuploaderサンプルコードを改造しましょう。
以下は、私のプロジェクトのコードの一部です。
(function(factory){if(!window.jquery){alert( 'jquery is require。')} jQuery(function(){factory.call(null、jquery);});})(function($){// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------エラー( 'Webuploaderは、使用しているブラウザをサポートしていません。} _.Deferred(); new _.lib.image() })image.once( 'complete'、function(){var blob、size; // mobel uc / qq browser in image-free mode // ctx.getimagedataは、大きな画像を処理するときに例外を報告します。 file.trigger(blob.size、defered.log(e); file._meta); loadfromblob(source)promise(); false、 /これが使用されるかどうか。 $ .trim($( "#base_url")。val()) + '/static/webuploader/uploader.swf'、filenumlimit:1、//画像ファイルのみが許可されています。 「JPG、JPEG、PNG」、// Webuploader Chromeの解決ファイル選択ボックスをクリックして、応答が遅くなる数秒前に遅延します: 'image/jpg、image/jpeg、image/png' //このラインの変更} // chunked:true、// shash // chunksize:10 * 1024 * 1024、// shashサイズは//スレッド数:1、// drag // drag // //}}); uploader.on( 'filequeued'、funce(_file){file = _file; uploader.makeThumb(file、function(error、src){alert( 'can can can can biew'); return;} selectcb(src);} }); ***ファイルサイズ* / uploader.on( "Error"、function(type == "q_type_denied"){" 「uploadsuccess」、file){"uploadsuckes"); file._info.width.scale._cropdata = {x:data.y1、height:data.height、scale}}; ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- img'); var btn = $( '。upload-btn'); var isbase64supported、callback; $ image.cropper({aspectratio:4/4、preview: ".img-preview"、done:function(data){// console.log(data);}});関数srcwrap(src、cb){//初めてこれを確認する必要があります。 if(typeof isbase64supported === 'undefined'){(function(){var data = new image(); var support = true; data.onloor = function(){if(this.width!= 1 || this.height!= 1){support = support = false;}} data.src = src.src.src = srcport; })(); } if(isbase64supported){cb(src); } else {//それ以外の場合は、サーバーサポートが必要です。 // base64をファイルに変換します。 // $ .ajax( ''、{// method: 'post'、// data:src、// datatype: 'json' //})。 }} 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、height:img.naturalheight}}、setCallback:function(cb){callback = cb;これを返します。 }、disable:function(){$ image.cropper( "disable");これを返します。 }、enable:function(){$ image.cropper( "enable");これを返します。 }}}}})(); // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ uploader.crop(data); uploader.upload(); }); }); // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ページのコードもいくつかあります。
コントローラーパーツのコードは次のとおりです。
@RequestMapping(value = "/sudent/sustentimgfileupload"、method = requestmethod.post)@responsebody string studentimgfileupload(@requestparam multipartfile file、httpservletrequest request){logger.info( "desudent avatar uplodaame ... logger.info( "upload file name:" + originalFileName)string realpath = request.getServletContext()。getRealPath( "/public/student/")string uploadfileName = system.currenttimemillis() + "_" + originalfileName logger.info(uapload path: " + realpath +" //マージファイルrandomAccessfile rafile = null bufferedinputStream inputstream = null try {file dirfile = new file(realpath、uploadfileName)// read-writeの方法でターゲットファイルを開くrafile = new RandomAccessfile(dirfile、 "rw")rafile.Seek bufferedinputStream(file.getInputStream())byte [] buf = new byte [1024] int length = 0 while((lengt = inputstream.read(buf))!= -1){rafile.write(buf、0、length)}} catch(Exception e){fall = fals logger.info(e. ioexception(e.getMessage())} fullly {try {if(inputstream!= null){inputstream.close()} if(rafile!= null){rafile.close()}}}} {exception e){flag = false logger.info( "up load error:" + e.getmessage()shrow excection() }これは、Spring BootプロジェクトのファイルアップロードにWebuploaderを使用する機能を単純に実装します。
要約します
上記は、編集者が紹介したスプリングブーツです。 Webuploaderを使用してファイルをアップロードします。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!