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 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
javascript document.referrer 用法
Apr 30 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
js获取ip和地区
Mar 10 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
Vue编程式跳转的实例代码详解
Jul 10 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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
10条PHP高级技巧[修正版]
2011/08/02 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
javascript 写类方式之十
2009/07/05 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python复制文件操作实例详解
2015/11/10 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Flask之flask-script模块使用
2018/07/26 Python
python flask搭建web应用教程
2019/11/19 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python中str内置函数用法总结
2020/12/27 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
地质灾害防治方案
2014/05/14 职场文书
兵马俑导游词
2015/02/02 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书