Ajax File upload

3291 ワード

ファイルアップロードの問題によく遭遇しますが、ここではajaxが提供するajaxFileUploadを使用して解決します.
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>