原本做的是from表单的文件上传,后来因需要用ajax异步,so接触到了Jquery uploadify上传

贴上代码,以供参考

需要引入的js文件

    <link href="../res/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="../res/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>

下面是HTML代码

 <input type="file" id="file" name="file"  /> 

下面是Jquery代码

下面蓝色部分没用

$("#file").uploadify({
height: 14,
swf: '/res/uploadify/uploadify.swf',
uploader: '../member/getAllByExcel',
width: 100,
fileTypeExts: '*.xls',
errorMsg: "不支持文件格式",
buttonText:"Excel上传",
multi :false,
onUploadSuccess: function (file,data ,state) {
var jsonData =$.parseJSON(data.replace(/\\/g,"\\\\"));
if(data.msg){
alert(unescape(data.msg));
return;
}
$.appendMainPic(jsonData.images[0].url,jsonData.images[0].id);
var orgValue = $("#Card_Pic_mainPic").val()+"";
orgValue+=","+jsonData.images[0].id;
$("#Card_Pic_mainPic").val(orgValue);
},
onQueueComplete :function(a,b,c){}
});

下面是后台代码

@RequestMapping(value="getAllByExcel" ,method = RequestMethod.POST)
public Object getAllByExcel(HttpServletRequest request,HttpServletResponse response, ModelMap model){
Map<String, Object> resMap=new HashMap<String, Object>();
MultipartHttpServletRequest mulltipartRequest=(MultipartHttpServletRequest)request; Map<String, MultipartFile> fileMap = mulltipartRequest.getFileMap();
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
MultipartFile files = entity.getValue();
//MultipartFile mf = entity.getValue();
String path=request.getSession().getServletContext().getRealPath("/WEB-INF/res/upload");
String fileName=files.getOriginalFilename(); try { InputStream inputStream=files.getInputStream(); byte[] b = new byte[1048576];
int length = inputStream.read(b);
path += "\\" + fileName;
// 文件流写到服务器端
FileOutputStream outputStream = new FileOutputStream(path);
outputStream.write(b, 0, length);
inputStream.close();
outputStream.close(); } catch (Exception e) {
e.printStackTrace();
}
} //MultipartFile files=mulltipartRequest.getFile(null);
//得到上传服务器路径
resMap.put("msg", "录入成功");
return resMap;
}

记录-Jquery uploadify文件上传实例的更多相关文章

  1. jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  2. jquery uploadify文件上传插件用法精析

      jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...

  3. jQuery uploadify 文件上传

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...

  4. 详解jQuery uploadify文件上传插件的使用方法

    uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDem ...

  5. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  6. Struts2+Uploadify文件上传使用详解

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例是php版本的,本文将详细介绍Uploadify在java中的使用,您也可以点击下面的链接进行演示或下 ...

  7. PHP中,文件上传实例

    PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destinati ...

  8. PHP学习笔记--文件目录操作(文件上传实例)

    文件操作是每个语言必须有的,不仅仅局限于PHP,这里我们就仅用PHP进行讲解 php的文件高级操作和文件上传实例我放在文章的最后部分.--以后我还会给大家写一个PHP类似于网盘操作的例子 注意:阅读此 ...

  9. ExtJS:文件上传实例

    ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...

随机推荐

  1. npm install --no-bin-links中的参数“no-bin-links”表示什么意思

    npm install --no-bin-links中的参数"no-bin-links"表示什么意思

  2. Srping AOP xml方式

      使用aop需要: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="ht ...

  3. nginx只允许域名访问,禁止ip访问

    背景:为什么要禁止ip访问页面呢?这样做是为了避免其他人把未备案的域名解析到自己的服务器IP,而导致服务器被断网,我们可以通过禁止使用ip访问的方法,防止此类事情的发生. 解决方法:这里介绍修改配置文 ...

  4. 用jQuery和PHP来实现转盘抽奖程序

    准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...

  5. 檢查php文件中是否含有bom的php文件

    原文链接: http://www.cnblogs.com/Athrun/archive/2010/05/27/1745464.html 另一篇文章:<关于bom.php>,http://h ...

  6. Android Camera 使用小结。两种方法:一是调用系统camera app,二是自己写camera程序。

    源文链接:http://www.cnblogs.com/franksunny/archive/2011/11/17/2252926.html Android Camera 使用小结 Android手机 ...

  7. 查看、修改linux系统的最大链接数限制、文件描述符限制、端口范围限制、虚拟内存等

    一.修改最大连接数 1.查看当前文件描述符的限制数目的命令: ulimit -n 2.修改文件描述符的限制数目 2.1 临时改变当前会话: ulimit -n 65536 2.2 永久变更需要下面两个 ...

  8. ssl中间证书

    中间证书,其实也叫中间CA(中间证书颁发机构,Intermediate certificate authority, Intermedia CA),对应的是根证书颁发机构(Root certifica ...

  9. angular4 开发记录

    1,传值问题 page setValue:  [routerLink]="['/product-details', product.id]"> ts     seValue: ...

  10. Event 带参

    var handler={ message:"Event handled.", handlerFun:function(){ alert(this.message) } }; // ...