Ajax File upload
3291 ワード
ファイルアップロードの問題によく遭遇しますが、ここではajaxが提供するajaxFileUploadを使用して解決します.
HTMLページ:
JS:
*ajaxfileupload.js.をインポートする必要があります.ファイルのuploadHttpDataを変更する必要があります.変更後
なぜなら、jsonオブジェクトを使用すると、戻りデータにが自動的に追加され、解析に失敗するためです.
Java SpringMVC使用
ここではcommon-fileuploadというjarパッケージを使用する必要があります.対応するmaven構成は以下の通りです.
HTMLページ:
<form class="form-inline" action="" id="fileUpload" method="POST" enctype="multipart/form-data">
<div class="col-sm-12" align="right">
<div class="float-box">
<input id="excelFile" name="excelFile" type="file"/>
</div>
<div class="float-box">
<button type="button" class="btn btn-danger" ng- click="uploadExcel(altPart.id)">Add</button>
</div>
</div>
</form>
JS:
$.ajaxFileUpload({
url : 'altparts/uploadExcel',
secureuri : false,
fileElementId : 'excelFile',
dataType : 'json',
data : {},
success : function(data, status) {
alert('upload successfully');
$location.path('altparts/');
},
error : function(data, status, e) {
alert('upload exception');
}
});
*ajaxfileupload.js.をインポートする必要があります.ファイルのuploadHttpDataを変更する必要があります.変更後
uploadHttpData: function( r, type ) {
var data = !type;
var dataparsed = r.responseText.split("{");
dataparsed = dataparsed[1].split("}");
data = type == "xml" || "{ " + dataparsed[0] + " }";
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
return data;
},
なぜなら、jsonオブジェクトを使用すると、戻りデータにが自動的に追加され、解析に失敗するためです.
Java SpringMVC使用
@RequestMapping(value = "/uploadExcel", method = RequestMethod.POST, consumes = "multipart/form-data", produces = "application/json")
public @ResponseBody List<Part> uploadExcel(@RequestParam MultipartFile[] excelFile) {
String fileName = excelFile[0].getOriginalFilename();
if (fileName.lastIndexOf(".xls")==4) {
return analyzeXLS(excelFile[0]);
} else {
return analyzeXLSX(excelFile[0]);
}
}
ここではcommon-fileuploadというjarパッケージを使用する必要があります.対応するmaven構成は以下の通りです.
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>