ajaxfileupload.js实现上传文件功能

这篇文章主要为大家详细介绍了ajaxfileupload.js实现上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以…

这篇文章主要为大家详细介绍了ajaxfileupload.js实现上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用ajaxfileupload.js实现上传文件功能

一、ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options])

options参数说明:

1、url           上传处理程序地址
2、fileElementId      文件选择框的id属性,即的id
3、secureuri        是否启用安全提交,默认为false
4、dataType        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断
5、success        服务器响应成功后的处理函数 ,参数data就是服务器返回的数据
6、error          服务器响应失败后的处理函数
7、data           自定义参数,当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意,数据格式比较严格{param:[{‘param1′:’value1′,’param2′:’value2′ },{‘param1′:’value3′,’param2′:’value4′ }]}, 其中单引号不能改为双引号
8、type           提交数据的方式,一般为post

二、使用方法

第一步、先引入jquery和ajaxFileUpload插件,注意先后顺序:

 

第二步、html代码

原始的,控件展示效果如下:

因为原始控件的样式无法改变,所以我们一般会让这个标签隐藏,然后点击别的标签来触发上传控件。

 
    
     上传原始图片:
     打开
   

展现的页面效果:

第三步、js代码

在用户选择完上传图片后,需要把图片名称显示到输入框中,还需要在js文件中加入代码:

 $(document).ready(function(e) { $('body').on('change',$('#ImportPicInput'),function(){ $( "#importPicName").val($( "#ImportPicInput").val()); }); }); 

上传文件的js代码:

 $.ajaxFileUpload({ type: "POST", url: "/toolkit/importPicFile.do", data:{picParams:text},//要传到后台的参数,没有可以不写 secureuri : false,//是否启用安全提交,默认为false fileElementId:'ImportPicInput',//文件选择框的id属性 dataType: 'json',//服务器返回的格式 async : false, success: function(data){ if(data.result=='success'){ //coding }else{ //coding } }, error: function (data, status, e){ /coding } }); 

第四步、java代码

 @RequestMapping(value="/importPicFile.do" ,produces="text/html;charset=utf-8" ) public @ResponseBody String importPicFile1(@RequestParam("picParams") String picParams, @RequestParam MultipartFile myfile,HttpServletRequest request){ Map
   
     map= new HashMap
    
     (); if(myfile.isEmpty()){ map.put( "result", "error"); map.put( "msg", "上传文件不能为空" ); } else{ String originalFilename=myfile.getOriginalFilename(); String fileBaseName=FilenameUtils.getBaseName(originalFilename); String floderName=fileBaseName+"_" +DateUtil.getNowTimeData(); try{ String genePicPath=request.getSession().getServletContext().getRealPath("/upload/" +floderName); //把上传的图片放到服务器的文件夹下 FileUtils. copyInputStreamToFile(myfile.getInputStream(), new File(genePicPath,originalFilename)); //coding map.put( "result", "success"); } catch (Exception e) { map.put( "result", "error"); map.put( "msg",e.getMessage()); } } String result=String. valueOf(JSONObject.fromObject (map)); return result; } 
    
   

三、注意点

(1)上文html中控件的css样式,都是用的bootstrap框架里的基本样式,也可以不用使用bootstrap框架,仅做参考。
(2)之前用的live方法,前台js报错说找不到这个方法,后来查了资料才发现,1.9以上的jquery版本已经废弃live这个方法了

 $(document).ready(function(e) { $('#ImportPicInput ').live( 'change', function(){ }) }); 

(3)文件选择框必须要有name,即,且java代码中的变量要跟name的值保持一致,即@RequestParam MultipartFile myfile,这点非常的重要。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.cfluntan.cn。

以上就是ajaxfileupload.js实现上传文件功能的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部