首页 > 代码库 > 基于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实现无刷新文件上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。