首页 > 代码库 > 基于jQuery Ajax实现无刷新文件上传

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

基于jQuery Ajax实现无刷新文件上传