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 相关文章推荐
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
通过隐藏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
isset和empty的区别
2007/01/15 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP中的session安全吗?
2016/01/22 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript运算符小结
2015/06/03 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python 美化输出信息的实例
2018/10/15 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
服装采购员岗位职责
2014/03/15 职场文书
影子教师研修方案
2014/06/14 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
商业门面租房协议书
2014/11/25 职场文书
车间质检员岗位职责
2015/04/08 职场文书
高中运动会广播稿
2015/08/19 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技