首页 > 代码库 > jquery文件批量上传控件Uploadify3.2(java springMVC)

jquery文件批量上传控件Uploadify3.2(java springMVC)

人比较懒  实用为主 不怎么排版了


先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面可以看到PHP的示例,属性说明,以及控件下载地址。分flash版(免费)和html5版(收费)。

官网上可以看到效果演示。


另外在网上找到了一份Uploadify3.2的中文API文档,可以在我上传的资源里面下载。


下面就是一个基于springMVC的文件上传示例,看起来可能比文档更直观一些···


1.下载插件放到项目中


2.在jsp页面中引入以下JS和CSS

<script type="text/javascript" src=http://www.mamicode.com/"${ctxStatic}/uploadify/jquery.uploadify.min.js"></script>>

3.jsp页面中创建展示DIV和操作按钮

</pre><pre name="code" class="html"><form>
	<div id="queue"></div><!-上传队列展示区-->
	<input id="file_upload" name="file_upload" type="file" multiple="true"><!-批量上传按钮-->
</form>

4.编辑js代码

	$(document).ready(function() {
		$("#file_upload").uploadify({
			'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//控件flash文件位置
                        //后台处理的请求(也就是action请求路径),后面追加了jsessionid,用来标示使用当前session(默认是打开新的session,会导致存在session校验的请求中产生302错误)
                        'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}',
			'queueID' : 'queue',//与下面HTML的div.id对应  
			'width' : '100',//按钮宽度
			'height' : '32',//按钮高度
			'fileTypeDesc' : '指定类型文件',
			'fileTypeExts' : '*.jpg;*.png', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc 
			'fileObjName' : '"uploadify"',
			'buttonText' : '批量上传',//上传按钮显示内容,还有个属性可以设置按钮的背景图片
			'fileSizeLimit' : '100KB',
			'multi' : true,
			'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重写默认方法
			'onFallback' : function() {//检测FLASH失败调用
				alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
			},
                        //以下方法是对应overrideEvents的重载方法,具体实现是网上找到的一个别的朋友的代码,
                        //我把这些方法抽到了一个自定义js中,我会在最后面贴出来
                        'onSelect' : uploadify_onSelect,
			'onSelectError' : uploadify_onSelectError,
			'onUploadError' : uploadify_onUploadError,
			'onUploadSuccess' : uploadify_onUploadSuccess
		});
	});

5.controller类的方法

	@ResponseBody
	@RequestMapping(value = http://www.mamicode.com/"testFu")>
6.附录摘自网上的重载方法列表,我做了一些改动使之更实用(感谢网络无名高手)

var uploadify_onSelectError = function(file, errorCode, errorMsg) {
	var msgText = "上传失败\n";
	switch (errorCode) {
	case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
		// this.queueData.errorMsg = "每次最多上传 " +
		// this.settings.queueSizeLimit + "个文件";
		msgText += "上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件!";
		break;
	case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
		msgText += "文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小!";
		break;
	case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
		msgText += "文件大小为0";
		break;
	case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
		msgText += "文件格式不正确,仅限 " + this.settings.fileTypeExts;
		break;
	default:
		msgText += "错误代码:" + errorCode + "\n" + errorMsg;
	}
	alert(msgText);
};

var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {
	// 手工取消不弹出提示
	if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
		return;
	}
	var msgText = "上传失败\n";
	switch (errorCode) {
	case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
		msgText += "HTTP 错误\n" + errorMsg;
		break;
	case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
		msgText += "上传文件丢失,请重新上传";
		break;
	case SWFUpload.UPLOAD_ERROR.IO_ERROR:
		msgText += "IO错误";
		break;
	case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
		msgText += "安全性错误\n" + errorMsg;
		break;
	case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
		msgText += "每次最多上传 " + this.settings.uploadLimit + "个";
		break;
	case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
		msgText += errorMsg;
		break;
	case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
		msgText += "找不到指定文件,请重新操作";
		break;
	case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
		msgText += "参数错误";
		break;
	default:
		msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n" + errorMsg + "\n" + errorString;
	}
	alert(msgText);
}

var uploadify_onSelect = function() {

};

var uploadify_onUploadSuccess = function(file, data, response) {
	alert("保存每个文件上传后台返回的相关信息,在onQueueComplete方法中展示");
};

var uploadify_onQueueComplete = function(){
	alert("全部完成-->并展示提示信息");
}

到此Uploadify的文件批量上传就OK了。 有疑问可以留言咱们一起讨论。这个控件很简单花时间看的话都能弄懂。写这个文章的目的也是为了让大家更快上手,节省宝贵时间




jquery文件批量上传控件Uploadify3.2(java springMVC)