自己造轮子之上传控件

  1 define([‘jquery‘, ‘webuploader‘], function ($, WebUploader) {
  2     "use strict";
  3     /*
  4      上传控件 by shumin 2016-11-25
  5      ist  图片显示区域ID
  6      pick 上传按钮区域ID
  7      opts 控件参数
  8     */
  9     
 10     
 11     function MyWebUploader(list,pick, opts) {
 12         this.$list = $(list);
 13         this.$pick = $(pick);
 14         this.$ = $;
 15         this.opts = $.extend({}, MyWebUploader.DEFAULTS, opts);
 16 
 17         this.init();
 18 
 19         
 20 
 21 
 22     }
 23     MyWebUploader.DEFAULTS = {
 24         type:‘webfile‘,   //上传类型  （不同类型 保存路径不同）
 25         fileNumLimit: 1,  //上传数量
 26         thumbnailWidth: 90,  //缩略图宽
 27         thumbnailHeight:90   //缩略图高
 28     }
 29     MyWebUploader.prototype.init = function () {
 30         var self = this;
 31 
 32          
 33             // 优化retina, 在retina下这个值是2
 34         var ratio = window.devicePixelRatio || 1,
 35             // 缩略图大小
 36             thumbnailWidth = self.opts.thumbnailWidth * ratio,
 37             thumbnailHeight = self.opts.thumbnailHeight * ratio,
 38 
 39             // Web Uploader实例
 40             uploader;
 41         uploader = WebUploader.create({
 42             // 选完文件后，是否自动上传。
 43             auto: false,
 44 
 45             disableGlobalDnd: true,
 46             // swf文件路径
 47             swf: ‘/img/js/plugin/webuploader/Uploader.swf‘,
 48 
 49             // 文件接收服务端。
 50             server: ‘/API/Upload?type=‘ + self.opts.type,
 51 
 52             // 选择文件的按钮。可选。
 53             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
 54             pick:self.$pick,
 55             fileNumLimit: self.opts.fileNumLimit,
 56             //只允许选择图片
 57             accept: {
 58                 title: ‘Images‘,
 59                 extensions: ‘gif,jpg,jpeg,bmp,png‘,
 60                 mimeTypes: ‘image/*‘
 61             }
 62 
 63         });
 64 
 65         // 当有文件添加进来的时候
 66         uploader.on(‘fileQueued‘, function (file) {
 67             var $li = $(
 68                     ‘<div id="‘ + file.id + ‘" class="cp_img">‘ +
 69                         ‘<img>‘ +
 70                     ‘<div class="cp_img_jian"></div></div>‘
 71                     ),
 72                 $img = $li.find(‘img‘);
 73 
 74 
 75             // $list为容器jQuery实例
 76             self.$list.append($li);
 77 
 78             // 创建缩略图
 79             // 如果为非图片文件，可以不用调用此方法。
 80             // thumbnailWidth x thumbnailHeight 为 100 x 100
 81             uploader.makeThumb(file, function (error, src) {
 82                 if (error) {
 83                     $img.replaceWith(‘<span>不能预览</span>‘);
 84                     return;
 85                 }
 86 
 87                 $img.attr(‘src‘, src);
 88             }, thumbnailWidth, thumbnailHeight);
 89             uploader.upload();
 90         });
 91 
 92         // 文件上传过程中创建进度条实时显示。
 93         uploader.on(‘uploadProgress‘, function (file, percentage) {
 94             var $li = $(‘#‘ + file.id),
 95                 $percent = $li.find(‘.progress span‘);
 96 
 97             // 避免重复创建
 98             if (!$percent.length) {
 99                 $percent = $(‘<p class="progress"><span></span></p>‘)
100                         .appendTo($li)
101                         .find(‘span‘);
102             }
103 
104             $percent.css(‘width‘, percentage * 100 + ‘%‘);
105         });
106 
107         // 文件上传成功，给item添加成功class, 用样式标记上传成功。
108         uploader.on(‘uploadSuccess‘, function (file, response) {
109             if (response.Status == 1) {
110 
111                 // $(‘#‘ + file.id).children(‘img‘).attr(‘src‘, response.Message);
112             }
113             $(‘#‘ + file.id).addClass(‘upload-state-done‘);
114         });
115 
116         // 文件上传失败，显示上传出错。
117         uploader.on(‘uploadError‘, function (file) {
118             var $li = $(‘#‘ + file.id),
119                 $error = $li.find(‘div.error‘);
120 
121             // 避免重复创建
122             if (!$error.length) {
123                 $error = $(‘<div class="error"></div>‘).appendTo($li);
124             }
125 
126             $error.text(‘上传失败‘);
127         });
128 
129         // 完成上传完了，成功或者失败，先删除进度条。
130         uploader.on(‘uploadComplete‘, function (file) {
131             $(‘#‘ + file.id).find(‘.progress‘).remove();
132         });
133 
134         //所有文件上传完毕
135         uploader.on("uploadFinished", function () {
136             //提交表单
137 
138         });
139 
140         //开始上传
141         $("#ctlBtn").click(function () {
142             uploader.upload();
143 
144         });
145 
146         //显示删除按钮
147 
148         $(document).on(‘mouseover‘, ‘.cp_img‘, function () {
149             $(this).children(".cp_img_jian").css(‘display‘, ‘block‘);
150         })
151         //隐藏删除按钮
152         $(document).on(‘mouseout‘, ‘.cp_img‘, function () {
153             $(this).children(".cp_img_jian").css(‘display‘, ‘none‘);
154         })
155 
156 
157         //执行删除方法
158         self.$list.on("click", ".cp_img_jian", function () {
159             var Id = $(this).parent().attr("id");
160             uploader.removeFile(uploader.getFile(Id, true));
161             $(this).parent().remove();
162         });
163 
164     }
165 
166 
167     return{
168         MyWebUploader: MyWebUploader
169     } 
170 })