基于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选择后即时上传,所以对于文件类型的限定和判断建议前后端都要做,防止用户错误提交不正确的文件,白白浪费服务器硬盘空间.