百度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 % %;
color: #fff;
text-shadow: 1px 1px 1px #3b3262;
margin-bottom: ;
}
.jumbotron .container {
position: relative;
}
.jumbotron .github-btns {
position: absolute;
bottom: ;
right: ;
}
.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: -1px rgba(, , , 0.25);
}
.logo.active {
color: #fff;
}
@media (min-width: 768px) {
.fetature .row .col-lg- {
min-height: 250px;
}
}
.footer {
width: %;
overflow: hidden;
color: #f2f2f2;
background: #;
margin-top: 50px;
}
.footer-fixed-bottom {
position: fixed;
bottom: ;
}
.footer a {
color: #f2f2f2;
}
.footer .footer-inner {
margin: 15px;
}
.wu-example {
position: relative;
padding: 45px 15px 15px;
margin: 15px ;
background-color: #fafafa;
box-shadow: inset 3px 6px rgba(, , , .);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px ;
}
.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: ;
margin-right: ;
background-color: #fff;
border-width: 1px;
border-color: #ddd;
border-radius: 4px 4px ;
box-shadow: none;
}
}
.post-toc {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 1px #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: %;
}
.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: ;
padding: ;
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: %;
}
.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(, , , 0.699219) 1px 1px 0px;
white-space: nowrap;
width: %;
}
.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(, , , 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(, , , 0.699219) 1px 1px 0px;
white-space: nowrap;
width: 0px;
}
.comment .commentheader .commentdate {
background-color: transparent;
color: #;
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(, , , 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: #;
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: %;
word-wrap: break-word;
}
.comment .commentbody p {
margin-bottom: .5em;
margin-top: .5em;
margin-left: 0em;
margin-right: 0em;
}
.comment .commentbody pre {
border: 0px solid #ddd;
background-color: #eef;
padding: .4em;
}
.comment .commentbody pre code {
border: 0px solid #ddd;
}
.comment .commentbody code {
border: 1px solid #ddd;
background-color: #eef;
font-size: %;
padding: .2em;
}
/*demoæ ·å¼*/
#picker {
display: inline-block;
line-height: 1.428571429;
vertical-align: middle;
margin: 12px ;
}
#picker .webuploader-pick {
padding: 6px 12px;
display: block;
}
#uploader-demo .thumbnail {
width: 110px;
height: 110px;
}
#uploader-demo .thumbnail img {
width: %;
}
.uploader-list {
width: %;
overflow: hidden;
}
.file-item {
float: left;
position: relative;
margin: 20px 20px ;
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.6);
color: white;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
font-size: 12px;
z-index: ;
}
.upload-state-done:after {
content:"\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: ;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
position: absolute;
bottom: ;
right: 4px;
color: #4cae4c;
z-index: ;
}
.file-item .progress {
position: absolute;
right: 4px;
bottom: 4px;
height: 3px;
left: 4px;
height: 4px;
overflow: hidden;
z-index: ;
margin:;
padding: ;
border-radius: ;
background: transparent;
}
.file-item .progress span {
display: block;
overflow: hidden;
width: ;
height: %;
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();
}
@-webkit-keyframes progressmove {
% {
background-position: ;
}
% {
background-position: 17px ;
}
}
@-moz-keyframes progressmove {
% {
background-position: ;
}
% {
background-position: 17px ;
}
}
@keyframes progressmove {
% {
background-position: ;
}
% {
background-position: 17px ;
}
}
a.travis {
position: relative;
top: -4px;
right: 15px;
}
demo.css
#container {
color: #;
font-size: 12px;
}
#uploader .queueList {
margin: 20px;
/*border: 3px dashed #e6e6e6;*/
}
#uploader .queueList.filled {
padding: 17px;
margin: ;
border: 3px dashed transparent;
}
#uploader .queueList.webuploader-dnd-over {
border: 3px dashed #;
}
#uploader p {margin: ;}
.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(images/image.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: 30px;
*width: 120px;
color: #fff;
display: inline-block;
margin: auto 20px auto;
cursor: pointer;
box-shadow: 1px 1px rgba(, , , 0.1);
}
#uploader .placeholder .webuploader-pick-hover {
background: #00a2d4;
}
#uploader .placeholder .flashTip {
color: #;
font-size: 12px;
position: absolute;
width: %;
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: ;
padding: ;
}
#uploader .filelist:after {
content: '';
display: block;
width: ;
height: ;
overflow: hidden;
clear: both;
}
#uploader .filelist li {
width: 110px;
height: 110px;
background: url(images/bg.png) no-repeat;
text-align: center;
margin: 8px 20px ;
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: ;
left: ;
width: %;
overflow: hidden;
white-space: nowrap;
text-overflow : ellipsis;
top: 5px;
text-indent: 5px;
text-align: left;
}
#uploader .filelist li p.progress {
position: absolute;
width: %;
bottom: ;
left: ;
height: 8px;
overflow: hidden;
z-index: ;
margin: ;
border-radius: ;
background: none;
-webkit-box-shadow: ;
}
#uploader .filelist li p.progress span {
display: none;
overflow: hidden;
width: ;
height: %;
background: #1483d8 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();
}
@-webkit-keyframes progressmove {
% {
background-position: ;
}
% {
background-position: 17px ;
}
}
@-moz-keyframes progressmove {
% {
background-position: ;
}
% {
background-position: 17px ;
}
}
@keyframes progressmove {
% {
background-position: ;
}
% {
background-position: 17px ;
}
}
#uploader .filelist li p.imgWrap {
position: relative;
z-index: ;
line-height: 110px;
vertical-align: middle;
overflow: hidden;
width: 110px;
height: 110px;
-webkit-transform-origin: % %;
-moz-transform-origin: % %;
-o-transform-origin: % %;
-ms-transform-origin: % %;
transform-origin: % %;
-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: %;
}
#uploader .filelist li p.error {
background: #f43838;
color: #fff;
position: absolute;
bottom: ;
left: ;
height: 28px;
line-height: 28px;
width: %;
z-index: ;
}
#uploader .filelist li .success {
display: block;
position: absolute;
left: ;
bottom: ;
height: 40px;
width: %;
z-index: ;
background: url(images/success.png) no-repeat right bottom;
}
#uploader .filelist div.file-panel {
position: absolute;
height: ;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=,startColorstr='#80000000', endColorstr='#80000000')\;
background: rgba( , , , 0.5 );
width: %;
top: ;
left: ;
overflow: hidden;
z-index: ;
}
#uploader .filelist div.file-panel span {
width: 24px;
height: 24px;
display: inline;
float: right;
text-indent: -9999px;
overflow: hidden;
background: url(icons.png) no-repeat;
margin: 5px 1px 1px;
cursor: pointer;
}
#uploader .filelist div.file-panel span.rotateLeft {
background-position: -24px;
}
#uploader .filelist div.file-panel span.rotateLeft:hover {
background-position: ;
}
#uploader .filelist div.file-panel span.rotateRight {
background-position: -24px -24px;
}
#uploader .filelist div.file-panel span.rotateRight:hover {
background-position: -24px ;
}
#uploader .filelist div.file-panel span.cancel {
background-position: -48px -24px;
}
#uploader .filelist div.file-panel span.cancel:hover {
background-position: -48px ;
}
#uploader .statusBar {
height: 63px;
border-top: 1px solid #dadada;
padding: 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: 10px ;
}
#uploader .statusBar .progress span.percentage {
width: ;
height: %;
left: ;
top: ;
background: #1483d8;
position: absolute;
}
#uploader .statusBar .progress span.text {
position: relative;
z-index: ;
}
#uploader .statusBar .info {
display: inline-block;
font-size: 14px;
color: #;
}
#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: #;
padding: 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 上传演示例子的更多相关文章
- SpringMVC上传图片总结（2）--- 使用百度webuploader上传组件进行上传图片
SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片 在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...
- 百度webuploader上传 1
百度webupload网址:http://fex.baidu.com/webuploader/ 引入js和css <script src="../../Content/webuploa ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- easyui webuploader 文件上传演示
webuploader 上传首页 webuploader 上传前页面 webuploader 上传中页面 图就不上传了,状态会编程上传中 webuploader 已上传页面
- webuploader 上传文件 生成链接下载文件
最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...
- 支持移动端裁剪图片插件Jcrop（结合WebUploader上传）
(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...
- webuploader 上传文件参数设置
webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数 ...
- 【Spring Boot】关于上传文件例子的剖析
目录 Spring Boot 上传文件 功能实现 增加ControllerFileUploadController 增加ServiceStorageService 增加一个Thymeleaf页面 修改 ...
- webUploader上传大视频文件相关web.config配置
在webuploader上传大文件时必须配置一下,不然请求后台处理程序时,会请求超时.出现404! <system.web> <httpRuntime maxRequestLengt ...
随机推荐
- 7.qfilesystemmodel rowcount 为什么为0？ 一个简单的model类的例子
任务: 1.新建一个空的mainwindow项目 2.debug下编译得到一个文件夹,应用程序输出这个文件夹中的文件(不显示文件夹中的文件夹) 3.使用QFileSystemModel完成. 本例显示 ...
- jquery checkbox （选中和取消选中事件on("change")）做笔记
$("#btn_Company").attr("disabled", "disabled"); $("#agency") ...
- DIY的RPM包怎么签名呢 How to sign your custom RPM package with GPG key
https://gist.github.com/fernandoaleman/1376720 How to sign your custom RPM package with GPG key 这是文 ...
- Linux 终端命令行提示符的艺术--PS1进阶
话不多说,先瞅瞅我的命令行提示符(有点大): 图中命令行解释:┌[阳历日期/农历日期 时间]├[当前目录下目录数+当前目录下文件数][当前绝对目录]└[用户名@主机名-第几个终端 ╰_╯] 相关配置文 ...
- Java_枚举类
枚举类 枚举类不出来的时候只能如下写代码 //Student.java package cn.itcast.enumeration; public class Student { private St ...
- STL-- vector中resize()和reserve()区别
最近写了一个小型的STL--TinySTL.发现有一些基础的东西需要记录下来,所以我打算多写一些东西,方便以后查看. 先看看<C++ Primer>中对resize()函数两种用法的介绍: ...
- WPF开源界面库
WPF开源项目 WPF有很多优秀的开源项目,我以为大家都知道,结果,问了很多人,其实他们不知道.唉,太可惜了! 先介绍两个比较牛逼的界面库 1.MaterialDesignInXamlToolkit ...
- vue2.x学习笔记
1.使用模板template的时候必须要有跟节点,可以支持表达式,但不支持正则,想使用正则就用过滤器. 2.数据在显示的时候所带的HTML DOM直接显示,不会渲染,要渲染DOM,得用v-html. ...
- spring aop实现权限管理
问题源于项目开发 最近项目中需要做一个权限管理模块,按照之前同事的做法是在controller层的每个接口调用之前上做逻辑判断,这样做也没有不妥,但是代码重复率太高,而且是体力劳动,so,便有了如题所 ...
- myql 服务启动不了怎么办
今天,不小心手动将mysql 服务停掉后,怎么也启动不了,后面查了半天 ,终于知道要先将任务管理器里的mysql.exe 先Kill掉,然后可以启动了,记录一下