webuploader 上传图片

Posted 2021-01-16 问君能有几多愁

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以html5为主，FLASH为辅的现代文件上传组件。

    具体接口参考 webuploader接口文档地址

引入资源

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader/webuploader.js"></script>

案例

                           <div id="uploader" class="wu-example">
                                <div class="queueList">
                                    <div id="dndArea" class="placeholder">
                                        <div id="filePicker"></div>
                                        <p>或将照片拖到这里，单次最多可选300张</p>
                                    </div>
                                </div>
                                <div class="statusBar" style="display:none;">
                                    <div class="progress">
                                        <span class="text">0%</span>
                                        <span class="percentage"></span>
                                    </div>
                                    <div class="info"></div>
                                    <div class="btns">
                                        <div id="filePicker2"></div>
                                        <div class="uploadBtn">开始上传</div>
                                    </div>
                                </div>
                            </div>

样式

#container {
    color: #838383;
    font-size: 12px;
}

#uploader .queueList {
    margin: 20px;
    border: 3px dashed #e6e6e6;
}
#uploader .queueList.filled {
    padding: 17px;
    margin: 0;
    border: 3px dashed transparent;
}
#uploader .queueList.webuploader-dnd-over {
    border: 3px dashed #999999;
}

#uploader p {margin: 0;}

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}

#uploader .placeholder {
    min-height: 350px;
    padding-top: 178px;
    text-align: center;
    background: url(../../../img/webuploader.png) center 93px no-repeat;
    color: #cccccc;
    font-size: 18px;
    position: relative;
}

#uploader .placeholder .webuploader-pick {
    font-size: 18px;
    background: #00b7ee;
    border-radius: 3px;
    line-height: 44px;
    padding: 0 30px;
    *width: 120px;
    color: #fff;
    display: inline-block;
    margin: 0 auto 20px auto;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#uploader .placeholder .webuploader-pick-hover {
    background: #00a2d4;
}

#uploader .placeholder .flashTip {
    color: #666666;
    font-size: 12px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 20px;
}
#uploader .placeholder .flashTip a {
    color: #0785d1;
    text-decoration: none;
}
#uploader .placeholder .flashTip a:hover {
    text-decoration: underline;
}

#uploader .filelist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#uploader .filelist:after {
    content: ‘‘;
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}

#uploader .filelist li {
    width: 110px;
    height: 110px;
    background: url(../../img/bg.png) no-repeat;
    text-align: center;
    margin: 0 8px 20px 0;
    position: relative;
    display: inline;
    float: left;
    overflow: hidden;
    font-size: 12px;
}

#uploader .filelist li p.log {
    position: relative;
    top: -45px;
}

#uploader .filelist li p.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    top: 5px;
    text-indent: 5px;
    text-align: left;
}

#uploader .filelist li p.progress {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 8px;
    overflow: hidden;
    z-index: 50;
    margin: 0;
    border-radius: 0;
    background: none;
    -webkit-box-shadow: 0 0 0;
}
#uploader .filelist li p.progress span {
    display: none;
    overflow: hidden;
    width: 0;
    height: 100%;
    background: #1483d8 url(../../img/progress.png) repeat-x;

    -webit-transition: width 200ms linear;
    -moz-transition: width 200ms linear;
    -o-transition: width 200ms linear;
    -ms-transition: width 200ms linear;
    transition: width 200ms linear;

    -webkit-animation: progressmove 2s linear infinite;
    -moz-animation: progressmove 2s linear infinite;
    -o-animation: progressmove 2s linear infinite;
    -ms-animation: progressmove 2s linear infinite;
    animation: progressmove 2s linear infinite;

    -webkit-transform: translateZ(0);
}

@-webkit-keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}
@-moz-keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}
@keyframes progressmove {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 17px 0;
    }
}

#uploader .filelist li p.imgWrap {
    position: relative;
    z-index: 2;
    line-height: 110px;
    vertical-align: middle;
    overflow: hidden;
    width: 110px;
    height: 110px;

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webit-transition: 200ms ease-out;
    -moz-transition: 200ms ease-out;
    -o-transition: 200ms ease-out;
    -ms-transition: 200ms ease-out;
    transition: 200ms ease-out;
}

#uploader .filelist li img {
    width: 100%;
}

#uploader .filelist li p.error {
    background: #f43838;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    width: 100%;
    z-index: 100;
}

#uploader .filelist li .success {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40px;
    width: 100%;
    z-index: 200;
    background: url(../../img/success.png) no-repeat right bottom;
}

#uploader .filelist div.file-panel {
    position: absolute;
    height: 0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#80000000‘, endColorstr=‘#80000000‘);
    background: rgba( 0, 0, 0, 0.5 );
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 300;
}

#uploader .filelist div.file-panel span {
    width: 24px;
    height: 24px;
    display: inline;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../../img/icons.png) no-repeat;
    margin: 5px 1px 1px;
    cursor: pointer;
}

#uploader .filelist div.file-panel span.rotateLeft {
    background-position: 0 -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
    background-position: 0 0;
}

#uploader .filelist div.file-panel span.rotateRight {
    background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
    background-position: -24px 0;
}

#uploader .filelist div.file-panel span.cancel {
    background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
    background-position: -48px 0;
}

#uploader .statusBar {
    height: 63px;
    border-top: 1px solid #dadada;
    padding: 0 20px;
    line-height: 63px;
    vertical-align: middle;
    position: relative;
}

#uploader .statusBar .progress {
    border: 1px solid #1483d8;
    width: 198px;
    background: #fff;
    height: 18px;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    color: #6dbfff;
    position: relative;
    margin: 0 10px 0 0;
}
#uploader .statusBar .progress span.percentage {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background: #1483d8;
    position: absolute;
}
#uploader .statusBar .progress span.text {
    position: relative;
    z-index: 10;
}

#uploader .statusBar .info {
    display: inline-block;
    font-size: 14px;
    color: #666666;
}

#uploader .statusBar .btns {
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 40px;
}

#filePicker2 {
    display: inline-block;
    float: left;
}

#uploader .statusBar .btns .webuploader-pick,
#uploader .statusBar .btns .uploadBtn,
#uploader .statusBar .btns .uploadBtn.state-uploading,
#uploader .statusBar .btns .uploadBtn.state-paused {
    background: #ffffff;
    border: 1px solid #cfcfcf;
    color: #565656;
    padding: 0 18px;
    display: inline-block;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    float: left;
}
#uploader .statusBar .btns .webuploader-pick-hover,
#uploader .statusBar .btns .uploadBtn:hover,
#uploader .statusBar .btns .uploadBtn.state-uploading:hover,
#uploader .statusBar .btns .uploadBtn.state-paused:hover {
    background: #f0f0f0;
}

#uploader .statusBar .btns .uploadBtn {
    background: #00b7ee;
    color: #fff;
    border-color: transparent;
}
#uploader .statusBar .btns .uploadBtn:hover {
    background: #00a2d4;
}

#uploader .statusBar .btns .uploadBtn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

webuploader.uploader.css

用于保存swf文件 的html 文件

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don‘t have permission to access /theme/hplus/js/plugins/webuploader/
on this server.</p>
<hr>
<address>Apache Server at www.zi-han.net Port 80</address>
</body></html>

webuploader/index.html

上js代码

var BASE_URL = ‘js/plugins/webuploader/index.html‘; //保存swf文件
jQuery(function() {
    function e(e) {
        var a = o(‘<li id="‘ + e.id + ‘"><p class="title">‘ + e.name + ‘</p><p class="imgWrap"></p><p class="progress"><span></span></p></li>‘),
        s = o(‘<div class="file-panel"><span class="cancel">删除</span><span class="rotateRight">向右旋转</span><span class="rotateLeft">向左旋转</span></div>‘).appendTo(a),
        i = a.find("p.progress span"),
        t = a.find("p.imgWrap"),
        r = o(‘<p class="error"></p>‘),
        d = function(e) {
            switch (e) {
            case "exceed_size":
                text = "文件大小超出";
                break;
            case "interrupt":
                text = "上传暂停";
                break;
            default:
                text = "上传失败，请重试"
            }
            r.text(text).appendTo(a)
        };
        "invalid" === e.getStatus() ? d(e.statusText) : (t.text("预览中"), n.makeThumb(e,
        function(e, a) {
            if (e) return void t.text("不能预览");
            var s = o(‘<img src="‘ + a + ‘">‘);
            t.empty().append(s)
        },
        v, b), w[e.id] = [e.size, 0], e.rotation = 0),
        e.on("statuschange",
        function(t, n) {
            "progress" === n ? i.hide().width(0) : "queued" === n && (a.off("mouseenter mouseleave"), s.remove()),
            "error" === t || "invalid" === t ? (console.log(e.statusText), d(e.statusText), w[e.id][1] = 1) : "interrupt" === t ? d("interrupt") : "queued" === t ? w[e.id][1] = 0 : "progress" === t ? (r.remove(), i.css("display", "block")) : "complete" === t && a.append(‘<span class="success"></span>‘),
            a.removeClass("state-" + n).addClass("state-" + t)
        }),
        a.on("mouseenter",
        function() {
            s.stop().animate({
                height: 30
            })
        }),
        a.on("mouseleave",
        function() {
            s.stop().animate({
                height: 0
            })
        }),
        s.on("click", "span",
        function() {
            var a, s = o(this).index();
            switch (s) {
            case 0:
                return void n.removeFile(e);
            case 1:
                e.rotation += 90;
                break;
            case 2:
                e.rotation -= 90
            }
            x ? (a = "rotate(" + e.rotation + "deg)", t.css({
                "-webkit-transform": a,
                "-mos-transform": a,
                "-o-transform": a,
                transform: a
            })) : t.css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + ~~ (e.rotation / 90 % 4 + 4) % 4 + ")")
        }),
        a.appendTo(l)
    }
    function a(e) {
        var a = o("#" + e.id);
        delete w[e.id],
        s(),
        a.off().find(".file-panel").off().end().remove()
    }
    function s() {
        var e, a = 0,
        s = 0,
        t = f.children();
        o.each(w,
        function(e, i) {
            s += i[0],
            a += i[0] * i[1]
        }),
        e = s ? a / s: 0,
        t.eq(0).text(Math.round(100 * e) + "%"),
        t.eq(1).css("width", Math.round(100 * e) + "%"),
        i()
    }
    function i() {
        var e, a = "";
        "ready" === k ? a = "选中" + m + "张图片，共" + WebUploader.formatSize(h) + "。": "confirm" === k ? (e = n.getStats(), e.uploadFailNum && (a = "已成功上传" + e.successNum + "张照片至XX相册，" + e.uploadFailNum + ‘张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>‘)) : (e = n.getStats(), a = "共" + m + "张（" + WebUploader.formatSize(h) + "），已上传" + e.successNum + "张", e.uploadFailNum && (a += "，失败" + e.uploadFailNum + "张")),
        p.html(a)
    }
    function t(e) {
        var a;
        if (e !== k) {
            switch (c.removeClass("state-" + k), c.addClass("state-" + e), k = e) {
            case "pedding":
                u.removeClass("element-invisible"),
                l.parent().removeClass("filled"),
                l.hide(),
                d.addClass("element-invisible"),
                n.refresh();
                break;
            case "ready":
                u.addClass("element-invisible"),
                o("#filePicker2").removeClass("element-invisible"),
                l.parent().addClass("filled"),
                l.show(),
                d.removeClass("element-invisible"),
                n.refresh();
                break;
            case "uploading":
                o("#filePicker2").addClass("element-invisible"),
                f.show(),
                c.text("暂停上传");
                break;
            case "paused":
                f.show(),
                c.text("继续上传");
                break;
            case "confirm":
                if (f.hide(), c.text("开始上传").addClass("disabled"), a = n.getStats(), a.successNum && !a.uploadFailNum) return void t("finish");
                break;
            case "finish":
                a = n.getStats(),
                a.successNum ? alert("上传成功") : (k = "done", location.reload())
            }
            i()
        }
    }
    var n, o = jQuery,
    r = o("#uploader"),
    l = o(‘<ul class="filelist"></ul>‘).appendTo(r.find(".queueList")),
    d = r.find(".statusBar"),
    p = d.find(".info"),
    c = r.find(".uploadBtn"),
    u = r.find(".placeholder"),
    f = d.find(".progress").hide(),
    m = 0,
    h = 0,
    g = window.devicePixelRatio || 1,
    v = 110 * g,
    b = 110 * g,
    k = "pedding",
    w = {},
    x = function() {
        var e = document.createElement("p").style,
        a = "transition" in e || "WebkitTransition" in e || "MozTransition" in e || "msTransition" in e || "OTransition" in e;
        return e = null,
        a
    } ();
    if (!WebUploader.Uploader.support()) throw alert("不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器"),
    new Error("不支持您的浏览器");
    n = WebUploader.create({
        pick: {
            id: "#filePicker",
            label: "点击选择图片"
        },
        dnd: "#uploader .queueList",
        paste: document.body,
        accept: {
            title: "Images",
            extensions: "gif,jpg,jpeg,bmp,png",
            mimeTypes: "image/*"
        },
        swf: BASE_URL + "/Uploader.swf",
        disableGlobalDnd: !0,
        chunked: !0,
        server: "webuploader_photo.html",
        duplicate: true,
        fileNumLimit: 9,
        fileSizeLimit: 5242880,
        fileSingleSizeLimit: 1048576,
        headers: {
            "X-CSRFToken": $.cookie(‘csrftoken‘)
        },

    }),
    n.addButton({
        id: "#filePicker2",
        label: "继续添加"
    }),
    n.onUploadProgress = function(e, a) {
        var i = o("#" + e.id),
        t = i.find(".progress span");
        t.css("width", 100 * a + "%"),
        w[e.id][1] = a,
        s()
    },
    n.on(‘uploadSuccess‘, function (file, response) {
        var res=JSON.parse(response._raw); //这里可以得到后台返回的数据
     // $(‘#‘ + file.id).addClass(‘upload-state-done‘);
        var input = document.createElement("input");
        console.log(res.data)
        var data = res.data
        input.type="hidden";
          input.name=data.id;
          input.value=data.path;
          $("#"+data.id).append(input);
          console.log($("#"+data.id))
});
    n.onFileQueued = function(a) {
        m++,
        h += a.size,
        1 === m && (u.addClass("element-invisible"), d.show()),
        e(a),
        t("ready"),
        s()
    },
    n.onFileDequeued = function(e) {
        m--,
        h -= e.size,
        m || t("pedding"),
        a(e),
        s()
    },
    n.on("all",
    function(e) {
        switch (e) {
        case "uploadFinished":
            t("confirm");
            break;
        case "startUpload":
            t("uploading");
            break;
        case "stopUpload":
            t("paused")
        }
    }),
    n.onError=function(e){
         // alert("Error: "+e)
          switch (e) {
                    case ‘Q_EXCEED_NUM_LIMIT‘:
                        alert("错误：最多上传九张图片！");
                        break;
                    case ‘Q_EXCEED_SIZE_LIMIT‘:
                        alert.msg("错误：文件总大小超出限制！");
                        break;
                    case ‘F_EXCEED_SIZE‘:
                        alert.msg("错误：文件大小超出限制！");
                        break;
                    case ‘Q_TYPE_DENIED‘:
                        alert.msg("错误：禁止上传该类型文件！");
                        break;
                    case ‘F_DUPLICATE‘:
                       alert.msg("错误：请勿重复上传该文件！");
                        break;
                    default:
                       alert.msg(‘错误代码：‘ + type);
                        break;
          }
    },
    c.on("click",
    function() {
        return o(this).hasClass("disabled") ? !1 : void("ready" === k ? n.upload() : "paused" === k ? n.upload() : "uploading" === k && n.stop())
    }),
    p.on("click", ".retry",
    function() {
        n.retry()
    }),
    p.on("click", ".ignore",
    function() {
       alert.msg("已忽略")
    }),
    c.addClass("state-" + k),
    s()

});

webuploader.uploader.js