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的闭包
Dec 31 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
JS 自执行函数原理及用法
Aug 05 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 UTF8编码内的繁简转换类
2009/07/20 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python中argparse模块用法实例详解
2015/06/03 Python
Python+django实现文件下载
2016/01/17 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
初一科学教学反思
2014/01/27 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
2015元旦标语横幅
2014/12/09 职场文书
出生证明格式
2015/06/15 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
对讲机的最大通讯距离是多少
2022/02/18 无线电
MySQL 语句执行顺序举例解析
2022/06/05 MySQL