首页 新闻 会员 周边

swfupload如何取消自动上传?

0
[已解决问题] 解决于 2018-03-12 10:34

swfupload.handlers.js:

$(function () {
    //初始化绑定默认的属性
    $.swfUpLoadDefaults = $.swfUpLoadDefaults || {};
    $.swfUpLoadDefaults.property = {
        single: true, //是否单文件
        water: false, //是否加水印
        thumbnail: false, //是否生成缩略图
        sendurl: null, //发送地址
        filetypes: "*.jpg;*.jpge;*.png;*.gif;", //文件类型
        filesize: "2048", //文件大小
        btntext: "浏览", //上传按钮的文字
        btnwidth: 48, //上传按钮的宽度
        btnheight: 28, //上传按钮的高度
        flashurl: null //FLASH上传控件相对地址
    };
    //初始化SWFUpload上传控件
    $.fn.InitSWFUpload = function (p) {
        p = $.extend({}, $.swfUpLoadDefaults.property, p || {});
        //创建上传按钮
        var parentObj = $(this);
        var parentBtnId = "upload_span_" + Math.floor(Math.random() * 1000 + 1);
        parentObj.append('<div class="upload-btn"><span id="' + parentBtnId + '"></span></div>');
        //初始化属性
        var btnAction = SWFUpload.BUTTON_ACTION.SELECT_FILES; //多文件上传

        p.sendurl += "?action=UpLoadFile";
        if (p.single) {
            btnAction = SWFUpload.BUTTON_ACTION.SELECT_FILE; //单文件上传
        }
        if (p.water) {
            p.sendurl += "&IsWater=1";
        }
        if (p.thumbnail) {
            p.sendurl += "&IsThumbnail=1";
        }

        //初始化上传控件
        var swfu = new SWFUpload({
            post_params: { "ASPSESSID": "NONE" },
            upload_url: p.sendurl, //上传地址
            file_size_limit: p.filesize, //文件大小
            file_types: p.filetypes, //文件类型
            file_types_description: "JPG Images",
            file_upload_limit: "0", //一次能上传的文件数量

            file_queue_error_handler: fileQueueError,
            file_dialog_complete_handler: fileDialogComplete,
            upload_progress_handler: uploadProgress,
            upload_error_handler: uploadError,
            upload_success_handler: uploadSuccess,
            upload_complete_handler: uploadComplete,

            button_placeholder_id: parentBtnId, //指定一个dom元素
            button_width: p.btnwidth, //上传按钮的宽度
            button_height: p.btnheight, //上传按钮的高度
            button_text: '<span class="btnText">' + p.btntext + '</span>', //上传按钮的文字
            button_text_style: ".btnText{font-family:Microsoft YaHei;font-size:18px;height:28px;line-height:28px;color:#333333;text-align:center; display:}", //按钮样式
            button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT, //背景透明
            button_action: btnAction, //单文件或多文件上传
            button_cursor: SWFUpload.CURSOR.HAND, //指针手形
            flash_url: p.flashurl, //Flash路径
            custom_settings: {
                "upload_target": parentObj,
                "button_action": btnAction
            },
            debug: false
        });
    }
});

//==================================以下是上传时处理事件===================================
//当选择文件对话框关闭消失时发生
function fileQueueError(file, errorCode, message) {
    try {
        switch (errorCode) {
            case SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED:
                alert("你选择的文件太多!");
                break;
            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                alert(file.name + "文件太小!");
                break;
            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                alert(file.name + "文件太大!");
                break;
            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
                alert(file.name + "文件类型出错!");
                break;
            default:
                if (file !== null) {
                    alert("出现未知错误!");
                }
                break;
        }

    } catch (ex) {
        this.debug(ex);
    }
}
//当选择文件对话框关闭,所有文件已经处理完成时发生
function fileDialogComplete(numFilesSelected, numFilesQueued) {
    try {
        if (numFilesQueued > 0) {
            //如果是单文件上传,把旧的文件地址传过去
            if (this.customSettings.button_action == SWFUpload.BUTTON_ACTION.SELECT_FILE) {
                this.setPostParams({
                    "DelFilePath": $(this.customSettings.upload_target).siblings(".upload-path").val()
                });
            }
            this.startUpload();
            createHtmlProgress(this); //创建进度条
        }
    } catch (ex) {
        this.debug(ex);
    }
}
//flash定时触发,定时更新页面中的UI元素达到及时显示上传进度的效果
function uploadProgress(file, bytesLoaded) {
    try {
        var percent = Math.ceil((bytesLoaded / file.size) * 100);
        var progressObj = $(this.customSettings.upload_target).children(".upload-progress");
        progressObj.children(".txt").html(file.name);
        progressObj.find(".bar b").width(percent + "%");
    } catch (ex) {
        this.debug(ex);
    }
}
//上传被终止或者没有成功完成时触发
function uploadError(file, errorCode, message) {
    var progress;
    try {
        switch (errorCode) {
            case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
                try {
                    var progressObj = $(this.customSettings.upload_target).children(".upload-progress");
                    progressObj.children(".txt").html("上传被取消:Cancelled");
                }
                catch (ex1) {
                    this.debug(ex1);
                }
                break;
            case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                try {
                    var progressObj = $(this.customSettings.upload_target).children(".upload-progress");
                    progressObj.children(".txt").html("上传被停止:Stopped");
                }
                catch (ex2) {
                    this.debug(ex2);
                }
            case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
                alert(message + "SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED");
                break;
            default:
                alert(message + "未知!");
                break;
        }
    } catch (ex3) {
        this.debug(ex3);
    }
}
//文件上传的处理已经完成且服务端返回了200的HTTP状态时触发
function uploadSuccess(file, serverData) {
    try {
        var jsonstr = eval('(' + serverData + ')');
        if (jsonstr.status == '0') {
            var progressObj = $(this.customSettings.upload_target).children(".upload-progress");
            progressObj.children(".txt").html(jsonstr.msg);
        }
        if (jsonstr.status == '1') {
            //如果是单文件上传,则赋值相应的表单
            if (this.customSettings.button_action == SWFUpload.BUTTON_ACTION.SELECT_FILE) {
                $(this.customSettings.upload_target).siblings(".upload-name").val(jsonstr.name);
                $(this.customSettings.upload_target).siblings(".upload-path").val(jsonstr.path);
                $(this.customSettings.upload_target).siblings(".upload-size").val(jsonstr.size);
            } else {
                addImage($(this.customSettings.upload_target), jsonstr.path, jsonstr.thumb);
            }
            var progressObj = $(this.customSettings.upload_target).children(".upload-progress");
            progressObj.children(".txt").html("上传成功:" + file.name);
        }
    } catch (ex) {
        this.debug(ex);
    }
}
//当上传队列中的文件已完成时,无论成功(uoloadSuccess触发)或失败(uploadError触发),此事件都会被触发
function uploadComplete(file) {
    try {
        if (this.getStats().files_queued > 0) {
            this.startUpload();
        } else {
            var progressObj = $(this.customSettings.upload_target).children(".upload-progress");
            progressObj.children(".txt").html("全部上传成功");
            progressObj.remove();
        }
    } catch (ex) {
        this.debug(ex);
    }
}

//==================================以上是上传时处理事件===================================
//创建上传进度条
function createHtmlProgress(swfuInstance) {
    //判断显示进度的DIV是否存在,不存在则创建
    var targetObj = $(swfuInstance.customSettings.upload_target);
    var fileProgressObj = $('<div class="upload-progress"></div>').appendTo(targetObj);
    var progressText = $('<span class="txt">正在上传,请稍候...</span>').appendTo(fileProgressObj);
    var progressBar = $('<span class="bar"><b></b></span>').appendTo(fileProgressObj);
    var progressCancel = $('<a class="close" title="取消上传">关闭</a>').appendTo(fileProgressObj);
    //绑定点击事件
    progressCancel.click(function () {
        swfuInstance.stopUpload();
        fileProgressObj.remove();
    });
}

//======================================图片相册处理事件======================================
//添加图片相册
function addImage(targetObj, originalSrc, thumbSrc) {
    //插入到相册UL里面
    var newLi = $('<li>'
    + '<input type="hidden" name="hid_photo_name" value="0|' + originalSrc + '|' + thumbSrc + '" />'
    + '<input type="hidden" name="hid_photo_remark" value="" />'
    + '<div class="img-box" onclick="setFocusImg(this);">'
    + '<img src="' + thumbSrc + '" bigsrc="' + originalSrc + '" />'
    + '<span class="remark"><i>暂无描述...</i></span>'
    + '</div>'
    + '<a href="javascript:;" onclick="setRemark(this);">描述</a>'
    + '<a href="javascript:;" onclick="delImg(this);">删除</a>'
    + '</li>');
    newLi.appendTo(targetObj.siblings(".photo-list").children("ul"));

    //默认第一个为相册封面
    var focusPhotoObj = targetObj.siblings(".focus-photo");
    if (focusPhotoObj.val() == "") {
        focusPhotoObj.val(thumbSrc);
        newLi.children(".img-box").addClass("selected");
    }
}
//设置相册封面
function setFocusImg(obj) {
    var focusPhotoObj = $(obj).parents(".photo-list").siblings(".focus-photo");
    focusPhotoObj.val($(obj).children("img").eq(0).attr("src"));
    $(obj).parent().siblings().children(".img-box").removeClass("selected");
    $(obj).addClass("selected");
}
//设置图片描述
function setRemark(obj) {
    var parentObj = $(obj); //父对象
    var hidRemarkObj = parentObj.prevAll("input[name='hid_photo_remark']").eq(0); //取得隐藏值
    var m = $.dialog({
        lock: true,
        max: false,
        min: false,
        padding: 0,
        title: "图片描述",
        content: '<textarea id="ImageRemark" style="margin:10px 0;font-size:12px;padding:3px;color:#000;border:1px #d2d2d2 solid;vertical-align:middle;width:300px;height:50px;">' + hidRemarkObj.val() + '</textarea>',
        button: [{
            name: '批量描述',
            callback: function () {
                var remarkObj = $('#ImageRemark', parent.document);
                if (remarkObj.val() == "") {
                    $.dialog.alert('总该写点什么吧?', function () {
                        remarkObj.focus();
                    }, m);
                    return false;
                }
                parentObj.parent().parent().find("li input[name='hid_photo_remark']").val(remarkObj.val());
                parentObj.parent().parent().find("li .img-box .remark i").html(remarkObj.val());
            }
        }, {
            name: '单张描述',
            callback: function () {
                var remarkObj = $('#ImageRemark', parent.document);
                if (remarkObj.val() == "") {
                    $.dialog.alert('总该写点什么吧?', function () {
                        remarkObj.focus();
                    }, m);
                    return false;
                }
                hidRemarkObj.val(remarkObj.val());
                parentObj.siblings(".img-box").children(".remark").children("i").html(remarkObj.val());
            },
            focus: true
        }]
    });
}
//删除图片LI节点
function delImg(obj) {
    var parentObj = $(obj).parent().parent();
    var focusPhotoObj = parentObj.parent().siblings(".focus-photo");
    var smallImg = $(obj).siblings(".img-box").children("img").attr("src");
    $(obj).parent().remove(); //删除的LI节点
    //检查是否为封面
    if (focusPhotoObj.val() == smallImg) {
        focusPhotoObj.val("");
        var firtImgBox = parentObj.find("li .img-box").eq(0); //取第一张做为封面
        firtImgBox.addClass("selected");
        focusPhotoObj.val(firtImgBox.children("img").attr("src")); //重新给封面的隐藏域赋值
    }
}
View Code
大da脸的主页 大da脸 | 初学一级 | 园豆:73
提问于:2018-03-09 13:16

一选中文件就会自动上传?

dudu 6年前

@dudu: 是的,选择文件后自动就出现进度条上传了

落幕 6年前
< >
分享
最佳答案
0

参考 设置swfupload选择文件后不自动上传,注释掉 handles.js 中的 this.startUpload();,自己手动调用 startUpload()

奖励园豆:5
dudu | 高人七级 |园豆:30948 | 2018-03-09 18:16

我试试

大da脸 | 园豆:73 (初学一级) | 2018-03-09 18:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册