JS技术

Javascript仿163网盘无刷新文件上传系统_Javascript教程(5)

字号+ 作者:H5之家 来源:H5之家 2015-09-26 11:00 我要评论( )

Code //检测变量 var bCheck = true; //进行空值、文件数、后缀名、同值检测 if(!file.value){ bCheck = false; this.onEmpty(); } else if(this.Limit this.Files.length = this.Limit){ bCheck = false; this.onL

Code
//检测变量
var bCheck = true;
//进行空值、文件数、后缀名、同值检测
if(!file.value){
    bCheck = false; this.onEmpty();
} else if(this.Limit && this.Files.length >= this.Limit){
    bCheck = false; this.onLimite();
} else if(!!this.ExtIn.length && !RegExp("\.(" + this.ExtIn.join("|") + ")$", "i").test(file.value)){
    //检测是否允许后缀名
    bCheck = false; this.onNotExtIn();
} else if(!!this.ExtOut.length && RegExp("\.(" + this.ExtOut.join("|") + ")$", "i").test(file.value)) {
    //检测是否禁止后缀名
    bCheck = false; this.onExtOut();
} else if(!!this.Distinct) {
    Each(this.Files, function(o){ if(o.value == file.value){ bCheck = false; } })
    if(!bCheck){ this.onSame(); }
}
里面有一个检测变量bCheck,然后进行空值、文件数限制、后缀名、相同文件的检测,当其中一个步骤不通过bCheck就会设为false,一个常用的检测结构。
这里说说检测后缀名,有无js不能像后台那样获取文件的文件类型,所以只能根据后缀名来判断,例如用正则判断:

/\.(jpg|gif)$/i.test(file.value)
这样判断显然是不够的,所以如果要做文件类型判断的话一定要在后台用ContentType再判断一次。
最后如果没有通过检测就会执行onFail函数:

!bCheck && this.onFail(file);
我在onFail函数中设定了移除没有通过检测的file控件:

onFail: function(file){ this.Folder.removeChild(file); }

这样就基本实现(正确的说是模拟)了单file控件上传多个文件的效果了。


【文件列表】
在上面的Ini函数中,最后执行了一个附加函数onIni,这个函数是用户自己定义的,我就在这个函数中添加文件列表。

在之前先说说添加文件列表的函数AddList,这个函数是用来把file控件的值列在一个table里面。
函数的参数是一个二维数组,其中第一维是行(tr),第二维是列(td)。
首先获取列表对象FileList,再定义一个文档碎片oFragment来操作dom:

var FileList = $("idFileList"), oFragment = document.createDocumentFragment();
然后用两个Each把二维数组插入到文档碎片中:

Code
Each(rows, function(cells){
    var row = document.createElement("tr");
    Each(cells, function(o){
        var cell = document.createElement("td");
        if(typeof o == "string"){ cell.innerHTML = o; }else{ cell.appendChild(o); }
        row.appendChild(cell);
    });
    oFragment.appendChild(row);
})
其中用了一个判断if(typeof o == "string"),如果是文本就直接用innerHTML插入td,如果不是文本(这里不是文本就是一个对象)就用appendChild插入到td。
当数据都插入到文档碎片,就准备把文档碎片插入到FileList中,不过还有一个步骤就是清空FileList中原有的数据。
本来把innerHTML设为空来清空FileList会更有效率,但ie的table中只有td支持innerHTML,所以只好用removeChild来清空:

while(FileList.hasChildNodes()){ FileList.removeChild(FileList.firstChild); }
之后就可以把文档碎片插入了:

FileList.appendChild(oFragment);

继续看onIni函数,现在只需要把要显示的数据组成一个二维数组,再用AddList就能显示文件列表了,这时存放file控件集合的Files属性就大有用处了。
首先定义一个放显示数据的数组:

var arrRows = [];
然后根据Files对这个数组赋值:

Code
if(this.Files.length){
    var oThis = this;
    Each(this.Files, function(o){
        var a = document.createElement("a"); a.innerHTML = "取消"; a.href = "javascript:void(0);";
        a.onclick = function(){ oThis.Delete(o); return false; };
        arrRows.push([o.value, a]);
    });
} else { arrRows.push(["<font color='gray'>没有添加文件</font>", "&nbsp;"]); }
AddRow(arrRows);
当Files没有控件时只是输出“没有添加文件”,有控件时就会把每个file控件的要显示数据放到一个数组中,可以看到这个数组其实就是td内容的集合,接着把这个数组加入到arrRows中形成二维数组,最后把得到的arrRows给AddRow函数显示数据就行了。
为了能取消指定的file控件,这里插入了一个a来触发删除函数Delete,这里也有一个技巧,这里把href设为"javascript:void(0);",并在onclick中返回false,这样能最大程度的实现仅仅执行js而不去跳转。

在表单提交时也要重新显示文件列表,表单提交后就不允许删除文件了,只显示文件路径就行了:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评