优化 upload 渲染入口逻辑，以解决因重复渲染导致的若干问题

优化 upload 实例的 `reload` 方法，可更好地进行完整重载
修复 upload 当 `unified: true` 时的报错问题

src/modules/upload.js

@@ -3,16 +3,22 @@
  * 上传组件
  */
  
-layui.define(['lay','layer'], function(exports){
+layui.define(['lay', 'layer'], function(exports){
   "use strict";
   
   var $ = layui.$;
+  var lay = layui.lay;
   var layer = layui.layer;
   var device = layui.device();
 
+  // 模块名
+  var MOD_NAME = 'upload';
+  var MOD_INDEX = 'layui_'+ MOD_NAME +'_index'; // 模块索引名
+
   // 外部接口
   var upload = {
     config: {}, // 全局配置项
+    index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0, // 索引
     // 设置全局项
     set: function(options){
       var that = this;
@@ -26,8 +32,13 @@ layui.define(['lay','layer'], function(exports){
   };
   
   // 操作当前实例
-  var thisUpload = function(){
+  var thisModule = function(){
     var that = this;
+    var options = that.config;
+    var id = options.id;
+
+    thisModule.that[id] = that; // 记录当前实例对象
+
     return {
       upload: function(files){
         that.upload.call(that, files);
@@ -40,7 +51,6 @@ layui.define(['lay','layer'], function(exports){
   };
   
   // 字符常量
-  var MOD_NAME = 'upload';
   var ELEM = 'layui-upload';
   var THIS = 'layui-this';
   var SHOW = 'layui-show';
@@ -57,6 +67,7 @@ layui.define(['lay','layer'], function(exports){
   // 构造器
   var Class = function(options){
     var that = this;
+    that.index = ++upload.index;
     that.config = $.extend({}, that.config, upload.config, options);
     that.render();
   };
@@ -86,15 +97,51 @@ layui.define(['lay','layer'], function(exports){
       "limit-size": null // 限制 size 属性的提示 --- function
     }
   };
+
+  // 重载实例
+  Class.prototype.reload = function(options){
+    var that = this;
+    that.config = $.extend({}, that.config, options);
+    that.render(true);
+  };
   
   // 初始渲染
-  Class.prototype.render = function(){
+  Class.prototype.render = function(rerender){
     var that = this;
     var options = that.config;
 
+    // 若 elem 非唯一
+    var elem = $(options.elem);
+    if (elem.length > 1) {
+      layui.each(elem, function() {
+        upload.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }
+
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0], {
+      attr: elem.attr('lay-data') ? 'lay-data' : null // 兼容旧版的 lay-data 属性
+    }));
+
+    // 若重复执行 render，则视为 reload 处理
+    if (!rerender && elem[0] && elem.data(MOD_INDEX)) {
+      var newThat = thisModule.getThis(elem.data(MOD_INDEX));
+      if(!newThat) return;
+
+      return newThat.reload(options);
+    }
+
     options.elem = $(options.elem);
     options.bindAction = $(options.bindAction);
 
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
+
     that.file();
     that.events();
   };
@@ -219,11 +266,14 @@ layui.define(['lay','layer'], function(exports){
       var request = function(sets){
         var formData = new FormData();
 
-        // 删除正在上传中的文件队列
+        // 恢复文件状态
-        var removeUploaded = function(index, file) {
+        var resetFileState = function(file) {
-          if (file[UPLOADING]) {
+          if (sets.unified) {
-            delete items[index];
+            layui.each(items, function(index, file){
-            return true;
+              delete file[UPLOADING];
+            });
+          } else {
+            delete file[UPLOADING];
           }
         };
 
@@ -234,24 +284,22 @@ layui.define(['lay','layer'], function(exports){
         });
 
         /*
-         *添加 file 到表单域
+         * 添加 file 到表单域
          */
 
         // 是否统一上传
         if (sets.unified) {
           layui.each(items, function(index, file){
-            if (removeUploaded(index, file)) return;
+            if (file[UPLOADING]) return;
-            file[UPLOADING] = true;
+            file[UPLOADING] = true; // 上传中的标记
             formData.append(options.field, file);
           });
         } else { // 逐一上传
-          if (removeUploaded(sets.index, sets.file)) return;
+          if (sets.file[UPLOADING]) return;
           formData.append(options.field, sets.file);
           sets.file[UPLOADING] = true; // 上传中的标记
         }
 
-
-
         // ajax 参数
         var opts = {
           url: options.url,
@@ -264,7 +312,8 @@ layui.define(['lay','layer'], function(exports){
           success: function(res){ // 成功回调
             options.unified ? (successful += that.fileLength) : successful++;
             done(sets.index, res);
-            allDone();
+            allDone(sets.index);
+            resetFileState(sets.file);
           },
           error: function(e){ // 异常回调
             options.unified ? (failed += that.fileLength) : failed++;
@@ -273,7 +322,8 @@ layui.define(['lay','layer'], function(exports){
               'status: '+ (e.status || '') +' - '+ (e.statusText || 'error')
             ].join('<br>'));
             error(sets.index);
-            allDone();
+            allDone(sets.index);
+            resetFileState(sets.file);
           }
         };
 
@@ -357,7 +407,7 @@ layui.define(['lay','layer'], function(exports){
     };
     
     // 统一网络异常回调
-   var error = function(index){
+    var error = function(index){
       if(options.auto){
         elemFile.value = '';
       }
@@ -405,7 +455,7 @@ layui.define(['lay','layer'], function(exports){
     };
     
     // 提交上传
-    var send = function(){      
+    var send = function(){
       // 上传前的回调 - 如果回调函数明确返回 false，则停止上传
       if(options.before && (options.before(args) === false)) return;
 
@@ -430,7 +480,8 @@ layui.define(['lay','layer'], function(exports){
       ? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '')
     : value;
     
-    if(value.length === 0) return;
+    // 若文件域值为空
+    if (value.length === 0) return;
     
     // 根据文件类型校验
     switch(options.accept){
@@ -517,24 +568,6 @@ layui.define(['lay','layer'], function(exports){
     send();
   };
   
-  // 重置方法
-  Class.prototype.reload = function(opts){
-    opts = opts || {};
-    delete opts.elem;
-    delete opts.bindAction;
-    
-    var that = this;
-    var options = that.config = $.extend({}, that.config, upload.config, opts);
-    var next = options.elem.next();
-    
-    // 更新文件域相关属性
-    next.attr({
-      name: options.name,
-      accept: options.acceptMime,
-      multiple: options.multiple
-    });
-  };
-  
   //事件处理
   Class.prototype.events = function(){
     var that = this;
@@ -565,23 +598,10 @@ layui.define(['lay','layer'], function(exports){
       elemFile.after('<span class="layui-inline '+ ELEM_CHOOSE +'">'+ value +'</span>');
     };
 
-    // 合并 lay-options/lay-data 属性配置项
-    var extendAttrs = function(){
-      var othis = $(this);
-      var data = othis.attr('lay-data') || othis.attr('lay-options'); // 优先兼容旧版本
-
-      if(data){
-        that.config = $.extend({}, options, lay.options(this, {
-          attr: othis.attr('lay-data') ? 'lay-data' : null
-        }));
-      }
-    };
-
     // 点击上传容器
     options.elem.off('upload.start').on('upload.start', function(){
       var othis = $(this);
 
-      extendAttrs.call(this);
       that.config.item = othis;
       that.elemFile[0].click();
     });
@@ -601,7 +621,6 @@ layui.define(['lay','layer'], function(exports){
         var files = param.originalEvent.dataTransfer.files || [];
         
         othis.removeAttr('lay-over');
-        extendAttrs.call(this);
         setChooseFile(files);
 
         options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
@@ -609,12 +628,11 @@ layui.define(['lay','layer'], function(exports){
     }
     
     // 文件选择
-    that.elemFile.off('upload.change').on('upload.change', function(){
+    that.elemFile.on('change', function(){
       var files = this.files || [];
 
       if(files.length === 0) return;
 
-      extendAttrs.call(this);
       setChooseFile(files);
 
       options.auto ? that.upload() : setChooseText(files); // 是否自动触发上传
@@ -624,19 +642,19 @@ layui.define(['lay','layer'], function(exports){
     options.bindAction.off('upload.action').on('upload.action', function(){
       that.upload();
     });
-    
+
+
     // 防止事件重复绑定
-    if(options.elem.data('haveEvents')) return;
+    if(options.elem.data(MOD_INDEX)) return;
-    
+
-    that.elemFile.on('change', function(){
+
-      $(this).trigger('upload.change');
+    // 目标元素 click 事件
-    });
-    
     options.elem.on('click', function(){
       if(that.isFile()) return;
       $(this).trigger('upload.start');
     });
     
+    // 目标元素 drop 事件
     if(options.drag){
       options.elem.on('dragover', function(e){
         e.preventDefault();
@@ -649,17 +667,29 @@ layui.define(['lay','layer'], function(exports){
       });
     }
     
+    // 手动上传时触发上传的元素 click 事件
     options.bindAction.on('click', function(){
       $(this).trigger('upload.action');
     });
     
-    options.elem.data('haveEvents', true);
+    // 绑定元素索引
+    options.elem.data(MOD_INDEX, options.id);
+  };
+
+  // 记录所有实例
+  thisModule.that = {}; // 记录所有实例对象
+
+  // 获取当前实例对象
+  thisModule.getThis = function(id){
+    var that = thisModule.that[id];
+    if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required');
+    return that;
   };
   
   // 核心入口  
   upload.render = function(options){
     var inst = new Class(options);
-    return thisUpload.call(inst);
+    return thisModule.call(inst);
   };
   
   exports(MOD_NAME, upload);