文件异步上传,多文件上传插件uploadify
本文中使用java作为例子
uploadify下载 http://files.cnblogs.com/chyg/uploadify.zip
jsp页面中需要引入:
<script type="text/javascript" src="jquery.uploadify.js"></script>
主要js代码:
$("#sysLogo").uploadify({
'uploader': '${ctx}/web/module/config/configupload/uploadSysLog.action',//文件上传action
// 'script': '${ctx}/web/module/config/configupload/uploadSysLog.action',
'swf' : 'uploadify.swf',
'cancelImg': 'cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue', //上传队列id
'fileObjName' : 'sysLogoFiles', //后台获取的文件名称,
'auto': true,//是否自动上传
'multi': true, //是否支持多选
'onUploadSuccess' : function(file, data, response) { //上传成功后执行
alert("sucess");
console.log(file);
console.log("data:"+data);
}
}); //注:上面只是部分参数,uploadify还有很多参数,具体请自动搜索api
jsp页面:
<div class="controls">
<input type="file" id="sysLogo" name="sysLogoFile" >
<div id="fileQueue"></div>
</div>
java代码:
public void uploadSysLog() throws IOException{
System.out.println(sysLogoFiles); //sysLogoFiles为全局变量,List<File> OutputStream fileOutputStream = null;
InputStream in = null;
File file = new File("d:/abc.jpg"); // 新建文件
try {
fileOutputStream = new FileOutputStream(file); // 创建文件流
in = new FileInputStream(sysLogoFiles.get(0));
int bytesRead = 0;
byte data[] = new byte[1024 * 1024]; // 用于存放流数据
while ((bytesRead = in.read(data)) > 0) {
fileOutputStream.write(data, 0, bytesRead); // 写入文件流
}
} catch (RuntimeException e) {
e.printStackTrace();
} finally {
if (fileOutputStream != null) {
fileOutputStream.close();
fileOutputStream = null;
}
if (in != null) {
in.close();
in = null;
}
} getResponse().getWriter().write("uploadify-cancel.png");//返回到页面的数据,此处随便返回一个图片路径
}
以上即可。
文件异步上传,多文件上传插件uploadify的更多相关文章
- 文件上传之——用SWF插件实现文件异步上传和头像截取
之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...
- [html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- ASP.NET MVC 使用Uploadify实现多文件异步无刷新上传
软件技术开发,合作请联系QQ:858-048-581 这里我通过使用uploadify组件来实现异步无刷新多文件上传功能. 1.首先下载组件包uploadify,我这里使用的版本是3.1 2.下载后解 ...
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- JQUery利用Uploadify插件实现文件异步上传(十一)
一:简介: Uploadify是JQuery的一个上传插件,实现的效果非常好,带进度显示 ,且Ajax异步,能一次性上传多个文件,功能强大,使用简单 1.支持单文件或多文件上传,可控制并发上传的文件数 ...
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
随机推荐
- Android开发之深入理解泛型extends和super的区别
摘要: 什么是泛型?什么是擦除边界?什么是上界限定或下界限定(子类型限定或超类型限定)?什么是类型安全?泛型extends关和super关键字结合通配符?使用的区别,两种泛型在实际Android开发中 ...
- PAT 1064. 朋友数(20)
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如123和51就是朋友数,因为1+2+3 = 5+1 = 6,而6就是它们的朋友证号.给定一些整数,要求 ...
- 《编程导论(Java)·1.1.2 颠倒的世界(柏拉图法则)》
假设你读<编程导论(Java)·1.1.2 颠倒的世界(柏拉图法则)>感到无趣,请尝试评价这个段子. 3. Classes Classes drive me crazy. That mig ...
- l如何把SQLServer表数据导出CSV文件,并带列名
http://jingyan.baidu.com/article/4b07be3c466b5d48b280f37f.html 微信公众号:
- python基础6 ----python函数
python函数 一.函数的参数 1.函数的参数从调用的角度来讲可以分为形式参数和实际参数,也可叫形参和实参. 形参:变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元. ...
- HDU - 5703 Desert 【找规律】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5703 题意 给出一杯容量为N的水 每次至少喝1个单位 有多少种不同的方式喝完 比如 给出3 就有4种方 ...
- 隐藏c语言烦人的{ }
.vimrc文件中添加 autocmd BufNewFile,BufRead * :syn match braces conceal "[{}]" set conceallevel ...
- HTTP请求解析--从一个请求开始
先来看看一个http请求实例 请求行: POST /chapter17/user.html HTTP/1.1 请求头: Accept: application/json, text/javascrip ...
- CSS整体布局
主要内容: 一.外边距margin与填充padding 二.浮动float与显示display 三.主布局 四.定位方式posotion 一.外边距margin与填充padding 1.margin设 ...
- (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...