jquery+swfupload打造文件批量上传

最新推荐文章于 2024-09-21 11:29:05 发布
最新推荐文章于 2024-09-21 11:29:05 发布
阅读量102 收藏
点赞数
文章标签： xhtml javascript 后端 ViewUI
原文链接：https://my.oschina.net/muzilei/blog/59683
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

swfupload组件功能强悍，比较灵活，界面可以自己设计，这里我用jquery把swfupload的设置和事件简单的封装了下，可以直接使用在项目中，只需将后端程序修改替换成合适的语言，我这个是asp版的。

不多说了，直接上代码：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asp+jquery+swfupload批量上传组件</title>
<style type="text/css">
<!--
body, td, th {
	font-size: 12px;
	color: #333;
}
* {
	margin:0;
	padding:0;
}
.upLoadBox {
	position:absolute;
	width:460px;
	height:300px;
	left:50%;
	margin-left:-230px;
	top:50%;
	margin-top:-150px;
	border:1px solid #000;
	background-color:#FFF;
	z-index:9999;
}
.upLoadTitle {
	height:28px;
	line-height:28px;
	background-color:#333;
	color:#FFF;
	cursor:move
}
.upLoadTitle span {
	float:left;
	margin-left:10px;
}
#upLoadForm {
	padding:10px;
	border-bottom:1px solid #D5D5D5;
}
#upLoadForm span {
	float:right;
	color:#666
}
.colseUplaodBox {
	color:#FFF;
	float:right;
	margin-right:10px;
	text-decoration:none
}
.innerBox {
	width:460px;
	height:226px;
	overflow:auto
}
#wrapBox {
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	bottom:auto;
	background-color:#000;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	z-index:9998;
}
/* 上面的是除了IE6的主流浏览器通用的方法 */
*html #wrapBox {/*ie6 hack*/
	position:absolute;
	bottom:auto;
 top:expression(eval(document.documentElement.scrollTop));
	zoom:-1;
}
/* 修正IE6振动bug */
* html, * html body {
	background-image:url(about:blank);
	background-attachment:fixed;
	height:100%;
}
.fileList {
	width:96%;
	margin:5px auto;
	list-style:none;
	margin:0 auto;
	padding:0;
}
.fileList li {
	border-bottom:1px dashed #E3E3E3;
	padding:5px 0;
}
.fileList li p {
	width:100%;
	clear:both;
	overflow:hidden;
	zoom:-1;
	margin:5px auto;
}
.fileList li span {
	display:inline-block;
	float: left;
}
.fileList li s {
	text-decoration:none;
	color:#F00;
	margin:0 3px;
}
.progress {
	width:350px;
	border:1px solid #D5D5D5;
	height:12px;
	margin-right:10px;
}
.fileList li .delFile {
	color:#C00;
	margin-left:10px;
}
.fileList li .progress s {
	display:inline-block;
	background-color:#9C0;
	width:0%;
	height:12px;
	margin:0;
}
.welcome {
	height:50px;
	line-height:50px;
	text-align:center;
}
-->
</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../swfupload/swfupload.js"></script>
<script type="text/javascript" src="../js/drag.js"></script>
<script type="text/javascript">

 var upLoadBox = {
	swfu: null,
	init: function(options) {
		var self = this;
		var defaults = {
			flash_url: "../swfupload/swfupload.swf",
			flash9_url: "../swfupload/swfupload_fp9.swf",
			upload_url: "upload.asp",                               //asp上传程序
			post_params: {
				"PHPSESSID": ""
			},
			file_size_limit: 0,
			file_types: "*.*",
			file_types_description: "All Files",
			file_upload_limit: 100,
			file_queue_limit: 0,
			debug: false,

			// Button settings
			button_image_url: "../swfupload/XPButtonNoText_61x22.png",
			button_width: "61",
			button_height: "22",
			button_placeholder_id: "spanButtonPlaceHolder",
			button_text: '浏览',
			button_text_left_padding: 15,
			button_text_top_padding: 0,

			// The event handler functions are defined
			swfupload_preload_handler: self.preLoad,
			swfupload_load_failed_handler: self.loadFailed,
			file_queued_handler: self.fileQueued,
			file_queue_error_handler: self.fileQueueError,
			file_dialog_complete_handler: self.fileDialogComplete,
			upload_start_handler: self.uploadStart,
			upload_progress_handler: self.uploadProgress,
			upload_error_handler: self.uploadError,
			upload_success_handler: self.uploadSuccess,
			upload_complete_handler: self.uploadComplete
			//queue_complete_handler : queueComplete	// Queue plugin event
		}

		var opts = $.extend({}, defaults, options);

		var fileSizeLimit = !opts.file_size_limit ? "单文件大小无限制" : "单文件大小不超过" + opts.file_size_limit + "M";

		var boxHtml = "<div id='wrapBox'></div>";
		boxHtml += "<div class='upLoadBox'>";
		boxHtml += "<div class='upLoadTitle'><span>上传文件</span> <a href='#' class='colseUplaodBox'>[关闭]</a></div>";
		boxHtml += "<form id='upLoadForm' action='index.asp' method='post' enctype='multipart/form-data'>";
		boxHtml += "<span id='spanButtonPlaceHolder'></span> <span>(" + fileSizeLimit + ")</span>";
		boxHtml += "</form>";
		boxHtml += "<div class='innerBox'>";
		boxHtml += "<p class='welcome'>欢迎使用批量上传组件</p>";
		boxHtml += "</div>";
		boxHtml += "</div>";

		$("body").append($(boxHtml));

		var upLoadBox = $("div.upLoadBox"),
			colseUplaodBox = upLoadBox.find("a.colseUplaodBox");

		//拖曳窗口
		upLoadBox.drag({
			handler: $('.upLoadTitle'),
			opacity: 0.8
		});

		//关闭窗口
		colseUplaodBox.click(function(event) {
			event.preventDefault();
			self.colseUploadBox();
		});

		//初始化swfupland组件
		self.swfu = new SWFUpload(options);
	},
	//关闭窗口
	colseUploadBox: function() {
		var upLoadBox = $("div.upLoadBox"),
			colseUplaodBox = upLoadBox.find("a.colseUplaodBox"),
			wrapBox = $("#wrapBox");
		upLoadBox.empty().remove();
		wrapBox.remove();
	},
	preLoad: function() {
		if (!this.support.loading) {
			alert("需要安装9.028以上的flashPlayer");
			return false;
		}
	},
	loadFailed: function() {
		function loadFailed() {
			alert("加载失败");
		}
	},
	fileQueued: function(file) {
		try {
			var innerBox = $("div.innerBox"),
				welcome = $("p.welcome");
			var fileList = "<ul class='fileList'>";
			fileList += "<li id='" + file.id + "'>";
			fileList += "<p class='fileName'>" + file.name + "</p>";
			fileList += "<p><span class='progress'><s></s></span><span class='jdNum'>0%</span> <a href='#' class='delFile'>删除</a></p>";
			fileList += "<p class='info'>等待上传...</p>";
			fileList += "</li>";
			fileList += "</ul>";

			welcome.remove();
			innerBox.append($(fileList));

			$("a.delFile").click(function(event) {
				event.preventDefault();
				var p = $(this).parent().parent(),
					fid = p.attr("id");

				upLoadBox.swfu.cancelUpload(fid, false);
				p.remove();
			});

		} catch (ex) {
			this.debug(ex);
		}
	},
	fileQueueError: function(file, errorCode, message) {
		var welcome = $("p.welcome");
		try {
			if (errorCode === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
				alert("你一次上传的文件超过设置");
				return;
			}

			switch (errorCode) {
			case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
				welcome.text("错误提示：文件太大，文件名： " + file.name + ", 文件大小： " + file.size + ", Message: " + message);
				this.debug("错误提示：文件太大，文件名： " + file.name + ", 文件大小： " + file.size + ", Message: " + message);
				break;
			case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
				welcome.text("错误提示：零字节文件，文件名：" + file.name + ", 文件大小： " + file.size + ", Message: " + message);
				this.debug("错误提示：零字节文件，文件名：" + file.name + ", 文件大小： " + file.size + ", Message: " + message);
				break;
			case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
				welcome.text("错误提示：无效的文件类型，文件名：" + file.name + ", 文件大小：" + file.size + ", Message: " + message);
				this.debug("错误提示：无效的文件类型，文件名：" + file.name + ", 文件大小：" + file.size + ", Message: " + message);
				break;
			default:
				if (file !== null) {
					welcome.text("未处理的错误");
				}
				this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);
				break;
			}
		} catch (ex) {
			this.debug(ex);
		}
	},
	fileDialogComplete: function(numFilesSelected, numFilesQueued) {
		try {
			this.startUpload();
		} catch (ex) {
			this.debug(ex);
		}
	},
	uploadStart: function(file) {
		try {
			var stats = $("#" + file.id).find("p.info");
			stats.html("已上传<s class='yscSize'>0</s>Kb");
		} catch (ex) {}
		return true;
	},
	uploadProgress: function(file, bytesLoaded, bytesTotal) {
		try {
			var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
			var fileList = $("#" + file.id),
				progress = fileList.find(".progress"),
				jdNum = fileList.find(".jdNum"),
				yscSize = fileList.find("s.yscSize");

			progress.find("s").css("width", percent + "%");
			jdNum.html(percent + "%");
			yscSize.text(bytesLoaded);

		} catch (ex) {
			this.debug(ex);
		}
	},
	uploadSuccess: function(file, serverData) {
		try {
			var stats = $("#" + file.id).find("p.info");
			stats.html("<s>上传成功</s>");

		} catch (ex) {
			this.debug(ex);
		}
	},
	uploadError: function(file, errorCode, message) {
		try {
			var stats = $("#" + file.id).find("p.info");

			switch (errorCode) {
			case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
				stats.text("上传错误: " + message);
				this.debug("错误提示：http错误，文件名：" + file.name + ", 信息： " + message);
				break;
			case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
				stats.text("上传失败");
				this.debug("错误提示：上传失败，文件名称: " + file.name + ", 文件大小：" + file.size + ", 信息：" + message);
				break;
			case SWFUpload.UPLOAD_ERROR.IO_ERROR:
				stats.text("服务器错误");
				this.debug("错误提示：服务器错误, 文件名称: " + file.name + ", 信息： " + message);
				break;
			case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
				progress.setStatus("安全性错误");
				this.debug("错误提示： 安全性错误, 文件名称: " + file.name + ", 信息： " + message);
				break;
			case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
				progress.setStatus("上传超过限制。");
				this.debug("错误提示：上传超过限制,文件名称:  " + file.name + ", 文件大小： " + file.size + ", 信息：" + message);
				break;
			case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
				progress.setStatus("验证失败。上传跳过。");
				this.debug("错误提示： 验证失败，上传跳过。文件名称: " + file.name + ", 文件大小： " + file.size + ", 信息：" + message);
				break;
			case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
				break;
			case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
				stats.text("停止");
				break;
			default:
				stats.text("未知错误: " + errorCode);
				this.debug("错误提示： " + errorCode + ", 文件名称: " + file.name + ", 文件大小：" + file.size + ", 信息： " + message);
				break;
			}
		} catch (ex) {
			this.debug(ex);
		}
	},
	uploadComplete: function(file) {
		console.log(this);
		var self = this;
		if (file.filestatus != -5) {
			$.ajax({
				type: "POST",
				url: "uploadAjax.asp",
				data: file,
				success: function(ret) {
					if (ret != "" && self.getStats().files_queued !== 0) {
						self.startUpload();
					}
				}
			});

		} else {
			self.startUpload();
		}
	}
};

 window.onload = function() {
	       //swfupload 设置
			var settings = {
				flash_url : "../swfupload/swfupload.swf",
				flash9_url : "../swfupload/swfupload_fp9.swf",
				upload_url: "upload.asp",
				post_params: {"PHPSESSID" : "<%randomize:response.write replace(replace(replace(replace(now&rnd(),"-",""),":","")," ",""),".","")%>"},
				file_size_limit :0,
				file_types : "*.*",
				file_types_description : "All Files",
				file_upload_limit : 100,
				file_queue_limit : 0,
				debug:false,

				// Button settings
				button_image_url: "../swfupload/XPButtonNoText_61x22.png",
				button_width: "61",
				button_height: "22",
				button_placeholder_id: "spanButtonPlaceHolder",
				button_text: '浏览',
				button_text_left_padding: 15,
				button_text_top_padding: 0,

				// The event handler functions are defined in handlers.js
				swfupload_preload_handler : upLoadBox.preLoad,
				swfupload_load_failed_handler : upLoadBox.loadFailed,
				file_queued_handler : upLoadBox.fileQueued,
				file_queue_error_handler : upLoadBox.fileQueueError,
				file_dialog_complete_handler : upLoadBox.fileDialogComplete,
				upload_start_handler : upLoadBox.uploadStart,
				upload_progress_handler : upLoadBox.uploadProgress,
				upload_error_handler : upLoadBox.uploadError,
				upload_success_handler : upLoadBox.uploadSuccess,
				upload_complete_handler : upLoadBox.uploadComplete
				//queue_complete_handler : queueComplete	// Queue plugin event
			};

 	     $("#button").click(function(){
						           upLoadBox.init(settings);
											   });

  	     };

</script>
</head>
<body>
<label>
  <input type="button" name="button" id="button" value="上传文件" />
</label>
</body>
</html>

原文地址：http://www.muzilei.com/archives/342

转载于:https://my.oschina.net/muzilei/blog/59683

weixin_34104341
关注
jquery swfupload图片上传插件制作图片批量上传和单...
11-17
jquery swfupload图片上传插件制作图片批量上传和单...
jquery+swfupload+servlet 多文件上传
yangdonghhm的专栏
11-28 128
swfupload对做过上传文件的朋友来说，应该都了解一点，现在像126、qq邮箱等都是采用swfupload，带进度条，多文件同时上传。。。。。。优点太多了。前一段时间也做了一个月的jquery，做的就是上传，今天花了2个多小时整理了一下，做了个demo，下面把代码贴出来。打包文件就提供下载了 ，有需要的可以留下邮箱。先上个效果吧：前台页面 文件夹： 大家可能也注意到了 名字都改了，这是自己设定...
使用jQuery+SWFUpload+Commons-FileUpload实现带进度条的上传
hf312350968的专栏
07-27 127
  注:摘自http://theoffspring.iteye.com/blog/1480092,这里只是做个备份,供自己学习使用!   这两天在找一个可以实现上传时显示进度的ajax库，看了很多10 best ajax uploader之类的文章，发现里面很多链接都点不进去，或者网站文档和demo做得很烂，我这人选开源软件用，一定会看他的文档做得怎么样，做得不全就懒得研究了，swfuplo...
自制jquery+SWFUpload+COS上传组件
wdlls的专栏
05-26 1128
1、文档编写目的：        此文档目的是介绍jquery+swfUpload编写的jquery上传插件vinSwfUpload的简单使用！  一直没时间或者说没心情解决ie6兼容问题，前几天有位Iteye的朋友说解决了，我下载他解决后的代码，对比后，发现问题所在。 一
关于上传文件的插件【jquery.upload.js/SWFUpload等】
weixin_42385438的博客
11-22 787
记录一下几个比较常用的上传插件： 1.jquery.upload.js 1.SWFUpload 3.uploadify 4.ajaxupload.js 以下简单介绍一下前两种 1.jquery.upload.js简介及应用： jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动...
extjs4.0+swfupload实现多文件批量上传
weixin_44438931的博客
07-03 1190
使用swfupload插件，需要先引入swfupload.js和swfupload.swf两个文件。实现步骤如下： 1、完成上传组件uploadPanel.js文件，将该文件和swfupload.js以及swfupload.swf放入同一目录swfupload下。 2、创建window窗口嵌套UploadPanel组件： Ext.create('Ext.window.Window',{ widt...
jquery+SWFUpload+COS上传组件的使用 兼容ie6
04-04
总结来说，"jquery+SWFUpload+COS上传组件的使用 兼容ie6"这个主题涵盖了前端文件上传的多个重要知识点，包括jQuery的DOM操作、SWFUpload的多文件上传机制、以及腾讯云对象存储的集成。这个解决方案虽然针对的是IE6...
jquery+swfupload+servlet_多文件上传
01-07
**jQuery + SWFUpload + Servlet 多文件上传技术详解** 在Web开发中，用户往往需要上传多个文件，例如图片、文档等。传统的HTML表单上传方式存在诸多限制，如文件大小限制、一次只能上传一个文件等。为了克服这些...
自制jquery+SWFUpload+COS 多文件上传组件
05-26
在这个组件中，COS作为后端的文件存储解决方案，接收并保存由SWFUpload上传的文件。 在实际使用中，开发者可能需要配置以下关键步骤： 1. **设置SWFUpload**: 配置SWFUpload的各项参数，如文件类型限制、最大文件...
Struts+swfupload实现文件上传功能
04-14
Struts和SwfUpload是两种在Web开发中用于构建强大功能的应用工具，它们结合使用可以实现高效的文件上传功能。在本文中，我们将深入探讨这两个组件以及如何将它们整合以实现文件上传。 首先，Struts是一个基于MVC...
jquery+SWFUpload+COS上传组件的使用
09-14
jquery+SWFUpload+COS上传组件的使用 jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件的使用jquery+SWFUpload+COS上传组件...
SWFUpload批量上传插件
ajwqb06628的专栏
01-24 146
SWFUpload批量上传插件 SWFUpload是一个批量上传插件，在HTML4.1里面，估计也只有Flash+javascript配合才能够做到了。先复制个重要的网址，这个应该是官方的文档了，相当齐全。 http://leeon.me/upload/other...
强大的jquery上传插件SWF版Uploadify参数详解
孤天浪雨
09-23 9430
强大的jquery上传插件SWF版Uploadify参数详解说到Uploadify，不用说网络上很多人都在用，这可是个非常强大的上传插件，但遗憾的是的其html5版是收费的，5刀，需要的可以去其官方网站下载。屌丝的jQ酷只能讲下swf版了，这个是免费的，功能很强大，缺点就是不支持水果。Uploadify内置了许多参数，方法，事件等，使用起来方便快捷，官方有详细的方档，当然都是英文的，嘻嘻。至于Upl
XHTML学习
大河之犬的博客
09-20 302
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 108
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 274
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
Babel
小秀的博客
09-20 632
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值