博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

多文件上传Jquery.MultiFile清空文件列表

Posted on 2012-02-16 10:12  itcfj  阅读(1318)  评论(0编辑  收藏  举报
多文件上传Jquery.MultiFile清空文件列表
 

在多文件上传的时候很多人都会使用Jquery.MultiFile这个插件。这个插件非常好用。看我的效果。

可以对文件单独删除。但是我不知道你们有没有考虑到一下全部清空文件列表呢?

刚开始自作聪明认为既然他自动生成代码,那我为什么不能直接删除代码呢(把某个div里面的代码直接置空。)?想想是可以的。效果上好像也满足的。等代码写完发现问题来了。

什么问题呢?因为MultiFile插件有个最多文件数控制的。你这么直接清楚表面上看来文件被清楚了。但是内部文件个数计数器并没有被同事清空。最直接的现象就是:

比如你设置最大文件数为5个,你也选取了5个文件,它就自动把文件浏览按钮给disabled了。这时候你清空了,也就不能再重新选择文件了。

怎么办呢?

网上找了一圈没有发现有这个方法,只有自己封装。观察生成的代码如下:

从生成的代码里面看到一个如下连接:

<a class="MultiFile-remove" href="#upfile_warp">这种连接,而点击这个连接也正好是出发删除单个文件的。

所以就试着写下如下代码:

multiFileClear = function(){
$("a.MultiFile-remove").each(function(i){
   this.click();
  
});
}

测试!Ok成功!

 

------闲下来看jquery.MutliFile的代码里面提供了一个方法的。

/**
   * This method removes all selected files
   *
   * Returns a jQuery collection of all affected elements.
   *
   * @name reset
   * @type jQuery
   * @cat Plugins/MultiFile
   * @author Diego A. (http://www.fyneworks.com/)
   *
   * @example $.fn.MultiFile.reset();
   */
reset: function(){
    var settings = $(this).data('MultiFile');
    //if(settings) settings.wrapper.find('a.MultiFile-remove').click();
    if(settings) settings.list.find('a.MultiFile-remove').click();
   return $(this);
},

汗啊。。不过思路一样