百度webuploader 上传演示例子
前端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="baiduWebUpload.aspx.cs" Inherits="School.Web.TestDemo.baiduWebUpload" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>百度上传控件</title> <link href="/Scripts/fileupload/webuploader/picstyle.css" rel="stylesheet" /> <link href="/Scripts/fileupload/webuploader/webuploader.css" rel="stylesheet" /> <link href="/Scripts/fileupload/webuploader/demo.css" rel="stylesheet" /> <script src="../../Scripts/hadd/js/bootstrap.min.js"></script>--%> <script src="/Scripts/jquery/jquery-1.10.2.min.js"></script> <script src="/Scripts/fileupload/webuploader/webuploader.js"></script> <script type="text/javascript"> jQuery(function () { //定义参数 var $ = jQuery, $wrap = $('#uploader'), $queue = $('<ul class="filelist"></ul>') .appendTo($wrap.find('.queueList')), fileCount = 0, fileSize = 0, ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, percentages = {}, //是否支持旋转 supportTransition = (function () { var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), state = 'pedding', //上传按钮 $upload = $wrap.find('.uploadBtn'), errMsg = '上传失败，请重试'; uploader; //实例化 uploader = WebUploader.create({ pick: { id: '#filePicker', label: '点击选择文件' }, accept: { title: 'myself', extensions: 'gif,jpg,jpeg,bmp,png,pdf,doc,docx', mimeTypes: 'image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' }, // swf文件路径 swf: '/Scripts/fileupload/webuploader/Uploader.swf', server: '/TestDemo/ajax/baiduUpload.ashx', duplicate: true }); function setState(val) { var file, stats; if (val === state) { return; } $upload.removeClass('state-' + state); $upload.addClass('state-' + val); state = val; switch (state) { case 'pedding': //待定 $queue.parent().removeClass('filled'); $queue.hide(); uploader.refresh(); break; case 'ready': $('#filePicker').removeClass('element-invisible'); $queue.parent().addClass('filled'); $queue.show(); uploader.refresh(); break; case 'uploading': $('#filePicker').addClass('element-invisible'); $upload.text('暂停上传'); break; case 'paused': $upload.text('继续上传'); break; case 'confirm': $upload.text('开始上传').addClass('disabled'); stats = uploader.getStats(); if (stats.successNum && !stats.uploadFailNum) { setState('finish'); return; } break; case 'finish': stats = uploader.getStats(); if (stats.successNum) { alert('上传成功'); } else { // 没有成功的图片，重设 state = 'done'; location.reload(); } break; } if (state != "ready") { $('#filePicker').removeClass('element-invisible'); $upload.text('开始上传').removeClass('disabled'); } } function addFile(file) { var $li = $('<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>' + '<p class="progress"><span></span></p>' + '</li>'), $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>' + '<span class="rotateRight">向右旋转</span>' + '<span class="rotateLeft">向左旋转</span></div>').appendTo($li), $prgress = $li.find('p.progress span'), $wrap = $li.find('p.imgWrap'), $info = $('<p class="error"></p>'), showError = function (code) { switch (code) { case 'exceed_size': text = '文件大小超出'; break; case 'interrupt': text = '上传暂停'; break; default: text = errMsg;; break; } $info.text(text).appendTo($li); }; //1.生成缩略图 if (file.getStatus() === 'invalid') { //不合格 showError(file.statusText); } else { // @todo lazyload $wrap.text('预览中'); uploader.makeThumb(file, function (error, src) { if (error) { $wrap.text('不能预览'); return; } var img = $('<img src="' + src + '">'); $wrap.empty().append(img); }, thumbnailWidth, thumbnailHeight); percentages[file.id] = [file.size, 0]; file.rotation = 0; } //2.文件状态变化 file.on('statuschange', function (cur, prev) { //前一个状态 if (prev === 'progress') { //上传中 $prgress.hide().width(0); } else if (prev === 'queued') { //进入队列,等待上传 $li.off('mouseenter mouseleave'); $btns.remove(); } // 成功 if (cur === 'error' || cur === 'invalid') { //失败不合格 showError(file.statusText); percentages[file.id][1] = 1; } else if (cur === 'interrupt') { //暂停 showError('interrupt'); } else if (cur === 'queued') { //队列中 percentages[file.id][1] = 0; } else if (cur === 'progress') { //上传中 $info.remove(); $prgress.css('display', 'block'); } else if (cur === 'complete') { //上传完成 $li.append('<span class="success"></span>'); } $li.removeClass('state-' + prev).addClass('state-' + cur); }); //3.缩略图标签 旋转删除 $li.on('mouseenter', function () { $btns.stop().animate({ height: 30 }); }); $li.on('mouseleave', function () { $btns.stop().animate({ height: 0 }); }); $btns.on('click', 'span', function () { var index = $(this).index(), deg; switch (index) { case 0: uploader.removeFile(file); return; case 1: file.rotation += 90; break; case 2: file.rotation -= 90; break; } if (supportTransition) { deg = 'rotate(' + file.rotation + 'deg)'; $wrap.css({ '-webkit-transform': deg, '-mos-transform': deg, '-o-transform': deg, 'transform': deg }); } else { $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); } }); $li.appendTo($queue); } function removeFile(file) { var $li = $('#' + file.id); delete percentages[file.id]; $li.off().find('.file-panel').off().end().remove(); } uploader.onUploadProgress = function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); $percent.css('width', percentage * 100 + '%'); percentages[file.id][1] = percentage; }; uploader.onFileQueued = function (file) { fileCount++; fileSize += file.size; addFile(file); setState('ready'); }; uploader.onFileDequeued = function (file) { fileCount--; fileSize -= file.size; if (!fileCount) { setState('pedding'); } removeFile(file); }; uploader.on('all', function (type) { var stats; switch (type) { case 'uploadFinished': setState('confirm'); break; case 'startUpload': setState('uploading'); break; case 'stopUpload': setState('paused'); break; } }); uploader.onError = function (code) { alert('Eroor: ' + code); }; uploader.on('uploadAccept', function (file, response) { var hasError = (response["result"] === "error"); if (hasError) { // 通过return false来告诉组件，此文件上传有错。 errMsg = response['error']["message"]; return false; } else { } }); uploader.on('uploadBeforeSend', function (file, data) { data.opr = 'newupload'; data.type = $("#hidtype").val(); data.pid = $("#hidpid").val(); }); //上传按钮 $upload.on('click', function () { if ($(this).hasClass('disabled')) { return false; } if (state === 'ready') { uploader.upload(); } else if (state === 'paused') { uploader.upload(); } else if (state === 'uploading') { uploader.stop(); } }); $upload.addClass('state-' + state); }) </script></head><body> <form id="frmUpload" runat="server"> <div class="page-container"> <div id="uploader" class="wu-example"> <div class="queueList"> </div> <div class="statusBar" > <div class="btns"> <div id="filePicker"></div> <div class="uploadBtn">开始上传</div> </div> </div> </div> </div> </form> </body></html> |
一般处理程序代码
using School.Infrastructure.Common;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;using System.Web;namespace School.Web.TestDemo.ajax{ /// <summary> /// baiduUpload 的摘要说明 /// </summary> public class baiduUpload : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; HttpRequest Request = context.Request; HttpResponse Response = context.Response; string name = Request["name"]; string opr = Request["opr"]; string result = string.Empty; if(opr=="newupload") { result = NewUploadImg(Request, name); } context.Response.Write(result); } private string NewUploadImg(HttpRequest Request, string filename) { var error = new error { code = "101", message = "Upload Failed" }; JsonResultWebUpload jresult = new JsonResultWebUpload("2.0") { result = "error" }; int filecount = Request.Files.Count; HttpPostedFile img = null; if (filecount > 0 && !string.IsNullOrEmpty(filename)) { img = Request.Files[0]; } else { jresult.error = error; jresult.id = Request["id"]; return JsonHelper.SerializeObject(jresult); } byte[] bytes = new byte[img.ContentLength]; using (BinaryReader reader = new BinaryReader(img.InputStream, Encoding.UTF8)) { bytes = reader.ReadBytes(img.ContentLength); } string filefullpath = HttpContext.Current.Server.MapPath("~/UploadFiles/") + filename; using (FileStream fsWrite = new FileStream(filefullpath, FileMode.OpenOrCreate)) { fsWrite.Write(bytes, 0, bytes.Length); } if (true) { jresult.result = "success"; jresult.id = Request["id"]; } return JsonHelper.SerializeObject(jresult); } public bool IsReusable { get { return false; } } } public class JsonResultWebUpload { public JsonResultWebUpload() { } public JsonResultWebUpload(string jsonrpc) { this.jsonrpc = jsonrpc; } public string jsonrpc { get; set; } public string result { get; set; } public error error { get; set; } public string id { get; set; } } public class error { public string code { get; set; } public string message { get; set; } }} |
css样式
picstyle.css
body {
margin-top: 50px;
font-size: 16px;
font-family: "Myriad Pro", "Hiragino Sans GB","Microsoft YaHei","微软雅黑", Calibri, Helvetica, tahoma,arial,simsun,"宋体", sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.jumbotron {
background: transparent url(images/banner.jpg) repeat-x 50% 0%;
color: #fff;
text-shadow: 1px 1px 1px #3b3262;
margin-bottom: 0;
}
.jumbotron .container {
position: relative;
}
.jumbotron .github-btns {
position: absolute;
bottom: 0;
right: 0;
}
.fetature {
margin-top: 30px;
}
.page-body {
min-height: 450px;
}
.page-container {
margin-top: 10px;
}
.page-container h1,
.page-container h2,
.page-container h3 {
padding-top: 70px;
margin-top: -50px;
}
.logo {
position: relative;
padding-left: 60px;
}
.logo span {
position: absolute;
left: 15px;
top: 8px;
font-size: 2em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.logo.active {
color: #fff;
}
@media (min-width: 768px) {
.fetature .row .col-lg-4 {
min-height: 250px;
}
}
.footer {
width: 100%;
overflow: hidden;
color: #f2f2f2;
background: #212121;
margin-top: 50px;
}
.footer-fixed-bottom {
position: fixed;
bottom: 0;
}
.footer a {
color: #f2f2f2;
}
.footer .footer-inner {
margin: 15px;
}
.wu-example {
position: relative;
padding: 45px 15px 15px;
margin: 15px 0;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
.wu-example:after {
content:"请上传证件";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.bs-example {
margin-left: 0;
margin-right: 0;
background-color: #fff;
border-width: 1px;
border-color: #ddd;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
}
.post-toc {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 0 #fff;
background-color: #f7f5fa;
border-radius: 5px;
}
.post-toc .nav > li > a {
display: block;
color: #716b7a;
padding: 5px 20px;
}
.post-toc .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}
.post-toc.affix {
position: static;
}
.post-toc .nav .nav {
display: none;
margin-bottom: 8px;
}
@media (min-width: 992px) {
.post-toc.affix {
position: fixed;
width: 213px;
top: 50px;
}
.post-toc .nav > .active > ul {
display: block;
}
}
@media (min-width: 1200px) {
.post-toc.affix {
width: 263px;
}
.post-toc .nav > .active > ul {
display: block;
}
}
.post-toc .nav > .active > a,
.post-toc .nav > .active:hover > a,
.post-toc .nav > .active:focus > a {
font-weight: bold;
color: #563d7c;
background-color: transparent;
border-right: 1px solid #563d7c;
}
.friends-links {
margin: 0;
padding: 0;
list-style: none;
}
.weixin {
text-align: center;
display: inline-block;
}
.weixin img {
width: 80px;
}
/********************************
*
* COMMENTS
*
********************************/
.comment {
background-color: transparent;
border-color: #CACACA;
border-style: solid;
border-width: 1px;
color: black;
display: block;
margin-bottom: 10px;
margin-top: 10px;
padding: 0px;
width: 100%;
}
.comment .commentheader {
border-bottom-color: #CACACA;
border-bottom-style: solid;
border-bottom-width: 1px;
color: black;
background-image: -webkit-linear-gradient(#F8F8F8,#E1E1E1);
background-image: -moz-linear-gradient(#F8F8F8,#E1E1E1);
color: black;
display: block;
float: left;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 33px;
line-height: 33px;
margin: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
text-overflow: ellipsis;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 100%;
}
.comment .commentheader .commentgravatar {
background-attachment: scroll;
background-clip: border-box;
background-color: white;
background-image: none;
background-origin: padding-box;
border-color: #C8C8C8;
border-style: solid;
border-width: 1px;
color: black;
display: inline-block;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 1px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 24px;
line-height: 1px;
margin-left: 5px;
margin-right: 3px;
margin-top: -2px;
overflow-x: visible;
overflow-y: visible;
padding: 1px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
vertical-align: middle;
white-space: nowrap;
width: 24px;
}
.comment .commentheader a:link {
text-decoration: none;
}
.comment .commentheader a:hover {
border-bottom:1px solid;
}
.comment .commentheader .commentuser {
background-color: transparent;
color: black;
display: inline;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 0px;
line-height: 16px;
margin-left: 5px;
margin-right: 10px;
overflow-x: visible;
overflow-y: visible;
padding: 0px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 0px;
}
.comment .commentheader .commentdate {
background-color: transparent;
color: #777;
display: inline;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 0px;
line-height: 33px;
margin: 0px;
overflow-x: visible;
overflow-y: visible;
padding: 0px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 20em;
}
.comment .commentbody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
color: #333;
display: block;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
margin-top: 40px;
overflow-x: visible;
overflow-y: visible;
padding: 0em;
position: static;
width: 96%;
word-wrap: break-word;
}
.comment .commentbody p {
margin-bottom: 0.5em;
margin-top: 0.5em;
margin-left: 0em;
margin-right: 0em;
}
.comment .commentbody pre {
border: 0px solid #ddd;
background-color: #eef;
padding: 0 .4em;
}
.comment .commentbody pre code {
border: 0px solid #ddd;
}
.comment .commentbody code {
border: 1px solid #ddd;
background-color: #eef;
font-size: 85%;
padding: 0 .2em;
}
/*demoæ ·å¼*/
#picker {
display: inline-block;
line-height: 1.428571429;
vertical-align: middle;
margin: 0 12px 0 0;
}
#picker .webuploader-pick {
padding: 6px 12px;
display: block;
}
#uploader-demo .thumbnail {
width: 110px;
height: 110px;
}
#uploader-demo .thumbnail img {
width: 100%;
}
.uploader-list {
width: 100%;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 0 20px 20px 0;
padding: 4px;
}
.file-item .error {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: red;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .info {
position: absolute;
left: 4px;
bottom: 4px;
right: 4px;
height: 20px;
line-height: 20px;
text-indent: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: 10;
}
.upload-state-done:after {
content:"\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
position: absolute;
bottom: 0;
right: 4px;
color: #4cae4c;
z-index: 99;
}
.file-item .progress {
position: absolute;
right: 4px;
bottom: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: 15;
margin:0;
padding: 0;
border-radius: 0;
background: transparent;
}
.file-item .progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: #d14 url(images/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;
}
}
a.travis {
position: relative;
top: -4px;
right: 15px;
}
body {
margin-top: 50px;
font-size: 16px;
font-family: "Myriad Pro", "Hiragino Sans GB","Microsoft YaHei","微软雅黑", Calibri, Helvetica, tahoma,arial,simsun,"宋体", sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.jumbotron {
background: transparent url(images/banner.jpg) repeat-x 50% 0%;
color: #fff;
text-shadow: 1px 1px 1px #3b3262;
margin-bottom: 0;
}
.jumbotron .container {
position: relative;
}
.jumbotron .github-btns {
position: absolute;
bottom: 0;
right: 0;
}
.fetature {
margin-top: 30px;
}
.page-body {
min-height: 450px;
}
.page-container {
margin-top: 10px;
}
.page-container h1,
.page-container h2,
.page-container h3 {
padding-top: 70px;
margin-top: -50px;
}
.logo {
position: relative;
padding-left: 60px;
}
.logo span {
position: absolute;
left: 15px;
top: 8px;
font-size: 2em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.logo.active {
color: #fff;
}
@media (min-width: 768px) {
.fetature .row .col-lg-4 {
min-height: 250px;
}
}
.footer {
width: 100%;
overflow: hidden;
color: #f2f2f2;
background: #212121;
margin-top: 50px;
}
.footer-fixed-bottom {
position: fixed;
bottom: 0;
}
.footer a {
color: #f2f2f2;
}
.footer .footer-inner {
margin: 15px;
}
.wu-example {
position: relative;
padding: 45px 15px 15px;
margin: 15px 0;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}
.wu-example:after {
content:"请上传证件";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (min-width: 768px) {
.bs-example {
margin-left: 0;
margin-right: 0;
background-color: #fff;
border-width: 1px;
border-color: #ddd;
border-radius: 4px 4px 0 0;
box-shadow: none;
}
}
.post-toc {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0 1px 0 #fff;
background-color: #f7f5fa;
border-radius: 5px;
}
.post-toc .nav > li > a {
display: block;
color: #716b7a;
padding: 5px 20px;
}
.post-toc .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
}
.post-toc.affix {
position: static;
}
.post-toc .nav .nav {
display: none;
margin-bottom: 8px;
}
@media (min-width: 992px) {
.post-toc.affix {
position: fixed;
width: 213px;
top: 50px;
}
.post-toc .nav > .active > ul {
display: block;
}
}
@media (min-width: 1200px) {
.post-toc.affix {
width: 263px;
}
.post-toc .nav > .active > ul {
display: block;
}
}
.post-toc .nav > .active > a,
.post-toc .nav > .active:hover > a,
.post-toc .nav > .active:focus > a {
font-weight: bold;
color: #563d7c;
background-color: transparent;
border-right: 1px solid #563d7c;
}
.friends-links {
margin: 0;
padding: 0;
list-style: none;
}
.weixin {
text-align: center;
display: inline-block;
}
.weixin img {
width: 80px;
}
/********************************
*
* COMMENTS
*
********************************/
.comment {
background-color: transparent;
border-color: #CACACA;
border-style: solid;
border-width: 1px;
color: black;
display: block;
margin-bottom: 10px;
margin-top: 10px;
padding: 0px;
width: 100%;
}
.comment .commentheader {
border-bottom-color: #CACACA;
border-bottom-style: solid;
border-bottom-width: 1px;
color: black;
background-image: -webkit-linear-gradient(#F8F8F8,#E1E1E1);
background-image: -moz-linear-gradient(#F8F8F8,#E1E1E1);
color: black;
display: block;
float: left;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 33px;
line-height: 33px;
margin: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
text-overflow: ellipsis;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 100%;
}
.comment .commentheader .commentgravatar {
background-attachment: scroll;
background-clip: border-box;
background-color: white;
background-image: none;
background-origin: padding-box;
border-color: #C8C8C8;
border-style: solid;
border-width: 1px;
color: black;
display: inline-block;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 1px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 24px;
line-height: 1px;
margin-left: 5px;
margin-right: 3px;
margin-top: -2px;
overflow-x: visible;
overflow-y: visible;
padding: 1px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
vertical-align: middle;
white-space: nowrap;
width: 24px;
}
.comment .commentheader a:link {
text-decoration: none;
}
.comment .commentheader a:hover {
border-bottom:1px solid;
}
.comment .commentheader .commentuser {
background-color: transparent;
color: black;
display: inline;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 0px;
line-height: 16px;
margin-left: 5px;
margin-right: 10px;
overflow-x: visible;
overflow-y: visible;
padding: 0px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 0px;
}
.comment .commentheader .commentdate {
background-color: transparent;
color: #777;
display: inline;
float: none;
font-family: helvetica, arial, freesans, clean, sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 0px;
line-height: 33px;
margin: 0px;
overflow-x: visible;
overflow-y: visible;
padding: 0px;
text-overflow: clip;
text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 20em;
}
.comment .commentbody {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
color: #333;
display: block;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
margin-top: 40px;
overflow-x: visible;
overflow-y: visible;
padding: 0em;
position: static;
width: 96%;
word-wrap: break-word;
}
.comment .commentbody p {
margin-bottom: 0.5em;
margin-top: 0.5em;
margin-left: 0em;
margin-right: 0em;
}
.comment .commentbody pre {
border: 0px solid #ddd;
background-color: #eef;
padding: 0 .4em;
}
.comment .commentbody pre code {
border: 0px solid #ddd;
}
.comment .commentbody code {
border: 1px solid #ddd;
background-color: #eef;
font-size: 85%;
padding: 0 .2em;
}
/*demoæ ·å¼*/
#picker {
display: inline-block;
line-height: 1.428571429;
vertical-align: middle;
margin: 0 12px 0 0;
}
#picker .webuploader-pick {
padding: 6px 12px;
display: block;
}
#uploader-demo .thumbnail {
width: 110px;
height: 110px;
}
#uploader-demo .thumbnail img {
width: 100%;
}
.uploader-list {
width: 100%;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 0 20px 20px 0;
padding: 4px;
}
.file-item .error {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
background: red;
color: white;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 23px;
}
.file-item .info {
position: absolute;
left: 4px;
bottom: 4px;
right: 4px;
height: 20px;
line-height: 20px;
text-indent: 5px;
background: rgba(0, 0, 0, 0.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: 10;
}
.upload-state-done:after {
content:"\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
position: absolute;
bottom: 0;
right: 4px;
color: #4cae4c;
z-index: 99;
}
.file-item .progress {
position: absolute;
right: 4px;
bottom: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: 15;
margin:0;
padding: 0;
border-radius: 0;
background: transparent;
}
.file-item .progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: #d14 url(images/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;
}
}
a.travis {
position: relative;
top: -4px;
right: 15px;
}
浙公网安备 33010602011771号