Valums 文件上传器 - 列表文件 - 路径答案

【问题标题】：Valums file uploader - List file - pathValums 文件上传器 - 列表文件 - 路径
【发布时间】：2014-01-20 20:34:26
【问题描述】：

有人知道如何在 10 秒后创建像演示一样的文件列表：

http://html5.sapnagroup.com/demos/dragDropUploads/

Demo 源代码没有什么可以创建这个列表，它不是完整的事件。我认为里面是php代码，但我无法得到它

谢谢

【问题讨论】：

标签： php ajax uploader filelist valums-file-uploader

【解决方案1】：

fileuploader.js 插件正在创建文件列表。当文件上传开始时，插件会创建列表项 HTML 元素，然后将其添加到页面中。以下是代码及其工作原理：

列表项的模板在qq.FileUploader类中：

fileTemplate: '<li>' +
    '<span class="qq-upload-file"></span>' +
     '<span class="qq-upload-spinner"></span>' +
     '<span class="qq-upload-size"></span>' +
     '<a class="qq-upload-cancel" href="#">Cancel</a>' +
     '<span class="qq-upload-failed-text">Failed</span>' +
   '</li>',

_addToList() 函数使用上述模板创建新的列表项 HTML 元素：

addToList: function(id, fileName){
  var item = qq.toElement(this._options.fileTemplate);                
  item.qqFileId = id;

  var fileElement = this._find(item, 'file');        
  qq.setText(fileElement, this._formatFileName(fileName));
  this._find(item, 'size').style.display = 'none';        

  this._listElement.appendChild(item);
},

当文件上传开始时，_addToList() 函数（上图）在_onSubmit() 方法中被调用：

_onSubmit: function(id, fileName){
    qq.FileUploaderBasic.prototype._onSubmit.apply(this, arguments);
    this._addToList(id, fileName);  
},

【讨论】：