Uploadify v3.2.1 和asp.net 的应用。
引用如下文件:
<link href="uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
js代码如下:
如对下列参数不了解请看:http://slabs.sinaapp.com/uploadifydoc/ 的说明 很全了。
var uploadifyQueueData = '';
var fileList = new Array();
/*图片上传*/
$("#uploadify").uploadify({
'height': 30,
'width': 120,
'swf': '/SysCenter/uploadif/uploadify.swf',
'uploader': '/Ajax/UploadPics.ashx',
'auto': true,
'buttonText': '上传图片',
'multi': true,
'sizeLimit': 2 * 1024 * 1024,
'formData': '',//{ 'submitType': 'image', 'studentId': studentId, 'taskId': taskId },
'fileTypeDesc': '指定文件',
'fileTypeExts': '*.jpg; *.jpeg; *.png; *.gif',
'preventCaching': true, //不缓存。
'progressData': 'percentage',
'queueID': 'fileQueue',
'removeCompleted': false, //上传成功后不隐藏上传进度 当为false时 removeTimeout属性失效
'removeTimeout': 2, //进度条消失秒数
'onInit': function () { },
'onSelect': function (fileObj) { //判断文件大小
var fileSize = fileObj.size;
if (fileSize > 1 * 1024 * 1024) {
/*swal的说明 这是一个弹出对话框的插件,大家可以自己换对应的弹出对话框插件,或直写alert()*/
swal({
title: '',
text: '图片不得大于1M!',
type: 'warning',
url: ''
});
$('#uploadify').uploadify('cancel');
return;
}
},
'onSWFReady': function () {
uploadifyQueueData = this.queueData;
},
'onUploadComplete': function (file) {
},
'onUploadSuccess': function (file, data, response) { //上传成功回调方法
file.creationdate = data.split(',')[0]; //替换掉file中的creationdate属性 改为具体的图片路径
file.modificationdate = data.split(',')[1] //替换掉file中的modificationdate属性 改为图片对应的ID
fileList.push(file); //插入数组中
$('#images').val(fileList);
},
'onQueueComplete': function () { //队列中的所有文件被处理完成时触发该事件。
}
});
/*图片删除 jq1.9- 请用lvie方法 jq1.9+直接用on方法*/
$("#fileQueue").on('click', 'a', function () {
//取得本次取消的上传文件ID号
var fileId = $(this).parents(".uploadify-queue-item").attr("id");
var fileInfo = null;
//fileList中保存了所有的已上传文件信息。
for (var i = 0; i < fileList.length; i++) {
if (fileList[i].id == fileId) {
fileInfo = fileList[i];
fileList.splice(i, 1);
break;
}
}
//如果文件已经上传(即fileInfo不为空)
if (fileInfo != null) {
//将已经上传的文件从上传文件队列中清除(这个地方应该是这个插件的BUG 到最新的这个版本还是没有改正。如果你不删 再重新选择刚刚去除的图片重新上传 那么就有提示。)
delete uploadifyQueueData.files[fileId];
//删除对应的上传图片
var postData = {
f: fileInfo.creationdate
}
$.ajax({
type: "GET",
url: "/Ajax/DelFile.ashx",
dataType: "text",
data: postData,
success: function (res) {
fileList.remove(fileInfo.index);//数组重新更新,也要删除对应的已删除图片信息
$('#images').val(fileList);
}
});
}
});
/*数组的remove方法*/
Array.prototype.remove = function (obj) {
for (var i = 0; i < this.length; i++) {
var temp = this[i];
if (!isNaN(obj)) {
temp = i;
}
if (temp == obj) {
for (var j = i; j < this.length; j++) {
this[j] = this[j + 1];
}
this.length = this.length - 1;
}
}
}
HTML代码:
<table>
<tbody><tr>
<td>图片上传:</td>
<td>
<input type="file" name="uploadify" id="uploadify" />
<div id="fileQueue"></div>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" class="btn btn-lg btn-primary" data-original-title="" onclick="add();">保存</button></td>
</tr>
</tbody>
</table>