189 8069 5689
queueID是页面上容器的id，这个是前端参数，是用来指定进度条出现的位置，比如有个容器
创新互联建站主营天元网站建设的网络公司,主营网站建设方案,成都app软件开发,天元h5微信小程序开发搭建,天元网站营销推广欢迎天元等地区企业咨询
div
id="tt"/div
uploadify指定queueID:"tt",那么文件上传时进度条会出现在这个容器内。
设置自动上传
auto:
false
添加按钮input
type="button"
value="上传"
class="btn
btn-primary
btn-small"
onclick="javascript:$('#uploadify').uploadifyUpload()"
/
$('#uploadify')是上传控件的id
不知道这是不是你想要的
1、下载最新的zip压缩包
2、从其中提取文件。
下载插件安装包后，可以看到官方给出的例子。里面文件夹的几个主要文件：jquery.uploadify.js(完成上传功能的脚本文件，在调用页面引
用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件，flash控件)、upload.php(服务器端处
理文件，官方仅提供了php版的)。
下面我使用的是在MyEclipse部署的java版。注意：需要加入三个commons.jar包：io、logging、fileupload。
3、导入default.css,uploadify.css，jQuery脚本，swfobject脚本和Uploadify插件。并且添加调用插件使用$，在您的网页的head部分ready事件：
%@ page language="java" contentType="text/html; charset=utf-8"%
%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
base href="%=basePath%"
titleUpload/title
!--装载文件--
link href="css/default.css" rel="stylesheet" type="text/css" /
link href="css/uploadify.css" rel="stylesheet" type="text/css" /
script type="text/javascript" src="scripts/jquery-1.3.2.min.js"/script
script type="text/javascript" src="scripts/swfobject.js"/script
script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js"/script
!--ready事件--
script type="text/javascript"
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'uploadify.swf',
'script' : 'servlet/Upload',//后台处理的请求
'cancelImg' : 'images/cancel.png',
'folder' : 'uploads',//您想将文件保存到的路径
'queueID' : 'fileQueue',//与下面的id对应
'queueSizeLimit' :1,
'fileDesc' : 'rar文件或zip文件’,
'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
'auto' : false,
'multi' : true,
'simUploadLimit' : 2,
'buttonText' : 'BROWSE'
});
});
/script /head
body
div id="fileQueue"/div
input type="file" name="uploadify" id="uploadify" /
p
a href="javascript:jQuery('#uploadify').uploadifyUpload()"开始上传/anbsp;
a href="javascript:jQuery('#uploadify').uploadifyClearQueue()"取消所有上传/a
/p
/body
/html
4、后台处理的upload.java
package com.xzit.upload;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
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;
@SuppressWarnings("serial")
public class Upload extends HttpServlet {
@SuppressWarnings("unchecked")
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String savePath = this.getServletConfig().getServletContext()
.getRealPath("");
savePath = savePath + "/uploads/";
File f1 = new File(savePath);
System.out.println(savePath);
if (!f1.exists()) {
f1.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
IteratorFileItem 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(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();
}
}
}
response.getWriter().print(name + extName);
}
}
5、配置处理的servlet
Web.xml文件
?xml version="1.0" encoding="UTF-8"?
web-app version="2.4"
xmlns=""
xmlns:xsi=""
xsi:schemaLocation="
"
servlet
servlet-nameupload/servlet-name
servlet-classcom.xzit.upload.Upload/servlet-class
/servlet
servlet-mapping
servlet-nameupload/servlet-name
url-pattern/servlet/Upload/url-pattern
/servlet-mapping
welcome-file-list
welcome-fileindex.jsp/welcome-file
/welcome-file-list
/web-app
6.完成。
1、uploadify
它是针对jQuery的免费文件上传插件，可以轻松将单个或多个文件上传到网站上，可控制并发上传的文件数，通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。
2、FancyUpload
它是一个由CSS和XHTML编写样式的Ajax文件上传工具，安装简便，服务器独立，由MooTools模块驱动，可以在任何现代浏览器上使用。
3、Aurigma Upload Suite(Image Uploader)
这是一个不限大小，不限格式的文件/图片批量上传工具，是收费控件。它支持云端存储和客户端文件处理，支持断点续传，稳定可靠。从8.0.8开始，Image Uploader将名称改为"Aurigma Upload Suite"。