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 相关文章推荐
简单的js分页脚本
May 21 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
vue+element实现表单校验功能
May 20 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
详解python分布式进程
2018/10/08 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
html5与css3小应用
2013/04/03 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
求职信写作要突出重点
2014/01/01 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
消防器材管理制度
2014/01/28 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android