
Stream 上传插件
Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合!
Stream 简介
Stream 是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他)的上传工作,当然在Html5标准下,还支持文件的断点续传功能,有效解决大文件的Web上传问题!
主要特征
1. 源码完全开放,目前有Java、PHP、Perl三种后台语言实现
2. 支持HTML5、Flash两种方式(跨域)上传
3. 多文件一起上传
4. HTML5支持断点续传,拖拽等新特性
5. 兼容性好IE7+, FF3.6+, Chrome*,Safari4+,遨游等主流浏览器
6. 进度条、速度、剩余时间等附属信息
7. `选择文件的按钮`可以自定义
8. 简单的参数配置实现 灵活多变的功能
9. 支持文件夹上传(Chrome21+, Opera15+)
10. 支持自定义UI(V1.4+)
指定跨域上传就可以了
jquery.uploadify批量上传控件[html]
<link href="styles/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="styles/uploadify.swf"></script>
<script type="text/javascript" src="javascripts/jquery.uploadify.min.js"></script>
<link href="styles/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="styles/uploadify.swf"></script>
<script type="text/javascript" src="javascripts/jquery.uploadify.min.js"></script> 还有jquery.js,你懂得!
这里注意哦,css文件会引用到这个图片哦,所以请你指定这个图片的位置哦,不然就没有显示这个叉叉哦,这个叉叉是删除按钮的哦,没有就是空白哦!
[javascript]
<script>
function snedUpLoad(){
var pid = $("#entityId").val() //这个是我自己获取的自定义参数
var entityName = $("#entityName").val() //同上
$("#uploadify").uploadify({ //初始化uploadify uploadify是input的id
//'debug' : false, //dubug模式 ,默认是false
'auto':false, //自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999, //超时时间
'formData':{'pid':pid,'entityName':entityName },//我的参数列表
//'fileObjName':'uploadify', //服务器的属性名字
'uploader':'你的后台url地址jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf", //flash文件,官方的文件,引用上就是了
//'uploader': '/Home/Upload', //文件保存路径 用处不大
'buttonText': '文件上传', //按钮
//'height':'32', //浏览按钮的高度
//'width':'100', //浏览按钮的宽度
'fileTypeDesc':'支持的格式:', //在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg*.jpge*.gif*.png', //允许上传的文件后缀
'fileSizeLimit':'3MB', //上传文件的大小限制
'queueSizeLimit' : 25, //上传数量
'onSelectError':function(file, errorCode, errorMsg){ //返回一个错误,选择文件的时候触发
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!")
break
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!")
break
case -120:
alert("文件 ["+file.name+"] 大小异常!")
break
case -130:
alert("文件 ["+file.name+"] 类型不正确!")
break
}
},
'onFallback':function(){ //检测FLASH失败调用
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。")
},
'onUploadSuccess':function(file, data, response){ //上传到服务器,服务器返回相应信息到data里
if(data){
var dataObj=eval("("+data+")")//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
})
}
</script>
<script>
function snedUpLoad(){
var pid = $("#entityId").val() //这个是我自己获取的自定义参数
var entityName = $("#entityName").val() //同上
$("#uploadify").uploadify({ //初始化uploadify uploadify是input的id
//'debug' : false, //dubug模式 ,默认是false
'auto':false, //自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999, //超时时间
'formData':{'pid':pid,'entityName':entityName },//我的参数列表
//'fileObjName':'uploadify', //服务器的属性名字
'uploader':'你的后台url地址jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf", //flash文件,官方的文件,引用上就是了
//'uploader': '/Home/Upload', //文件保存路径 用处不大
'buttonText': '文件上传', //按钮
//'height':'32', //浏览按钮的高度
//'width':'100', //浏览按钮的宽度
'fileTypeDesc':'支持的格式:', //在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg*.jpge*.gif*.png', //允许上传的文件后缀
'fileSizeLimit':'3MB', //上传文件的大小限制
'queueSizeLimit' : 25, //上传数量
'onSelectError':function(file, errorCode, errorMsg){ //返回一个错误,选择文件的时候触发
switch(errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!")
break
case -110:
alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!")
break
case -120:
alert("文件 ["+file.name+"] 大小异常!")
break
case -130:
alert("文件 ["+file.name+"] 类型不正确!")
break
}
},
'onFallback':function(){ //检测FLASH失败调用
alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。")
},
'onUploadSuccess':function(file, data, response){ //上传到服务器,服务器返回相应信息到data里
if(data){
var dataObj=eval("("+data+")")//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
})
}
</script>
[javascript]
$(function(){
snedUpLoad() //jquery容器加载完运行我们的函数
})
$(function(){
snedUpLoad() //jquery容器加载完运行我们的函数
})
[html]
<input type="file" name="uploadify" id="uploadify" /> //申明控件的容器
<input type="file" name="uploadify" id="uploadify" /> //申明控件的容器
前台页面代码基本就这样了,很好明白,至于后台逻辑和普通上传处理一致的,这里就不列出来的,最后上一张图给大家鉴赏一下
(tip:其实他的批量上传并不是一次全部提交处理的,他是一个一个依次提交,相当是一个for循环,所以后台处理的同时只是一个文件上传,即排序的处理上传文件,就和单个文件上传的代码一样,如果你早有后台的单文件上传代码就不用改,直接调用就行了,可以共用)
前台部分代码:<form name="buildform" id="buildform" action=" " enctype="multipart/form-data" method="post">
<table>
<tr>
<td colspan="" class="label">文件上传:</td>
<td class="label" align="left">
<div id="d">
<input type="file" name="fileurl" value="" />
</div>
</td>
</tr>
</table>
后台部分代码java:
// 创建一个文件上传的工厂实例
DiskFileItemFactory factory = new DiskFileItemFactory()
// 设置文件缓存地址和缓存大小
factory.setRepository(new File(request.getRealPath("/")))
factory.setSizeThreshold(1024 * 1024 * 20)
// 用上工厂实例创建一个上传文件对象
ServletFileUpload upload = new ServletFileUpload(factory)
upload.setHeaderEncoding("gbk")
String name = ""
String code = ""
String sredate = ""
String ssetdate = ""
String setworker = ""
String reworker = ""
String memo = ""
String contents = ""
Long redptid = null
Long setdptid = null
String fileurl = ""
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd")
Date setdate = null
Date revisedate = null
// 处理页面传过来的表单项
int k = 0
List items = null
try {
items = upload.parseRequest(request)
} catch (FileUploadException e) {
e.printStackTrace()
}
// 遍历所有的表单项
for (int i = 0i <items.size()i++) {
FileItem item = (FileItem) items.get(i)
// 如果这个表单是普通表单域
if (item.isFormField()) {
// 取得表单名
String formname = item.getFieldName()
if(formname.equals("name")){
name = item.getString("gbk")
}else
if(formname.equals("code")){
code = item.getString("gbk")
}else
if(formname.equals("revisedate")){
sredate = item.getString("gbk")
if(!sredate.equals("")){
revisedate = sdf.parse(sredate)
}
}else
if(formname.equals("setdate")){
ssetdate = item.getString("gbk")
if(!ssetdate.equals(""))
setdate = sdf.parse(ssetdate)
}else
if(formname.equals("redptid")){
String s_redptid = item.getString("gbk")
if(!s_redptid.equals("x"))
redptid = Long.parseLong(s_redptid)
}else
if(formname.equals("setdptid")){
String s_setdptid = item.getString("gbk")
if(!s_setdptid.equals("x"))
setdptid = Long.parseLong(s_setdptid)
}else
if(formname.equals("setworker")){
setworker = item.getString("gbk")
}
/*// 取得表单的value值
String formvalue = item.getString("gbk")*/
}
// 如果是文件域
else {
k++
// 取得文件域的表单域名
String fieldName = item.getFieldName()
// 取得文件名
String fileName = item.getName()
// 取得文件类型
String contentType = item.getContentType()
// 对于上传文件的存放地址来建立一个输出流
FileOutputStream fos = new FileOutputStream(request
.getRealPath("/")+"uploadimg/" + imgName)
// 判断上传文件是否在缓存中
if (item.isInMemory()) {
// 得到上传文件输入流
InputStream is = item.getInputStream()
byte[] buffer = new byte[1024]
int len
// 将上传文件写入服务器文件中
while ((len = is.read(buffer)) >0) {
fos.write(buffer, 0, len)
}
is.close()
fos.close()
}
}
}
}
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)