有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下
先上效果图:
具体代码如下:
在页面中如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
$(function () {
var guid = '<%=Request["guid"] %>';
var type = '<%=Request["type"] %>';
if (guid == null || guid == "") {
guid = newGuid();
}
if (type != null) {
type = type + '/';
}
$('#file_upload').uploadify({
'swf': 'uploadify/uploadify.swf',//FLash文件路径
'buttonText': '浏 览',//按钮文本
'uploader': 'uploadhandler.ashx?guid=' + guid,//处理ASHX页面
'formData': { 'folder': 'picture','isCover': 1 },//传参数
'queueID': 'fileQueue',//队列的ID
'queueSizeLimit': 10,//队列最多可上传文件数量,默认为999
'auto': false,//选择文件后是否自动上传,默认为true
'multi': true,//是否为多选,默认为true
'removeCompleted': true,//是否完成后移除序列,默认为true
'fileSizeLimit': '0',//单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': 'All Files',//文件描述
'fileTypeExts': '.',//上传的文件后缀过滤器
'onQueueComplete': function (queueData) { //所有队列完成后事件
alert("上传完毕!");
},'onError': function (event,queueId,fileObj,errorObj) {
alert(errorObj.type + ":" + errorObj.info);
},'onUploadStart': function (file) {
},'onUploadSuccess': function (file,data,response) { //一个文件上传成功后的响应事件处理
//var data = $.parseJSON(data);//如果data是json格式
//var errMsg = "";
}
});
});
function newGuid() {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
guid += "-";
}
return guid;
}
//执行上传
function doUpload() {
$('#file_upload').uploadify('upload','*');
}