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のウェブサイトへのご支援ありがとうございます！