首页
所有分类
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 实现的点击复制代码
Mar 24 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
Dec 01 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
双人对弈(1) 2022年7月新番(1) 后端(1) 人人对战(1) Vscode(3) 数据表(1) OVERLORD(1) 时钟(1) 算法(1) SSH(3)
You might like
php+mysql分页代码详解
2008/03/27 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP实现微信提现（企业付款到零钱）
2019/08/01 PHP
JS array 数组详解
2009/03/22 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
详细介绍Python的鸭子类型
2016/09/12 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Django框架表单操作实例分析
2019/11/04 Python
python小项目之五子棋游戏
2019/12/26 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
python把一个字符串切开的实例方法
2020/09/27 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
党员自我批评与反省材料
2014/02/10 职场文书
教师求职自荐书
2014/06/14 职场文书
销售员试用期自我评价
2014/09/15 职场文书
鸡毛信观后感
2015/06/11 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
创业计划之特色精品店
2019/08/12 职场文书
导游词之湖北武当山
2019/09/23 职场文书
AJAX学习笔记
2021/05/18 Javascript
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript