ajaxfileupload.js实现上传文件功能


Posted in Javascript onApril 19, 2019

使用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插件,注意先后顺序:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script type= "text/javascript" src= "js/ajaxfileupload.js" ></script>

第二步、html代码

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

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

<input type ="file" id="ImportPicInput" name= "myfile" style=" display: none" /> 
<div class ="input-append"> 
<label for ="importPicName"> 上传原始图片:</label > 
<input type ="text" class="input-large" id= "importPicName" /> 
<a class ="btn btn-default" onclick= "$('#ImportPicInput').click();" > 打开</a> 
</div >

展现的页面效果:

第三步、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<String,Object> map= new HashMap<String,Object>(); 
    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,这点非常的重要。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 #Javascript
读懂CommonJS的模块加载
Apr 19 #Javascript
js module大战
Apr 19 #Javascript
如何根据业务封装自己的功能组件
Apr 19 #Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 #Javascript
vue组件之间的数据传递方法详解
Apr 19 #Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 #Javascript
You might like
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python语言生成水仙花数代码示例
2017/12/18 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
公司采购主管岗位职责
2014/06/17 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2016年会开场白台词
2015/06/01 职场文书
感动中国何玥观后感
2015/06/02 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书