Uploadify上传文件方法


Posted in Javascript onMarch 16, 2016

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

先给大家展示下效果图:

Uploadify上传文件方法

修改:

报找不到uploadify-cancel.png文件。找到uploadify.css,找到.uploadify-queue-item .cancel a {,修改文件的路径。
好多人都说,在chrome、Firefox上使用uploadify的时候获取不到session导致上传出错。需要手工将session id方法附加参数中。但是我这里并没有这么做,并且在chrome、Firefox上传没问题,不知道为什么,也许是因为我用的最新版的原因吧。

要点:

uploadify的js配置已经比较全面,在实际使用的时候可以适当的删减一些方法和属性。

一般情况下的单文件上传只考虑onSelect、onUploadError和onUploadSuccess即可。

如果是多文件上传,那么在单文件上传的基础上再加上对整个队列的监听onQueueComplete。

开始上传所有文件:$('#file_upload').uploadify('upload', '*');

取消上传:$('#file_upload').uploadify('cancel', parm);

parm为空:取消上传第一个文件。

parm为'*':取消所有的上传文件。

parm为file id:取消该file id对应的文件。

修改附加的一些变量:$('#file_upload').uploadify("settings","formData",{"name1":"中文name","parm1":"修改后的参数"});参数为json,如果该json中的某个变量已经有了,那么覆盖该属性,如果没有,那么追加该属性。
服务端设置编码为:upload.setHeaderEncoding("UTF-8");,这样解析的文件名称为正常中文。但是解析的附加变量中文乱码,这里做一次转码(总感觉转码比较low,不知道是哪里配置的不对)。new String(item.getString().getBytes("iso8859-1"),"utf-8")

服务端最后返回文件保存路径(这里可以随便定义返回内容)。

步骤:

配置uploadify

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="<%=basePath %>">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="uploadify/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify/uploadify.css" />
</head>
<script>
$(function(){
$(function() {
$(function() {
$('#file_upload').uploadify({
'uploader' : '<%=basePath%>/UploadServlet',//服务端地址
'swf' : 'uploadify/uploadify/uploadify.swf',
'buttonImage' : 'uploadify/uploadify/img/chooseFile.jpg',//重载按钮图片
'buttonClass' : 'some-class',//重载按钮样式
'height':19,//按钮宽度和高度
'width':76,
'queueID' : 'file_queue',//显示文件队列的一个div,在页面定义
'formData' : {'parm1':'参数1','year':'2016'},//附加参数,可以在upload参数中更改
'buttonText':'选择文件',//按钮显示文字,如果有图片的话,会被图片挡住
'fileSizeLimit':'1MB',//文件最大
'auto':false,//自动提交
'fileTypeExts' : '*.gif; *.jpg; *.png',//文件类型
'fileTypeDesc' : '只能上传图片',//选择文件的时候的提示信息
'multi' : true,//多选
'queueSizeLimit' : 3,//队列中文件的个数
'onSelect' : function(file) {
console.log(file);
alert("选择文件:" + file.name + "\n类型="+file.type+"\n大小="+file.size);
if(file.size>1024000){//文件太大,取消上传该文件
alert("文件大小超过限制!");
$('#file_upload').uploadify('cancel',file.id);
}
},
'onUploadSuccess' : function(file, data, response) {
alert('每个文件上传成功后触发 ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
},
'onUploadComplete' : function(file) {
alert('每个文件上传完成,无论对错都触发! ' + file.name + ' finished processing.');
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('上传出错 ' + file.name + ' could not be uploaded: ' + errorString);
},
'onQueueComplete':function(queueData){
alert("队列中的所有文件上传完成后触发。\n"+queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)
},
});
});
});
});
function upload(){
$('#file_upload').uploadify("settings","formData",{"name1":"中文name","parm1":"修改后的参数"});
$('#file_upload').uploadify('upload', '*');//上传所有文件
}
function cancel(){
$('#file_upload').uploadify('cancel', '*');//取消所有文件
}
function destroy(){
alert("取消upload上传,变成原来样式!");
$('#file_upload').uploadify('destroy');//destory
}
</script>
<body>
<div class="easyui-panel" title="说明" style="margin-bottom:15px">
</div>
<div class="easyui-panel" style="text-align:center;margin-bottom:15px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="upload()">开始上传</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">取消上传</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="destroy()">destroy</a>
<input type="file" name="file_upload" id="file_upload" />
<div id="file_queue" style="width:400px;height:10px;position:absolute;z-index:999"></div>
</div>
</body>
</html>

服务端

package com.servlet;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class UploadServlet
*/
@WebServlet(name="UploadServlet",urlPatterns="/UploadServlet")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = -6483558339095298703L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("获取session,可以根据这个session进行一些其他的判断" + request.getSession().getId());
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");
String remotePath = File.separator + "download" + File.separator + sdf.format(new Date()) + File.separator;
String savePath = remotePath;
File dfile = new File(savePath);
if (!dfile.exists()) {
dfile.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
List<FileItem> fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
System.out.println("文件=" + name + " " + size + " " + type);
if (name == null || name.trim().equals("")) {
continue;
}
// 扩展名格式:
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
// 生成文件名:
name = UUID.randomUUID().toString();
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}else if(item.isFormField()){
System.out.println("表单内容:" + item.getFieldName() + "=" + new String(item.getString().getBytes("iso8859-1"),"utf-8"));
}
}
String requestPath = remotePath + name + extName;
request.getSession().setAttribute(requestPath, requestPath);
response.getWriter().write(savePath + name + extName);
}
}
Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 #Javascript
JavaScript隐式类型转换
Mar 15 #Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 #Javascript
Angularjs整合微信UI(weui)
Mar 15 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php session安全问题分析
2011/06/24 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
城市规划毕业生求职信
2013/10/10 职场文书
优秀中专生推荐信
2013/11/17 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
员工考核评语大全
2014/04/26 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2015年司法局工作总结
2015/05/22 职场文书
导游词之太原天龙山
2020/01/02 职场文书
怎么用Python识别手势数字
2021/06/07 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers