webuploader 上传图片

其他 2018-10-31 01:04:59 阅读次数: 0

    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')\0;
    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

猜你喜欢

转载自www.cnblogs.com/freely/p/9880436.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022