webuploader 使用

Html 部分

                    <div class="col-sm-9"><div class="uploader" id="game_images"><div class="message">可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴(IE不支持)，或者点击选择图片按钮，来体验此demo。</div><div class="wrapper"><div class="file-list"></div></div><div class="actions-area"><div class="actions"><div class="filePicker action">选择图片</div></div></div></div></div>

Js部分

        var w1 = new WebUploaderSupport({server: "/image/uploadImage",swf: "{{asset('js/Uploader.swf')}}",  // swf文件所处路径auto: true,paste: $('#game_images'),support: {thumbnailWidth: 180,thumbnailHeight: 180,uploader: "#game_images",serverFiles: {!! $gameImgArray !!},}});

引入web_upload.js

"use strict";
//https://github.com/joker-pper/WebUploaderSupport.git
/*** @param options key：support 自定义拓展属性（可以重写对应的属性,删除文件的逻辑可以重新进行实现.）, 其他配置参考webuploader配置,优先级理论大于support的配置*/
function WebUploaderSupport(options) {var that = this;var fileStatus =  {inited: "inited",  //初始状态queued: "queued",  //已经进入队列, 等待上传progress: "progress",  //上传中complete: "complete",  //上传完成error: "error",  //上传出错，可重试interrupt: "interrupt",  //上传中断，可续传invalid: "invalid",  //文件不合格，不能重试上传。会自动从队列中移除cancelled: "cancelled"  //文件被移除};WebUploaderSupport.fileStatus = fileStatus;var $fns = {log: function (content) {if(support.log && console) {console.log(content);}},logInfo: function () {var support = that.support;if(!support) {this.log("WebUploader does not support the browser you are using.");} else {if(this.getUploader() == null) {this.log("WebUploader has not inited, please use it after inited.");}}},getUploader: function () {var uploader = that.uploader;return uploader;},getFiles: function () {var result = null;var uploader = this.getUploader();if(uploader) {result = uploader.getFiles();}return result;},getFileSize: function (status) {var result = 0;var uploader = this.getUploader();if(uploader) {if(status != null) {result = uploader.getFiles(status).length;} else {result = uploader.getFiles().length;}}return result;},getInitedFileSize: function () { //获取inited状态的文件个数return this.getFileSize('inited');},retry: function (file) {var uploader = this.getUploader();if(uploader) {if(that.edit) {if(file != null) {uploader.retry(file);} else {uploader.retry();}} else {this.log("can't retry, because not in edit mode");}}this.logInfo();},upload: function () {var uploader = this.getUploader();if(uploader) {if(that.edit) {uploader.upload();} else {this.log("can't upload, because not in edit mode");}}this.logInfo();},removeFileWithItem: function (file) {var uploader = that.uploader;if(file) {support.removeFileItem(support.getItem(file));if(uploader) {uploader.removeFile(file.id, true);}}}};that.$fns = $fns;options = options || {};var support = {$fns: {},  //公共函数$elements: {},  //区域jquery元素edit: true,uploader: ".uploader",  //上传区域容器选择器dndWrapper: ".wrapper",  //拖拽区域选择器chooseFileBtn: ".filePicker",  //选择文件的按钮选择器uploadFileBtn: ".uploadFile",  //上传文件的按钮选择器fileList: ".file-list",  //显示文件列表的区域选择器fileListHeight: 150,  //初始默认高度log: false,    //是否打印信息multiple: true,  //默认多选thumbnailWidth: 150,thumbnailHeight: 150,fileSize: -1,  //文件总个数, -1时无限制ratio: (function () {return window.devicePixelRatio || 1;  //优化retina, 在retina下这个值是2})(),getActualThumbnailWidth: function () {var that = this;var ratio = that.ratio;return that.thumbnailWidth * ratio;},getActualThumbnailHeight: function () {var that = this;var ratio = that.ratio;return that.thumbnailHeight * ratio;},showPreview: function (uploader, $item, $img, file) {   //显示文件中的预览效果var that = this;// 缩略图大小var thumbnailWidth = that.getActualThumbnailWidth(), thumbnailHeight = that.getActualThumbnailHeight();that.setItemStyle($item);  //设置item宽高uploader.makeThumb(file, function (error, src) {if (error) {var $replace = $('<div class="preview"></div>').css({height: that.thumbnailHeight,width: that.thumbnailWidth}).append($('<div class="preview-tips">不能预览</div>'));$img.replaceWith($replace);return;}$img.attr('src', src);}, thumbnailWidth, thumbnailHeight);},getItem: function (file) {  //获取$itemreturn $("#" + file.id);},setItemStyle: function ($item) {  //设置缩略图所在容器的宽高,默认是均150px,用于加载文件预览时设置if($item) {var that = this;var thumbnailWidth = that.thumbnailWidth, thumbnailHeight = that.thumbnailHeight;$item.css({width: thumbnailWidth, height: thumbnailHeight});  //设置$item宽高}},loadUploadFileBtnStyle: function () {  //用于加载上传按钮的样式var $fns = this.$fns;var $uploadFileBtn = this.$elements.$uploadFileBtn;if($fns && $uploadFileBtn) {var initedSize = $fns.getInitedFileSize();if (initedSize === 0) {  //inited 文件个数$uploadFileBtn.addClass("disabled"); //上传按钮禁用} else {$uploadFileBtn.removeClass("disabled");  //移除上传按钮的禁用样式}}},retryFile: function ($item, file) {var $fns = this.$fns;$fns.retry(file);},fileQueued: function (uploader, file, $fileList, $uploadFileBtn, $chooseFileBtn, removeFileWithItem) {  //文件被添加进队列var that = this;var uploader_id = $(that)[0].uploader.slice(1)var $item = $('<div id="' + file.id + '" class="file-item thumbnail">' +'<div class="file-info">' + file.name + '</div>' +'<img/>' +'<div class="file-delete">' + '<button type="button" class="btn btn-info">' + '删除</button></div>' +'<div class="file-retry">' + '<button type="button" class="btn btn-info">' + '重试</button></div>' +'<div class="state ready">等待上传...</div>' +'<div class="progress"><div class="progress-bar"></div></div>' +'<input type="hidden" name="'+uploader_id+'[' + file.id + '][imagename]" value="' + file.name + '">' +'</div>');that.showPreview(uploader, $item, $item.find("img"), file);  //显示预览效果$fileList.append($item);  //显示在文件列表中that.loadUploadFileBtnStyle();  //加载上传按钮样式$item.on("click", '.btn', function () {var $this = $(this);if($this.parents(".file-retry")[0]) {that.retryFile($item, file);} else if ($this.parents(".file-delete")[0]) {that.deleteFile($item, file, that.deleteServerFileCallback, removeFileWithItem);}});that.loadChooseFileBtnStyle($chooseFileBtn, $uploadFileBtn);},fileDequeued: function (uploader, file, $fileList, $uploadFileBtn) {this.loadUploadFileBtnStyle();},uploadProgress: function (file, percentage) {  //文件上传过程中创建进度条var $item = this.getItem(file);$item.removeClass("retry");  //移除重试classvar $percent = $item.find('.progress .progress-bar');$item.find('.file-delete, .preview-tips').addClass("uploading");  //隐藏删除按钮、提示文字$item.find('.progress').show();  //显示进度条$percent.css('width', percentage * 100 + '%');},uploadComplete: function (file) {  //完成上传时，无论成功或者失败var $item = this.getItem(file);$item.find('.progress').fadeOut();$item.find('.file-delete, .preview-tips').removeClass("uploading");  //显示删除按钮、提示文字var $uploadFileBtn = this.$elements.$uploadFileBtn;var $chooseFileBtn = this.$elements.$chooseFileBtn;this.loadChooseFileBtnStyle($chooseFileBtn, $uploadFileBtn);this.loadUploadFileBtnStyle();},uploadSuccess: function (file, data, uploadSuccessCallbck, $chooseFileBtn, $uploadFileBtn) {   // 文件上传完成后var $item = this.getItem(file),$state = $item.find('.state'),uploader_id = $(this)[0].uploader.slice(1)$item.find('.progress').hide();if (data.status) {  //上传成功时var $input = '<input type="hidden" name="'+uploader_id+'[' + file.id + '][imageurl]" value="' + data.attrs['data-delete-url'] + '">'$('#'+file.id).append($input)if(uploadSuccessCallbck && typeof uploadSuccessCallbck === "function") {uploadSuccessCallbck($item, data);  //用于标识为服务端文件}if (!$state.hasClass('success')) {$state.attr("class", "state success");$state.text('上传成功');}$item.removeClass("retry");} else {if (!$state.hasClass('error')) {$state.attr("class", "state error");$state.text('上传失败');}$item.addClass("retry");}},uploadSuccessCallbck: function ($item, data) {  //上传文件成功时的回调,用于标识为服务端文件if($item && data) {var attrs = data.attrs;for(var key in attrs) {$item.attr(key, attrs[key]);}}},/***** @param uploader* @param file* @param files* @param fileSize  --- 总个数* @param removeFileWithItem  --- 用于移除文件及其显示的内容* @returns {boolean} 为true时可以添加到webuploader中并进行显示*/beforeFileQueued: function(uploader, file, files, fileSize, removeFileWithItem, $chooseFileBtn, $uploadFileBtn, beforeFileQueuedCallback) {if(fileSize < 1) {  //无限制个数return true;}var that = this;var currentFileSize = that.getCurrentFileSize();  //当前总个数var flag = false;var edit = that.edit;if(edit) {  //可编辑模式时if(currentFileSize < fileSize) {flag = true;}}if(beforeFileQueuedCallback && typeof beforeFileQueuedCallback === "function") {  //执行beforeFileQueuedCallback回调函数beforeFileQueuedCallback(that, flag, edit, uploader, file, fileSize, currentFileSize);}return flag;},/**** @param that  --- 当前对象,可以访问其他属性及方法* @param result  --- beforeFileQueued返回的结果值* @param result  --- 是否可编辑* @param uploader  --- 当前uploader实例* @param file  --- file对象* @param fileSize  --- 总文件个数* @param currentFileSize  --- 当前文件个数*/beforeFileQueuedCallback: function (that, result, edit, uploader, file, fileSize, currentFileSize) {},  //回调函数uploadError: function (file) {  //文件上传失败后var $item = this.getItem(file),$state = $item.find('.state');if (!$state.hasClass('error')) {$state.attr("class", "state error");$state.text('上传失败');}$item.addClass("retry");this.loadUploadFileBtnStyle();},uploadFinished: function () {},  //文件上传完后触发serverFileAttrName: "data-server-file",  //服务端文件的属性名称getIsServerFile: function ($item) {  //判断文件是否是服务端文件var val = $item && $item.attr(this.serverFileAttrName);if(val && val === "true") {return true;}return false;},getServerFileSize: function () {  //获取服务端文件的个数var $fileList = this.$elements.$fileList;var size = 0;var serverFileAttrName = this.serverFileAttrName;if($fileList) {size = $fileList.find(".file-item["+serverFileAttrName+"='true']").size();}return size;},getItemSize: function () {  //获取当前item的文件个数var $fileList = this.$elements.$fileList;var size = 0;if($fileList) {size = $fileList.find(".file-item").size();}return size;},getCurrentFileSize: function () {  //获取当前uploader实例中文件的个数var fileStatus = WebUploaderSupport.fileStatus;var $fns = this.$fns;var initedSize = $fns.getFileSize(fileStatus.inited);  //初始状态个数var errorSize = $fns.getFileSize(fileStatus.error);  //上传失败个数var size = initedSize + errorSize + this.getServerFileSize();//最终加上服务端文件个数var itemSize = this.getItemSize();var result = itemSize > size ? itemSize : size;return result;},removeFileItem: function($item) {  //移除$itemif($item && $item[0]) {$item.off().remove();}},deleteFile: function ($item, file, deleteServerFileCallback, removeFileWithItem) {  //删除文件的处理逻辑，包含服务端if(this.getIsServerFile($item)) {  //服务端时if(this.edit) {this.deleteServerFile($item, deleteServerFileCallback);} else {this.$fns.log("can't delete server file");}} else {if(removeFileWithItem && file) {removeFileWithItem(file);}var $chooseFileBtn = this.$elements.$chooseFileBtn, $uploadFileBtn = this.$elements.$uploadFileBtn;this.loadChooseFileBtnStyle($chooseFileBtn, $uploadFileBtn);}},deleteServerFileAttrName: "data-delete-url",deleteServerFileAttrId: "data-id",deleteServerFile: function ($item, deleteServerFileCallback) {  //删除服务器文件var that = this;var url = $item && $item.attr(that.deleteServerFileAttrName);var id = $item && $item.attr(that.deleteServerFileAttrId);console.log(url)if(url) {$.ajax({dataType: "json",type: "post",data:{imageurl:url,id:id},url: "/upload/delete",success: function (json) {if(deleteServerFileCallback && typeof deleteServerFileCallback === "function") {deleteServerFileCallback(that, $item, json);  //通过callback执行业务操作var $chooseFileBtn = that.$elements.$chooseFileBtn, $uploadFileBtn = that.$elements.$uploadFileBtn;that.loadChooseFileBtnStyle($chooseFileBtn, $uploadFileBtn);}}});}},  //当是服务端文件时执行,依赖于getIsServerFile的判断结果deleteServerFileCallback: function (that, $item, data) { //deleteServerFile 响应成功时的回调处理, that指当前对象if(data.status) {that.removeFileItem($item);} else {alert(data.content);}},serverFiles: [],  //加载服务端的数据,当前为 [{name:string, src: string, attrs: {}}]init: function (data, $fileList, $chooseFileBtn, $uploadFileBtn) { //初始化服务端数据,及加载样式var that = this;var edit = that.edit;var $files = null;var thumbnailHeight = that.thumbnailHeight;$fileList.css({"min-height": thumbnailHeight + 20});  //设置该区域最小高度为thumbnailHeight + 20px//加载服务端数据if(data && data.length > 0) {for(var i in data) {var item = data[i];var html = '<div class="file-item thumbnail">' +'<div class="file-info">' + (item.name || "") + '</div>';html += '<div class="file-delete">' + '<button type="button" class="btn btn-info">' + '删除</button></div>';html += '<div class="progress"><div class="progress-bar"></div></div>' + '</div>';var $preview;  //根据文件后缀进行展示预览结果if(item.name != null && /(.jpg|.png|.gif|.bmp|.jpeg)$/.test(item.name.toLocaleLowerCase())) {$preview = $('<img src="'+ item.src + '"/>');} else {var thumbnailWidth = that.thumbnailWidth, thumbnailHeight = that.thumbnailHeight;$preview = $('<div class="preview"></div>').css({height: thumbnailHeight,width: thumbnailWidth}).append($('<div class="preview-tips">不能预览</div>'));}var $item = $(html);$item.append($preview);if(!edit) {$item.addClass("not-edit");}that.setItemStyle($item);  //以缩略图大小设置$item宽高if($item && item) {var attrs = item.attrs;for(var key in attrs) {  //设置$item属性值$item.attr(key, attrs[key]);}}if(i === "0") {$files = $item;} else {$files = $files.add($item);}}}if($files) { //加载服务端数据$fileList.append($files);$files.on('click', '.file-delete .btn', function () {var $item = $(this).parents(".file-item");that.deleteFile($item, null, that.deleteServerFileCallback);});}that.loadChooseFileBtnStyle($chooseFileBtn, $uploadFileBtn);},editChange: function (edit) {  //用于根据edit改变时进行设置webuploader模式var that = this;that.edit = edit;var $chooseFileBtn = that.$elements.$chooseFileBtn, $uploadFileBtn = that.$elements.$uploadFileBtn;var $fileList = that.$elements.$fileList;if(edit) {$fileList.children().removeClass("not-edit");} else {$fileList.children().addClass("not-edit");}that.loadChooseFileBtnStyle($chooseFileBtn, $uploadFileBtn);},getChooseFileLabel: function ($chooseFileBtn) {  //获取当前上传文件按钮对应的label,该label用于触发选择文件var $label = null;if($chooseFileBtn) {if($chooseFileBtn.hasClass("webuploader-container")) {$label = $chooseFileBtn.find(".webuploader-element-invisible").next("label");} else {$label = $(".webuploader-container").not(this.chooseFileBtn).find(".webuploader-element-invisible").next("label");}}return $label;},loadChooseFileBtnStyle: function ($chooseFileBtn, $uploadFileBtn) {  //根据文件个数进行展示选择文件的按钮(用于上传完成时,删除文件时，添加到队列时， 初次加载服务端数据时)var that = this;var $fns = that.$fns;var fileSize = that.fileSize;var $actions = $chooseFileBtn.parents(".actions");var $actionsArea = $actions.parent(".actions-area");var $label = that.getChooseFileLabel($chooseFileBtn);if (that.edit) {  //可编辑时$actionsArea.css("height", "");$actions.show();var uploader = $fns.getUploader();if(uploader) {uploader.refresh();  //解决label按钮点击无反应}if (fileSize > 0) {var currentSize = that.getCurrentFileSize();if (fileSize === currentSize) {$label && $label.hide();$chooseFileBtn.hide();$uploadFileBtn.addClass("right");} else {$label && $label.show();$chooseFileBtn.show();$uploadFileBtn.removeClass("right");}} else {$label && $label.show();$chooseFileBtn.show();$uploadFileBtn.removeClass("right");}} else {  //不可编辑时$actions.hide();$actionsArea.css("height", 10);if ($label) {$label.hide();}}}};support = $.extend(support, options.support);support.$fns = $fns;  //设置support方法that.supports = support;var multiple = support.multiple;delete options.support;  //删除额外的support属性var $uploader = $(support.uploader),$chooseFileBtn = $uploader.find(support.chooseFileBtn),  //选择文件的按钮选择器$fileList = $uploader.find(support.fileList),  //显示文件列表的区域$uploadFileBtn = $uploader.find(support.uploadFileBtn),  //上传文件的按钮$dndWrapper = $uploader.find(support.dndWrapper);  //支持拖拽到此区域var $elements = {$uploader: $uploader,$chooseFileBtn: $chooseFileBtn,$fileList: $fileList,$uploadFileBtn: $uploadFileBtn,$dndWrapper: $dndWrapper};support.$elements = $elements;var defaultOption = {accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/!*'},pick: {id: $chooseFileBtn,multiple: multiple},disableGlobalDnd: true,dnd: $dndWrapper,  //支持拖拽到此区域resize: false,compress: false,  //不压缩图片,原图swf: 'Uploader.swf'  // swf文件路径};var currentOptions = $.extend(true, {}, defaultOption, options);  //当期webuploader的配置, options中的优先级最高if(document.all || window.ActiveXObject || "ActiveXObject" in window) {if(currentOptions.paste != null) {currentOptions.paste = null;$fns.log("ie is not support paste");}}that.edit = support.edit;that.support = WebUploader.Uploader.support(); //获取是否支持webuploader上传jQuery(function($) {var $ = jQuery;$fileList.css({"min-height": support.fileListHeight + 20});var uploader;try {if(!that.support) {support.init(support.serverFiles, $fileList, $chooseFileBtn, $uploadFileBtn);$fns.log("WebUploader does not support the browser you are using.");return;} else {uploader = WebUploader.create(currentOptions);  //实例化webuploadersupport.init(support.serverFiles, $fileList, $chooseFileBtn, $uploadFileBtn);}}  catch (e) {if(console) {console.log(e);}}if(uploader) {that.uploader = uploader;if($uploadFileBtn && $uploadFileBtn[0]) {$uploadFileBtn.click(function () {$fns.upload();});}//文件被添加进队列时uploader.on('fileQueued', function (file) {support.fileQueued && support.fileQueued(uploader, file, $fileList, $uploadFileBtn, $chooseFileBtn, $fns.removeFileWithItem);});//移除文件时uploader.on('fileDequeued', function (file) {support.fileDequeued && support.fileDequeued(uploader, file, $fileList, $uploadFileBtn);});uploader.on('uploadProgress', function (file, percentage) {support.uploadProgress && support.uploadProgress(file, percentage);});//完成上传时，无论成功或者失败uploader.on('uploadComplete', function (file) {support.uploadComplete && support.uploadComplete(file);});// 文件上传完成后，添加相应的样式(响应成功)uploader.on('uploadSuccess', function (file, data) {support.uploadSuccess && support.uploadSuccess(file, data, support.uploadSuccessCallbck, $chooseFileBtn, $uploadFileBtn);});// 文件上传失败，显示上传出错（上传失败出现错误状态码时）uploader.on('uploadError', function (file) {support.uploadError && support.uploadError(file);});// 当文件被加入队列之前触uploader.on('beforeFileQueued', function (file) {var files = uploader.getFiles();return support.beforeFileQueued && support.beforeFileQueued(uploader, file, files, support.fileSize, $fns.removeFileWithItem, $chooseFileBtn, $uploadFileBtn, support.beforeFileQueuedCallback);});//当前uploader实例文件上传完成后触发uploader.on("uploadFinished", function () {support.uploadFinished && support.uploadFinished();});}});}//上传该uploader实例的文件
WebUploaderSupport.prototype.upload = function () {this.$fns.upload();
}
//判断是否正在上传中
WebUploaderSupport.prototype.isInProgress = function () {var flag = false;var uploader = this.uploader;if(uploader) {flag = uploader.isInProgress();}this.$fns.logInfo();return flag;
}WebUploaderSupport.prototype.retry = function () {this.$fns.retry();
}WebUploaderSupport.prototype.getSupports = function () {var supports = this.supports;return supports;
}
//更换模式
WebUploaderSupport.prototype.editChange = function (edit) {if(typeof edit != "boolean") {throw new Error("the param type must be boolean");}var supports = this.supports;this.edit = edit;supports.editChange(edit);
}

引入Css

.uploader {position: relative;padding: 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;
}.uploader:after {display: block;content: "";overflow: hidden;clear: both;
}.uploader .message {font-size: 16px;margin-bottom: 20px;
}.uploader .wrapper {text-align: center;border: 3px dashed #ccc;/* background: url(../images/image.png) center 93px no-repeat;*/color: #cccccc;font-size: 18px;position: relative;
}.file-list {list-style: none;margin: 0;padding: 0;
}.file-list:after {display: block;content: "";overflow: hidden;clear: both;
}.file-list .file-item {float: left;width: 150px;height: 150px;margin: 10px;border: 1px solid;overflow: hidden;position: relative;
}.file-list .file-item img {width: 100%;height: 100%;
}.file-list .file-item .file-delete {display: none;position: absolute;width: 100px;height: 30px;left: 50%;margin-left: -50px;margin-top: -15px;top: 50%;z-index: 1;
}.file-list .file-item .file-retry {display: none;position: absolute;width: 100px;height: 30px;left: 50%;margin-left: -50px;margin-top: -15px;top: 50%;z-index: 1;
}/*重试时显示重试按钮*/
.file-list .file-item.retry:hover .file-retry {display: block;
}/*删除重试按钮样式*/
.file-list .file-item button {outline: none !important;border: 0;padding: 5px 12px;opacity: 0.9;color: #fff!important;text-align: center;border-radius: 3px;
}/*删除按钮*/
.file-list .file-item .file-delete button {background: #f14641;
}.file-list .file-item .file-delete button:hover {background: #f1281a;
}.file-list .file-item .file-retry button {background: #daa7ff;
}.file-list .file-item .file-retry button:hover {background: #bf8cff;
}/*重试时进度条隐藏*/
.file-list .file-item.retry .progress {display: none!important;
}.file-list .file-item:hover .file-delete {display: block;
}/*不能预览时的提示*/
.file-list .file-item .preview-tips {position: absolute;width: 100px;height: 20px;font-size: 16px;left: 50%;margin-left: -50px;color: #949390;margin-top: -10px;top: 50%;overflow: hidden;z-index: 1;
}/*鼠标经过当前item时隐藏提示不能预览的内容*/
.file-list .file-item:hover .preview-tips {z-index: -1;
}
/*鼠标经过当前item时如果是不能编辑则不隐藏文字*/
.file-list .file-item.not-edit:hover .preview .preview-tips {z-index: 1;
}
.file-list .file-item.not-edit:hover .file-delete {display: none;
}.file-list .file-item.not-edit:hover .file-retry {display: none;
}.file-item .file-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: 1;
}.file-item .state {position: absolute;left: 4px;top: 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: 1;
}.file-item .state.ready {background: rgba(169, 64, 64, 0.6);
}.file-item .state.success {background: rgba(68, 247, 22, 0.6);
}.file-item .state.error {background: red;
}/*进度条*/
.file-item .progress {display: none;position: absolute;width: 120px;height: 14px;left: 50%;margin-left: -60px;margin-top: -7px;top: 50%;
}.actions-area {height: 55px;position: relative;
}.actions {position: absolute;top: 15px;right: 0px;
}.actions .action {display: inline-block;float: left;height: 40px;
}.upload-btn {outline: none !important;cursor: pointer;border: 0;padding: 10px 15px;background: #76d67d!important;color: #fff!important;text-align: center;border-radius: 3px;overflow: hidden;margin-left: 14px;
}.upload-btn:hover {background: #4bb953 !important;
}.upload-btn.disabled {background: #848080!important;
}.upload-btn.disabled:hover {background: #404040!important;
}/*上传时使某些内容不显示*/
.uploading {z-index: -1!important;
}

最后记得引入官方Js和Css

webuploader.min.js

webuploader.css

webuploader 使用相关推荐

php webuploader大文件,web uploader 上传大文件总结
由于业务需要,需要上传大文件,已有的版本无法处理IE版本,经过调研,百度的 webuploader 支持 IE 浏览器,而且支持计算MD5值,进而可以实现秒传的功能. 大文件上传主要分为三部分,预上传 ...
webuploader自己造的坑
2019独角兽企业重金招聘Python工程师标准>>> webuploader是百度的上传插件,支持html5和flash上传,点击下载因为每次使用的时候都要配置一些属性,就简单的 ...
webuploader上传文件，后台Java接收
前台html页面: <!DOCTYPE html> <html> <head> <title>Insert title here</title&g ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
php使用webuploader表单上传文件覆盖文件key doesn't match with scope的问题和解决思路
需求:因为一个记录只要一个文件即可,所以文件名称是根据id来做变换的,这样就能保证,文件是一个,如果文件名随机的,就会产生很多垃圾文件.上传到七牛的时候,第一次可以正常上传,但第二次再上传同一个文件, ...
使用百度webuploader上传组件直接上传到七牛云表单上传
上一节我们已经讲过了使用表单上传,这一节我们来讲一下使用webuploader来进行异步上传到七牛云服务器. 点击查看,七牛云表单上传 1.引入webuploader的js和样式表 2.写js代码其 ...
基于webuploader.js的单图片上传封装
HTML代码 <div class="manageImgUp">点击图片上传</div> <div class="manageImgUpLc ...
js插件---WebUploader 如何接收服务端返回的数据
js插件---WebUploader 如何接收服务端返回的数据一.总结一句话总结: uploadSuccess有两个参数,一个是file(上传的文件信息),一个是response(服务器返回的信息 ...
js插件---webuploader 使用（lavarel中使用）
js插件---webuploader 使用(lavarel中使用) 一.总结一句话总结: 多去看几个具体使用的实例,很多blog教程都有坑,多看几个交叉印证可以没那么多坑 1.webuploader ...

webuploader 使用

webuploader 使用相关推荐

最新文章

热门文章