自己造轮子之上传控件

前言：

      本次项目里面需要使用上传插件，网上找了很多三方插件都被产品PASS

      后面找到了webiploader，然后对他进行了模块化的封装。

1.js的模块化管理

     

     本文中使用了requier.js来管理。 至于如何使用大家可以百度一下！

     主要是基于webiploader，然后进行一些样式处理。

     先上一个效果图：

     

    接受了两个参数和一个配置参数，

    配置参数如不传，会有默认值。

    如图

  

   

    

      附上代码

define(['jquery', 'webuploader'], function ($, WebUploader) {
    "use strict";
    /*
     上传控件 by shumin 2016-11-25
     ist  图片显示区域ID
     pick 上传按钮区域ID
     opts 控件参数
    */
    
    
    function MyWebUploader(list,pick, opts) {
        this.$list = $(list);
        this.$pick = $(pick);
        this.$ = $;
        this.opts = $.extend({}, MyWebUploader.DEFAULTS, opts);

        this.init();

        


    }
    MyWebUploader.DEFAULTS = {
        type:'webfile',   //上传类型  （不同类型 保存路径不同）
        fileNumLimit: 1,  //上传数量
        thumbnailWidth: 90,  //缩略图宽
        thumbnailHeight:90   //缩略图高
    }
    MyWebUploader.prototype.init = function () {
        var self = this;

         
            // 优化retina, 在retina下这个值是2
        var ratio = window.devicePixelRatio || 1,
            // 缩略图大小
            thumbnailWidth = self.opts.thumbnailWidth * ratio,
            thumbnailHeight = self.opts.thumbnailHeight * ratio,

            // Web Uploader实例
            uploader;
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,

            disableGlobalDnd: true,
            // swf文件路径
            swf: '/img/js/plugin/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '/API/Upload?type=' + self.opts.type,

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick:self.$pick,
            fileNumLimit: self.opts.fileNumLimit,
            //只允许选择图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }

        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="cp_img">' +
                        '<img>' +
                    '<div class="cp_img_jian"></div></div>'
                    ),
                $img = $li.find('img');


            // $list为容器jQuery实例
            self.$list.append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
            uploader.upload();
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            if (response.Status == 1) {

                // $('#' + file.id).children('img').attr('src', response.Message);
            }
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });

        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单

        });

        //开始上传
        $("#ctlBtn").click(function () {
            uploader.upload();

        });

        //显示删除按钮

        $(document).on('mouseover', '.cp_img', function () {
            $(this).children(".cp_img_jian").css('display', 'block');
        })
        //隐藏删除按钮
        $(document).on('mouseout', '.cp_img', function () {
            $(this).children(".cp_img_jian").css('display', 'none');
        })


        //执行删除方法
        self.$list.on("click", ".cp_img_jian", function () {
            var Id = $(this).parent().attr("id");
            uploader.removeFile(uploader.getFile(Id, true));
            $(this).parent().remove();
        });

    }


    return{
        MyWebUploader: MyWebUploader
    } 
})

 后面调用就很方便了，不需要每次使用都写一大坨配置项

 

     贴上页面代码