前言

本篇文章上一篇:

对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

此篇是在上面的基础上扩展出来专门上传图片的控件封装.

首先我们看看效果:

正文

使用方式同样很简单,首先创建HTML容器如下:

  1. <div id="uploader" class="uploaderPic"> </div>

然后页面加载完成后渲染:

  1.     $(function () {
  2.         $("#uploader").powerWebUpload({ auto: false });
  3.     })

就搞定了.

下面还是老规矩,直接上源码:

  1. /*
  2. 基于百度webuploader的图片上传JQ插件(需引用JQ)
  3. 作者:顾振印
  4. 时间:2016-07-07
  5. */
  6.  
  7. (function ($, window) {
  8.     var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../..";
  9.     var UpdataLoadarrayObj = new Array();
  10.     function SuiJiNum() {
  11.         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  12.     }
  13.  
  14.     function initWebUpload(item, options) {
  15.  
  16.         if (!WebUploader.Uploader.support()) {
  17.             var error = "上传控件不支持您的浏览器！请尝试升级flash版本或者使用Chrome引擎的浏览器。<a target='_blank' href='http://se.360.cn'>下载页面</a>";
  18.             if (window.console) {
  19.                 window.console.log(error);
  20.             }
  21.             $(item).text(error);
  22.             return;
  23.         }
  24.         var target = $(item);//容器
  25.         if (target.find(".uploader-list").length > 0) {
  26.             return;
  27.         }
  28.         //创建默认参数
  29.         var defaults = {
  30.             auto: true,
  31.             hiddenInputId: "uploadifyHiddenInputId", // input hidden id
  32.             onAllComplete: function (event) { }, // 当所有file都上传后执行的回调函数
  33.             onComplete: function (event) { },// 每上传一个file的回调函数
  34.             fileNumLimit: undefined,//验证文件总数量, 超出则不允许加入队列
  35.             fileSizeLimit: undefined,//验证文件总大小是否超出限制, 超出则不允许加入队列。
  36.             fileSingleSizeLimit: undefined,//验证单个文件大小是否超出限制, 超出则不允许加入队列
  37.             PostbackHold: false
  38.         };
  39.         var opts = $.extend(defaults, options);
  40.         var hdFileData = $("#" + opts.hiddenInputId);
  41.         var pickerid = "";
  42.         if (typeof guidGenerator36 != 'undefined')//给一个唯一ID
  43.             pickerid = guidGenerator36();
  44.         else
  45.             pickerid = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  46.         var uploaderStrdiv = '<div class="webuploader">'
  47.         if (opts.auto) {
  48.             uploaderStrdiv =
  49.             '<div  class="uploader-list"></div>' +
  50.             '<div class="btns">' +
  51.             '<div id="' + pickerid + '">选择文件</div>' +
  52.             '</div>'
  53.  
  54.         } else {
  55.             uploaderStrdiv =
  56.             '<div  class="uploader-list"></div>' +
  57.             '<div class="btns">' +
  58.             '<div id="' + pickerid + '">选择文件</div>' +
  59.             '<button class="webuploadbtn">开始上传</button>' +
  60.             '</div>'
  61.         }
  62.         uploaderStrdiv += '<div style="display:none" class="UploadhiddenInput" >\
  63.                          </div>'
  64.         uploaderStrdiv += '</div>';
  65.         target.append(uploaderStrdiv);
  66.  
  67.         var $list = target.find('.uploader-list'),
  68.              $btn = target.find('.webuploadbtn'),//手动上传按钮备用
  69.              state = 'pending',
  70.              $hiddenInput = target.find('.UploadhiddenInput')
  71.         var jsonData = {
  72.             fileList: []
  73.         };
  74.         debugger;
  75.         var webuploaderoptions = $.extend({
  76.  
  77.             // swf文件路径
  78.             swf: applicationPath + '/Scripts/webuploader/Uploader.swf',
  79.             // 文件接收服务端。
  80.             server: '/Home/AddFile',
  81.             deleteServer: '/Home/DeleteFile',
  82.             // 选择文件的按钮。可选。
  83.             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  84.             pick: '#' + pickerid,
  85.             //不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
  86.             resize: false,
  87.             runtimeOrder: 'flash',
  88.             fileNumLimit: opts.fileNumLimit,
  89.             fileSizeLimit: opts.fileSizeLimit,
  90.             fileSingleSizeLimit: opts.fileSingleSizeLimit,
  91.             //限制只能上传图片,格式gif,jpg,jpeg,bmp,png
  92.             accept: {
  93.                 title: 'Images',
  94.                 extensions: 'gif,jpg,jpeg,bmp,png',
  95.                 mimeTypes: 'image/*'
  96.             }
  97.         },
  98.         opts);
  99.         var uploader = WebUploader.create(webuploaderoptions);
  100.         UpdataLoadarrayObj[$(item)[0].id] = uploader;
  101.        var  ratio = window.devicePixelRatio || 1
  102.  
  103.         // 缩略图大小
  104.        var thumbnailWidth = 110 * ratio
  105.        var thumbnailHeight = 110 * ratio
  106.        if (opts.auto) {
  107.            // 优化retina, 在retina下这个值是2
  108.  
  109.            uploader.on('fileQueued', function (file) {
  110.  
  111.                var $li = $('<div id="' + $(item)[0].id + file.id + '" class="file-item thumbnail">' +
  112.                            '<img>' +
  113.                            '<div class="info">' + file.name + '</div>' +
  114.                           '</div>');
  115.  
  116.                $img = $li.find('img');
  117.                uploader.makeThumb(file, function (error, src) {
  118.                    if (error) {
  119.                        $img.replaceWith('<span>不能预览</span>');
  120.                        return;
  121.                    }
  122.  
  123.                    $img.attr('src', src);
  124.                }, thumbnailWidth, thumbnailHeight);
  125.  
  126.                // $list为容器jQuery实例
  127.                $list.append($li);
  128.  
  129.                $btns = $('<div class="file-panel">' +
  130.               '<span class="cancel">删除</span>').appendTo($li)
  131.                uploader.upload();
  132.            });
  133.        } else {
  134.            uploader.on('fileQueued', function (file) {//队列事件
  135.  
  136.                var $li = $('<div id="' + $(item)[0].id + file.id + '" class="file-item thumbnail">' +
  137.                            '<img>' +
  138.                            '<div class="info">' + file.name + '</div>' +
  139.                           '</div>');
  140.  
  141.                $img = $li.find('img');
  142.                uploader.makeThumb(file, function (error, src) {
  143.                    if (error) {
  144.                        $img.replaceWith('<span>不能预览</span>');
  145.                        return;
  146.                    }
  147.  
  148.                    $img.attr('src', src);
  149.                }, thumbnailWidth, thumbnailHeight);
  150.  
  151.                // $list为容器jQuery实例
  152.                $list.append($li);
  153.  
  154.                $btns = $('<div class="file-panel">' +
  155.               '<span class="cancel">删除</span>').appendTo($li)
  156.            });
  157.        }
  158.         // 文件上传过程中创建进度条实时显示。
  159.         uploader.on('uploadProgress', function (file, percentage) {
  160.             var $li = $('#' + $(item)[0].id + file.id),
  161.                 $percent = $li.find('.progress span');
  162.  
  163.             // 避免重复创建
  164.             if (!$percent.length) {
  165.                 $percent = $('<p class="progress"><span></span></p>')
  166.                         .appendTo($li)
  167.                         .find('span');
  168.             }
  169.  
  170.             $percent.css('width', percentage * 100 + '%');
  171.         });
  172.  
  173.         // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  174.         uploader.on('uploadSuccess', function (file, response) {
  175.             $('#' + $(item)[0].id + file.id).addClass('upload-state-done');
  176.             var $li = $('#' + $(item)[0].id + file.id),
  177.                 $error = $li.find('div.error');
  178.  
  179.             // 避免重复创建
  180.             if (!$error.length) {
  181.                 $error = $('<div class="success"></div>').appendTo($li);
  182.             }
  183.             if (response.state == "error") {
  184.                 $error.text(response.message);
  185.             } else {
  186.                 $error.text('上传完成');
  187.                 $hiddenInput.append('<input type="text" id="hiddenInput' + $(item)[0].id + file.id + '" class="hiddenInput" value="' + response.message + '" />')
  188.             }
  189.  
  190.         });
  191.  
  192.         // 文件上传失败，显示上传出错。
  193.         uploader.on('uploadError', function (file) {
  194.             var $li = $('#' + $(item)[0].id + file.id),
  195.                 $error = $li.find('div.error');
  196.  
  197.             // 避免重复创建
  198.             if (!$error.length) {
  199.                 $error = $('<div class="error"></div>').appendTo($li);
  200.             }
  201.  
  202.             $error.text('上传失败');
  203.         });
  204.  
  205.         // 完成上传完了，成功或者失败，先删除进度条。
  206.         uploader.on('uploadComplete', function (file, response) {
  207.             $('#' + $(item)[0].id + file.id).find('.progress').remove();
  208.         });
  209.  
  210.         //uploader.on('uploadProgress', function (file, percentage) {//进度条事件
  211.         //    var $li = target.find('#' + $(item)[0].id + file.id),
  212.         //        $percent = $li.find('.progress .bar');
  213.  
  214.         //    // 避免重复创建
  215.         //    if (!$percent.length) {
  216.         //        $percent = $('<span class="progress">' +
  217.         //            '<span  class="percentage"><span class="text"></span>' +
  218.         //          '<span class="bar" role="progressbar" style="width: 0%">' +
  219.         //          '</span></span>' +
  220.         //        '</span>').appendTo($li).find('.bar');
  221.         //    }
  222.  
  223.         //    $li.find('span.webuploadstate').html('上传中');
  224.         //    $li.find(".text").text(Math.round(percentage * 100) + '%');
  225.         //    $percent.css('width', percentage * 100 + '%');
  226.         //});
  227.         //uploader.on('uploadSuccess', function (file, response) {//上传成功事件
  228.         //    if (response.state == "error") {
  229.         //        target.find('#' + $(item)[0].id + file.id).find('span.webuploadstate').html(response.message);
  230.         //    } else {
  231.         //        target.find('#' + $(item)[0].id + file.id).find('span.webuploadstate').html('已上传');
  232.         //        $hiddenInput.append('<input type="text" id="hiddenInput' + $(item)[0].id + file.id + '" class="hiddenInput" value="' + response.message + '" />')
  233.         //    }
  234.         //});
  235.  
  236.         //uploader.on('uploadError', function (file) {
  237.         //    target.find('#' + $(item)[0].id + file.id).find('span.webuploadstate').html('上传出错');
  238.         //});
  239.  
  240.         //uploader.on('uploadComplete', function (file) {//全部完成事件
  241.         //    target.find('#' + $(item)[0].id + file.id).find('.progress').fadeOut();
  242.         //});
  243.  
  244.         uploader.on('all', function (type) {
  245.             if (type === 'startUpload') {
  246.                 state = 'uploading';
  247.             } else if (type === 'stopUpload') {
  248.                 state = 'paused';
  249.             } else if (type === 'uploadFinished') {
  250.                 state = 'done';
  251.             }
  252.  
  253.             if (state === 'uploading') {
  254.                 $btn.text('暂停上传');
  255.             } else {
  256.                 $btn.text('开始上传');
  257.             }
  258.         });
  259.  
  260.         //删除时执行的方法
  261.         uploader.on('fileDequeued', function (file) {
  262.             debugger;
  263.             var fullName = $("#hiddenInput" + $(item)[0].id + file.id).val();
  264.             if (fullName != null) {
  265.                 $.post(webuploaderoptions.deleteServer, { fullName: fullName }, function (data) {
  266.                     // alert(data.message);
  267.                 })
  268.             }
  269.             $("#" + $(item)[0].id + file.id).remove();
  270.             $("#hiddenInput" + $(item)[0].id + file.id).remove();
  271.  
  272.         })
  273.  
  274.         //多文件点击上传的方法
  275.         $btn.on('click', function () {
  276.             if (state === 'uploading') {
  277.                 uploader.stop();
  278.             } else {
  279.                 uploader.upload();
  280.             }
  281.         });
  282.  
  283.         //删除
  284.         $list.on("click", ".file-panel", function () {
  285.             debugger
  286.             var $ele = $(this);
  287.             var id = $ele.parent().attr("id");
  288.             var id = id.replace($(item)[0].id, "");
  289.  
  290.             var file = uploader.getFile(id);
  291.             uploader.removeFile(file);
  292.         });
  293.  
  294.     }
  295.     $.fn.CleanUpload = function (options) {
  296.         var uploadrFile = UpdataLoadarrayObj[$(this).attr("id")]
  297.         var fileslist = uploadrFile.getFiles();
  298.         for (var i in fileslist) {
  299.             uploadrFile.removeFile(fileslist[i]);
  300.         }
  301.         //var ele = $(this);
  302.         //var filesdata = ele.find(".UploadhiddenInput");
  303.         //filesdata.find(".hiddenInput").remove();
  304.         //ele.find(".uploader-list .item").remove();
  305.     }
  306.     $.fn.GetFilesAddress = function (options) {
  307.         var ele = $(this);
  308.         var filesdata = ele.find(".UploadhiddenInput");
  309.         var filesAddress = [];
  310.         filesdata.find(".hiddenInput").each(function () {
  311.             filesAddress.push($(this).val());
  312.         })
  313.         return filesAddress;
  314.  
  315.     }
  316.  
  317.     $.fn.powerWebUpload = function (options) {
  318.         var ele = this;
  319.  
  320.         if (typeof WebUploader == 'undefined') {
  321.             var casspath = applicationPath + "/Scripts/webuploader/webuploader.css";
  322.             $("<link>").attr({ rel: "stylesheet", type: "text/css", href: casspath }).appendTo("head");
  323.             var jspath = applicationPath + "/Scripts/webuploader/webuploader.min.js";
  324.             $.getScript(jspath).done(function () {
  325.  
  326.                 initWebUpload(ele, options);
  327.             })
  328.             .fail(function () {
  329.                 alert("请检查webuploader的路径是否正确!")
  330.             });
  331.  
  332.         }
  333.         else {
  334.             initWebUpload(ele, options);
  335.         }
  336.     }
  337. })(jQuery, window);

因为有一些样式上的东西,所以还需要添加一部分CSS如下:

  1.     #container {
  2.         color: #838383;
  3.         font-size: 12px;
  4.     }
  5.  
  6.     .uploaderPic .queueList {
  7.         margin: 20px;
  8.         border: 3px dashed #e6e6e6;
  9.     }
  10.  
  11.         .uploaderPic .queueList.filled {
  12.             padding: 17px;
  13.             margin:;
  14.             border: 3px dashed transparent;
  15.         }
  16.  
  17.         .uploaderPic .queueList.webuploader-dnd-over {
  18.             border: 3px dashed #999999;
  19.         }
  20.  
  21.     .uploaderPic p {
  22.         margin:;
  23.     }
  24.  
  25.     .element-invisible {
  26.         position: absolute !important;
  27.         clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  28.         clip: rect(1px,1px,1px,1px);
  29.     }
  30.  
  31.     .uploaderPic .placeholder {
  32.         min-height: 350px;
  33.         padding-top: 178px;
  34.         text-align: center;
  35.         background: url(../images/image.png) center 93px no-repeat;
  36.         color: #cccccc;
  37.         font-size: 18px;
  38.         position: relative;
  39.     }
  40.  
  41.         .uploaderPic .placeholder .webuploader-pick {
  42.             font-size: 18px;
  43.             background: #00b7ee;
  44.             border-radius: 3px;
  45.             line-height: 44px;
  46.             padding: 0 30px;
  47.             *width: 120px;
  48.             color: #fff;
  49.             display: inline-block;
  50.             margin: 0 auto 20px auto;
  51.             cursor: pointer;
  52.             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  53.         }
  54.  
  55.         .uploaderPic .placeholder .webuploader-pick-hover {
  56.             background: #00a2d4;
  57.         }
  58.  
  59.         .uploaderPic .placeholder .flashTip {
  60.             color: #666666;
  61.             font-size: 12px;
  62.             position: absolute;
  63.             width: 100%;
  64.             text-align: center;
  65.             bottom: 20px;
  66.         }
  67.  
  68.             .uploaderPic .placeholder .flashTip a {
  69.                 color: #0785d1;
  70.                 text-decoration: none;
  71.             }
  72.  
  73.                 .uploaderPic .placeholder .flashTip a:hover {
  74.                     text-decoration: underline;
  75.                 }
  76.  
  77.     .uploaderPic .filelist {
  78.         list-style: none;
  79.         margin:;
  80.         padding:;
  81.     }
  82.  
  83.         .uploaderPic .filelist:after {
  84.             content: '';
  85.             display: block;
  86.             width:;
  87.             height:;
  88.             overflow: hidden;
  89.             clear: both;
  90.         }
  91.  
  92.         .uploaderPic .filelist li {
  93.             width: 110px;
  94.             height: 110px;
  95.             background: url(../images/bg.png) no-repeat;
  96.             text-align: center;
  97.             margin: 0 8px 20px 0;
  98.             position: relative;
  99.             display: inline;
  100.             float: left;
  101.             overflow: hidden;
  102.             font-size: 12px;
  103.         }
  104.  
  105.             .uploaderPic .filelist li p.log {
  106.                 position: relative;
  107.                 top: -45px;
  108.             }
  109.  
  110.             .uploaderPic .filelist li p.title {
  111.                 position: absolute;
  112.                 top:;
  113.                 left:;
  114.                 width: 100%;
  115.                 overflow: hidden;
  116.                 white-space: nowrap;
  117.                 text-overflow: ellipsis;
  118.                 top: 5px;
  119.                 text-indent: 5px;
  120.                 text-align: left;
  121.             }
  122.  
  123.             .uploaderPic .filelist li p.progress {
  124.                 position: absolute;
  125.                 width: 100%;
  126.                 bottom:;
  127.                 left:;
  128.                 height: 8px;
  129.                 overflow: hidden;
  130.                 z-index:;
  131.                 margin:;
  132.                 border-radius:;
  133.                 background: none;
  134.                 -webkit-box-shadow: 0 0 0;
  135.             }
  136.  
  137.                 .uploaderPic .filelist li p.progress span {
  138.                     display: none;
  139.                     overflow: hidden;
  140.                     width:;
  141.                     height: 100%;
  142.                     background: #1483d8 url(../images/progress.png) repeat-x;
  143.                     -webit-transition: width 200ms linear;
  144.                     -moz-transition: width 200ms linear;
  145.                     -o-transition: width 200ms linear;
  146.                     -ms-transition: width 200ms linear;
  147.                     transition: width 200ms linear;
  148.                     -webkit-animation: progressmove 2s linear infinite;
  149.                     -moz-animation: progressmove 2s linear infinite;
  150.                     -o-animation: progressmove 2s linear infinite;
  151.                     -ms-animation: progressmove 2s linear infinite;
  152.                     animation: progressmove 2s linear infinite;
  153.                     -webkit-transform: translateZ(0);
  154.                 }
  155.  
  156.     @@-webkit-keyframes progressmove {
  157.         0% {
  158.             background-position: 0 0;
  159.         }
  160.  
  161.         100% {
  162.             background-position: 17px 0;
  163.         }
  164.     }
  165.  
  166.     @@-moz-keyframes progressmove {
  167.         0% {
  168.             background-position: 0 0;
  169.         }
  170.  
  171.         100% {
  172.             background-position: 17px 0;
  173.         }
  174.     }
  175.  
  176.     @@keyframes progressmove {
  177.         0% {
  178.             background-position: 0 0;
  179.         }
  180.  
  181.         100% {
  182.             background-position: 17px 0;
  183.         }
  184.     }
  185.  
  186.     .uploaderPic .filelist li p.imgWrap {
  187.         position: relative;
  188.         z-index:;
  189.         line-height: 110px;
  190.         vertical-align: middle;
  191.         overflow: hidden;
  192.         width: 110px;
  193.         height: 110px;
  194.         -webkit-transform-origin: 50% 50%;
  195.         -moz-transform-origin: 50% 50%;
  196.         -o-transform-origin: 50% 50%;
  197.         -ms-transform-origin: 50% 50%;
  198.         transform-origin: 50% 50%;
  199.         -webit-transition: 200ms ease-out;
  200.         -moz-transition: 200ms ease-out;
  201.         -o-transition: 200ms ease-out;
  202.         -ms-transition: 200ms ease-out;
  203.         transition: 200ms ease-out;
  204.     }
  205.  
  206.     .uploaderPic .filelist li img {
  207.         width: 100%;
  208.     }
  209.  
  210.     .uploaderPic .filelist li p.error {
  211.         background: #f43838;
  212.         color: #fff;
  213.         position: absolute;
  214.         bottom:;
  215.         left:;
  216.         height: 28px;
  217.         line-height: 28px;
  218.         width: 100%;
  219.         z-index:;
  220.     }
  221.  
  222.     .uploaderPic .filelist li .success {
  223.         display: block;
  224.         position: absolute;
  225.         left:;
  226.         bottom:;
  227.         height: 40px;
  228.         width: 100%;
  229.         z-index:;
  230.         background: url(../images/success.png) no-repeat right bottom;
  231.     }
  232.  
  233.     .uploaderPic .filelist div.file-panel {
  234.         position: absolute;
  235.         height:;
  236.         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0;
  237.         background: rgba( 0, 0, 0, 0.5 );
  238.         width: 100%;
  239.         top:;
  240.         left:;
  241.         overflow: hidden;
  242.         z-index:;
  243.     }
  244.  
  245.         .uploaderPic .filelist div.file-panel span {
  246.             width: 24px;
  247.             height: 24px;
  248.             display: inline;
  249.             float: right;
  250.             text-indent: -9999px;
  251.             overflow: hidden;
  252.             background: url(../images/icons.png) no-repeat;
  253.             margin: 5px 1px 1px;
  254.             cursor: pointer;
  255.         }
  256.  
  257.             .uploaderPic .filelist div.file-panel span.rotateLeft {
  258.                 background-position: 0 -24px;
  259.             }
  260.  
  261.                 .uploaderPic .filelist div.file-panel span.rotateLeft:hover {
  262.                     background-position: 0 0;
  263.                 }
  264.  
  265.             .uploaderPic .filelist div.file-panel span.rotateRight {
  266.                 background-position: -24px -24px;
  267.             }
  268.  
  269.                 .uploaderPic .filelist div.file-panel span.rotateRight:hover {
  270.                     background-position: -24px 0;
  271.                 }
  272.  
  273.             .uploaderPic .filelist div.file-panel span.cancel {
  274.                 background-position: -48px -24px;
  275.             }
  276.  
  277.                 .uploaderPic .filelist div.file-panel span.cancel:hover {
  278.                     background-position: -48px 0;
  279.                 }
  280.  
  281.     .uploaderPic .statusBar {
  282.         height: 63px;
  283.         border-top: 1px solid #dadada;
  284.         padding: 0 20px;
  285.         line-height: 63px;
  286.         vertical-align: middle;
  287.         position: relative;
  288.     }
  289.  
  290.         .uploaderPic .statusBar .progress {
  291.             border: 1px solid #1483d8;
  292.             width: 198px;
  293.             background: #fff;
  294.             height: 18px;
  295.             position: relative;
  296.             display: inline-block;
  297.             text-align: center;
  298.             line-height: 20px;
  299.             color: #6dbfff;
  300.             position: relative;
  301.             margin: 0 10px 0 0;
  302.         }
  303.  
  304.             .uploaderPic .statusBar .progress span.percentage {
  305.                 width:;
  306.                 height: 100%;
  307.                 left:;
  308.                 top:;
  309.                 background: #1483d8;
  310.                 position: absolute;
  311.             }
  312.  
  313.             .uploaderPic .statusBar .progress span.text {
  314.                 position: relative;
  315.                 z-index:;
  316.             }
  317.  
  318.         .uploaderPic .statusBar .info {
  319.             display: inline-block;
  320.             font-size: 14px;
  321.             color: #666666;
  322.         }
  323.  
  324.         .uploaderPic .statusBar .btns {
  325.             position: absolute;
  326.             top: 10px;
  327.             right: 20px;
  328.             line-height: 40px;
  329.         }
  330.  
  331.     #filePicker2 {
  332.         display: inline-block;
  333.         float: left;
  334.     }
  335.  
  336.     .uploaderPic .statusBar .btns .webuploader-pick,
  337.     .uploaderPic .statusBar .btns .uploadBtn,
  338.     .uploaderPic .statusBar .btns .uploadBtn.state-uploading,
  339.     .uploaderPic .statusBar .btns .uploadBtn.state-paused {
  340.         background: #ffffff;
  341.         border: 1px solid #cfcfcf;
  342.         color: #565656;
  343.         padding: 0 18px;
  344.         display: inline-block;
  345.         border-radius: 3px;
  346.         margin-left: 10px;
  347.         cursor: pointer;
  348.         font-size: 14px;
  349.         float: left;
  350.     }
  351.  
  352.         .uploaderPic .statusBar .btns .webuploader-pick-hover,
  353.         .uploaderPic .statusBar .btns .uploadBtn:hover,
  354.         .uploaderPic .statusBar .btns .uploadBtn.state-uploading:hover,
  355.         .uploaderPic .statusBar .btns .uploadBtn.state-paused:hover {
  356.             background: #f0f0f0;
  357.         }
  358.  
  359.     .uploaderPic .statusBar .btns .uploadBtn {
  360.         background: #00b7ee;
  361.         color: #fff;
  362.         border-color: transparent;
  363.     }
  364.  
  365.         .uploaderPic .statusBar .btns .uploadBtn:hover {
  366.             background: #00a2d4;
  367.         }
  368.  
  369.         .uploaderPic .statusBar .btns .uploadBtn.disabled {
  370.             pointer-events: none;
  371.             opacity: 0.6;
  372.         }

对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)的更多相关文章

  1. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  2. 简单二次封装的Golang图像处理库:图片裁剪

    简单二次封装的Golang图像处理库:图片裁剪 一．功能 Go语言下的官方图像处理库 简单封装后对jpg和png图像进行缩放/裁剪的库 二．使用说明 1.首先下载 go get -v -u githu ...

  3. angular中封装fancyBox(图片预览)

    首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接:http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然 ...

  4. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  5. 仿百度排列图片预览插件-Simple Lightbox

    很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...

  6. SpringMVC上传图片总结（2）--- 使用百度webuploader上传组件进行上传图片

    SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片   在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...

  7. Android-Volley网络通信框架（二次封装数据请求和图片请求（包含处理请求队列和图片缓存））

    1.回想 上篇 使用 Volley 的 JsonObjectRequest 和 ImageLoader 写了 电影列表的样例 2.重点 (1)封装Volley 内部 请求 类(请求队列,数据请求,图片 ...

  8. 文件上传和下载（可批量上传）——Spring（二）

    针对SpringMVC的文件上传和下载.下载用之前“文件上传和下载——基础(一)”的依然可以,但是上传功能要修改,这是因为springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置 ...

  9. 上传APP加入视频预览－－精简点名

    上传APP加入视频预览--精简点名 在为精简点名APP制作视频预览时的坑: 1.视频预览不能太长.也不能太短15-30s就好.我录制的是18s 2.视频的帧数不能太大.也就是说你在录制视频的时候.要慢 ...

随机推荐

  1. C++:基础篇-32位和64位系统区别及字节数

    今儿面试了一个刚刚毕业的,但是不知道一个int.long.double这几个都是多少位,我给你们总结一下哈: 常用数据类型对应字节数  可用如sizeof(char),sizeof(char*)等得出 ...

  2. Day01 Java环境变量配置

    1. Java环境配置的确浪费了一些时间,网上找的资料在设置PATH.CLASSPATH几乎都是利用的JAVA_HOME的路径 例如CLASSPATH=.;%JAVA_HOME%\lib;%JAVA_ ...

  3. Python 引用、浅拷贝、深拷贝解析

    引用 Python是动态数据类型的语言,故在对变量进行赋值时是不用制定变量类型的. 或者说,你可以把变量赋值的过程,当作是贴一个标签,去引用该数据. 看下面的例子: In [54]: a=4 In [ ...

  4. Struts2学习笔记①

    Struts2 学习笔记① 所有的程序学习都从Hello World开始,今天先跟着书做一个HW的示例. Struts2是一套MVC框架,使用起来非常方便,接触到现在觉得最麻烦的地方是配置文件.我的一 ...

  5. 聊聊"jQuery is not defined"

    KiwenLau同学在他的个人博客使用了Fundebug的JavaScript错误监控插件,然后偶尔会收到jQuery is not defined这样的错误报警: 他的博客使用了Staticfile ...

  6. 新学期的第一节Android课

    老师问,你们认为师生关系是什么样子的? 机智的我很快想到啦:或许是猫和老鼠的关系吧,嘿嘿O(∩_∩)O

  7. PHP随机数安全

    0x00 rand()函数 rand()的随机数默认最大32767,可以用于爆破这里不再举例. 0x01 mt_rand()和mt_srand()函数 mt_srand()函数用于播种,PHP 4.2 ...

  8. JavaWeb从0开始学（二）-----JSP基本语法与编译指令

    在上一节中我们学习了如何搭建一个简单的Web应用,并且已经知晓了一个JSP页面主要由静态的HTML内容和动态的Java脚本共同组成.JSP的基本语法共有JSP注释.JSP声明.输出JSP表达式与JSP ...

  9. springmvc.xml或spring.xml 能运行配置文件总是出现错误

    1:在java开发时总遇到配置文件配置正确,可以运行但有时显示错误.例如下图 上面配置文件正确但有时显错就不能运行.原因是配置文件的约束项错了. 原因是自己的jar包和配置文件版本不同.如果电脑联网它 ...

  10. 《Machine Learning》系列学习笔记之第二周

    第二周 第一部分 Multivariate Linear Regression Multiple Features Note: [7:25 - θT is a 1 by (n+1) matrix an ...