百度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 ...
随机推荐
- ZROI2018提高day4t2
传送门 分析 我们二分球的直径,然后就像奶酪那道题一样,将所有距离相遇直径的点用并查集连在一起,然后枚举所有与上边的顶距离小于直径的点和所有与下边的距离小于直径的点,如果它们被并查集连在一起则代表这个 ...
- can基础知识介绍
1.什么是can 2.can的特点 2.物理层特征 我们使用ISO11898标准,物理层特征如图所示 3.帧的种类介绍 实际上有一些帧是有硬件来实现的. 4.数据帧介绍 5.总线仲裁 6.位时序(用于 ...
- ubuntu16.04.2安装tftp服务器
1.安装 $ apt-get install tftp-hpa tftpd-hpa tftp-hpa是客户端 tftpd-hpa是服务器 2.创建目录 $ mkdir /tftpboot 这是创建tf ...
- php获取数据库结果集
PHP经常要访问数据库提前数据库里面的数据,那么该怎么样去提前数据呢? 提取数据库代码如下: <?phpinclude("conn.php");//数据库连接 $sql=&q ...
- Linux文件概念
大多数资源,Linux都是以文件的方式来访问. Linux系统上的文件部分类型说明 –普通文件. •就是储存到磁盘上大家所操作的各种数据文件: –管道文件. •是一个从一端发送数据,从另一端接收数据的 ...
- Android ExpandableListView的使用
一.MainActivity要继承ExpandableListActivity.效果是当单击ListView的子项是显示另一个ListView. package com.example.explear ...
- 验证视图状态MAC失败的解决办法
在网上搜寻了很久看了很多关于MAC验证视图状态失败的解决方法.大部分人都说是在页里或web.config里加 EnableEventValidation="false" Enabl ...
- 个人JS体系完善（一）
个人JS体系整理(一) 一. 原型 JS每声明一个Function,都有Prototype原型,Prototype原型是函数的一个默认属性,在函数的创建过程中由JS编译器自动添加,也就是说每当生产一个 ...
- 利用PIL实现图片的切割
功能描述: 切图前是一张图,切图后就是九张图!!! 展示: 实现流程图: 代码实现 # -*- coding: utf-8 -*- ''' 将一张图片填充为正方形后切为9张图 ''' from PIL ...
- 写RestApi需要注意些什么？
PS1="\n[\e[32;1m]([\e[37;1m]\u[\e[32;1m])-([\e[37;1m]jobs:\j[\e[32;1m])-([\e[37;1m]\w[\e[32;1m] ...