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

Question

Someone knows how create file list like demo when pass 10 seconds:

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

Demo Source code there is nothing to create this list, it's not on complete event. I think is php code inside but i cant get it

Thanks

Answer 1

The file list is being created by the fileuploader.js plugin. When a file upload begins, the plugin creates the list item HTML element and then adds it to the page. Here's the code and how it works:

The template for the list item is in the qq.FileUploader class:

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>',

The _addToList() function creates the new list item HTML element using the above template:

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);
},

When a file upload begins, the _addToList() function (above) is called in the _onSubmit() method:

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