首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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);
}
}

Uploadify上传文件方法

- Author -

全栈未遂工程师

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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
Vue(10) Storage(1) HashSet集合(1) persistedstate(1) vuex(1) Vue3(1) OutputStream(1) Set接口(1) InputStream(1) axios(1)
You might like
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
超级退弹代码
2008/07/07 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
JavaScript进阶（二）词法作用域与作用域链实例分析
2020/05/09 Javascript
如何运行Python程序的方法
2013/04/21 Python
python使用cookie库操保存cookie详解
2014/03/03 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python实现各进制转换的总结大全
2017/06/18 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
python装饰器练习题及答案
2019/11/01 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python可迭代对象去重实例
2020/05/15 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
C++是不是类型安全的
2014/02/18 面试题
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
思想专业自荐信范文
2013/12/25 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
勿忘国耻9.18演讲稿（经典篇）
2014/09/14 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
求职自荐信怎么写
2015/03/04 职场文书
晚会开幕词范文
2016/03/04 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
python中subplot大小的设置步骤
2021/06/28 Python