基於jQuery Ajax實現無刷新文件上傳

最近因項目需求更改,需要實現選擇文件后即時上傳至服務器,然后提交后,加載xls表格內容到jqgrid表格中,文件上傳功能實現示例:

前端jsp頁面:

<form id="uploadForm" enctype="multipart/form-data">　　<!-- 聲明文件上傳 -->
  <input id="file_upload" type="file" name="pic" onchange="fileChange('${base }')"/>　　<!-- 定義change事件,選擇文件后觸發 -->
  <input type="hidden" name="modelName" value="famoxuke" />     <!-- 項目需求字段,非必須 -->
  <br/><span style="color: red" id="fileTypeError"></span>　　　　<!-- 文件類型錯誤回顯,此處通過前后端兩次驗證文件類型 -->
</form>

js代碼:

function fileChange(base){
    $("#fileTypeError").html('');
    var fileName = $('#file_upload').val();　　　　　　　　　　　　　　　　　　//獲得文件名稱
    var fileType = fileName.substr(fileName.length-4,fileName.length);　　//截取文件類型,如(.xls)
    if(fileType=='.xls' || fileType=='.doc' || fileType=='.pdf'){　　　　　//驗證文件類型,此處驗證也可使用正則
        $.ajax({
            url: base+'/actionsupport/upload/uploadFile',　　　　　　　　　　//上傳地址
            type: 'POST',
            cache: false,　　
            data: new FormData($('#uploadForm')[0]),　　　　　　　　　　　　　//表單數據
            processData: false,
            contentType: false,
            success:function(data){
                if(data=='fileTypeError'){
                    $("#fileTypeError").html('*上傳文件類型錯誤,支持類型: .xsl .doc .pdf');　　//根據后端返回值,回顯錯誤信息
                }
                $("input[name='enclosureCode']").attr('value',data);
            }
        });
    }else{
        $("#fileTypeError").html('*上傳文件類型錯誤,支持類型: .xls .doc .pdf');
    }
}

后端action代碼:

public String uploadFile(@RequestParam("pic")CommonsMultipartFile pic,HttpServletRequest req,HttpServletResponse response,String modelName) throws IOException{

        //文件保存代碼及業務處理,后台mvc使用springMVC,此時只展示方法參數類型,飄紅標記,具體文件保存代碼簡單,不作贅述.
return xxxxx;
    }

后記:由於此功能實現input選擇后即時上傳,所以對於文件類型的限定和判斷建議前后端都要做,防止用戶錯誤提交不正確的文件,白白浪費服務器硬盤空間.