记录-Jquery uploadify文件上传实例
原本做的是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文件上传实例的更多相关文章
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- jquery uploadify文件上传插件用法精析
jquery uploadify文件上传插件用法精析 CreationTime--2018年8月2日11点12分 Author:Marydon 一.参数说明 1.参数设置 $("#fil ...
- jQuery uploadify 文件上传
uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...
- 详解jQuery uploadify文件上传插件的使用方法
uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDem ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- Struts2+Uploadify文件上传使用详解
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例是php版本的,本文将详细介绍Uploadify在java中的使用,您也可以点击下面的链接进行演示或下 ...
- PHP中,文件上传实例
PHP中,文件上传一般是通过move_uploaded_file()来实现的. bool move_uploaded_file ( string filename, string destinati ...
- PHP学习笔记--文件目录操作(文件上传实例)
文件操作是每个语言必须有的,不仅仅局限于PHP,这里我们就仅用PHP进行讲解 php的文件高级操作和文件上传实例我放在文章的最后部分.--以后我还会给大家写一个PHP类似于网盘操作的例子 注意:阅读此 ...
- ExtJS:文件上传实例
ExtJS:文件上传实例 var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = ...
随机推荐
- Unity3d设置QualitySettings为Beautiful Xcode发布错误
014-06-25 04:49:13.658 XXXX[2004:60b] -> registered mono modules 0x1431a50-> applicationDidFin ...
- Odoo8模块中增加延时自动消失的提示
在odoo中,如果必要栏位没有值,在保存时右上角会有如下图的提示,该提示会延时并自动关闭. 有网友问如何在自己的模块中增加这样的提示,以方便用户在操作时,能提示一些必要的信息.下面例出大致的步骤以供参 ...
- Web前端开发实战1:二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
- CSAPP:异常控制流
在一般的情况下,处理器处理的指令序列是相邻的(顺序执行). 异常控制流提供了指令的跳转,它一部分是由硬件实现的,一部分是由操作系统实现的. 异常处理 在系统启动时,操作系统分配和初始化一张称为异常表的 ...
- React Native : 自定义视图
代码地址如下:http://www.demodashi.com/demo/11686.html 这次我们要做的仿 新闻头条 的首页的顶部标签列表,不要在意新闻内容. 请求数据 首先做顶部的目录视图,首 ...
- Docker 使用docker-compose部署项目
原文地址:https://github.com/eacdy/spring-cloud-book/blob/master/3%20%E4%BD%BF%E7%94%A8Docker%E6%9E%84%E5 ...
- EPH接收Event Hub Message
简介: 使用Python SDK,基于EPH方式接收Azure Event Hub中存储的message,EventProcessorHost()中使用Azure Storage存储offerset等 ...
- webpack打包vue2.0项目时必现问题(转载)
原文地址:http://www.imooc.com/article/17868 [Vue warn]: You are using the runtime-only build of Vue wher ...
- Linux操作系统桌面环境GNOME和KDE的切换
一.设置GNOME或者KDE为默认的启动桌面环境 方法1:修改/etc/sysconfig/desktop,根据需要将“DESKTOP”后面的内容改为KDE或GNOME. 方法2:在当前用户目录下建立 ...
- Mac OS X 控制键符号