webuploader 上传图片

#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;}

<!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>

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()});