Uploadify v3.2.1+asp.net

3 篇文章 0 订阅
3 篇文章 0 订阅

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值