開発ファイルのアップロード機能は、非同期のアップロードとフラッシュアップロードのアップロードのために、さらに快適なものでした。この記事では、HTML5のFormDataを簡単に使用して、ファイルの非同期アップロードを実装し、アップロードエントリバーとファイルサイズの確認を実現できます。サーバーは、処理にSpringMVCスキームを使用します。
2 HTMLコード<form id = myform> <input type = file id = u_photo name = u_photo/> <入力タイプ=ボタンid = submit-btn値= upload/> </form>3 jQueryアップロード
$(#submit-btn).on( 'click'、function(){$ .ajax({url:/test/upload、type:post、data:new formdata($(#myform).get(0))) //非常に重要です。それはキャッシュを省略できません:false、false、contentType:false、cuscess(){alert(成功したアップロード!);});});4 jQueryファイルサイズの確認
ファイルサイズと対応する動作は、必要に応じて単独で処理する必要があります。
$( '#u_photo')。 }}});5 JQuery Progress Bar
XHRをAJAXメソッドに追加して、アップロードプログレスを制御できます。表示されたプログレスバーを単独で処理する必要があります。
xhr:function(){var myxhr = $ .ajaxsettings.xhr(); .attr({value:e.loaded、max:e.total、});}}、false);} return myxhr;}6 SpringMVCサーバー6.1 Maven依存関係
<Dependency> commons-io </groupid> <artifactid> commons-io </artifactid> <version> </version> </dependency> <groupid> commons- fileupload </groupid> <arttifactid> commons-fileupload> </artifactid> <バージョン> 1.3.2 </version> </dependency>6.2 Servlet-Context.xml
<bean id = multipartresolver class = org.springframework.web.multipart.commonsmonsmultipresolver />6.3コントローラー
例プログラムは、ファイルの検証、ストレージ、処理のための対応するコードを提供しません。
@RequestMapping(test/upload、method = requestmethod.post)@responsebublic string upload(@requestparam(u_photo)multipartfile _photo){system.out.println(u_photo =+u_photo.getsize());7互換性
IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+
8推奨読書上記の計画に満足していない場合は、次のソリューションを使用することをお勧めします。
jQueryファイルアップローダー
上記は、Xiaobianによって導入されたHTML5実装ファイルの非同期機能です。 VEVBウーリンのウェブサイトへのご支援ありがとうございます!