文件上传

文件基本介绍

　　在我们平时的开发中，基本上左右的应用都会有文件上传和分页这两个功能，现在还记得上学时期末的项目这两个功能做的好就能够多那么一点分！

　　文件上传很简单只需要一个input即可：

<input type="file" />

　　这种情况下只能选择一个文件，我们可以使用multiple属性来选中多个文件（选择文件时按住ctrl）。

　　同时我们也可以通过accept="xx"来限制上传的文件类型（这个属性只能用来方便用户的选择，别指望用它来实现限制上传文件类型的功能）。

　　现在功能齐全的上传DOM如下：

<input type="file" multiple accept=".html" id="demo"/>

　　每一个文件DOM一个files属性,用来访问FileList(当前选择的文件)

var demo = document.getElementById("demo");
demo.files

　　demo.files是一个类数组对象我们可以使用for循环来遍历它来获得每一个文件对象,也可以像操作数组一样用demo.files[0]来直接获得一个文件对象。

　　每一个文件对象都是几个属性，我们比较关心的有三个，分别是文件名name,文件大小size,文件类型type。我们可以直接访问它们-->demo.files[0].size。

文件基本使用

　　我们只需要一句简单HTML代码就可以实现文件的选择，非常的简单，它的另一个显著的特么也非常的明显，那就是特别的丑！

　　所以在实际使用时我们可以通过它来实现功能用另一个DOM元素来展示给用户。

#btn{height:50px;width:150px;border-radius:10px;text-align:center;line-height:50px;background-color:pink;cursor:pointer}

 

 <input type="file" multiple accept=".html" id="demo" style="display:none"/>
 <div id="btn">我是一个漂亮的按钮</div>
 <div id="text"></div>

　　通过下面的JS代码来实现文件选择的功能：

var demo = document.getElementById("demo");
var btn = document.getElementById("btn");
var text = document.getElementById("text");
demo.onchange = function(){
    for(var i=0,il=demo.files.length;i<il;i++){
        text.innerHTML += demo.files[i].name+"<br />"
    }
}
btn.onclick = function(){
    demo.click();
}

文件异步上传

<input type="file" id="demo" multiple />

　　

$(function(){
    var demo = document.getElementById("demo");
    demo.onchange = function(){
        var files = this.files;
        for(var i=0,il=files.length;i<il;i++){
            send(files[i]);
        }
    }
})
function send(arg){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var fd = new FormData();
    fd.append("myFile",arg);
    xhr.open("post","demo!test.action",true)
    xhr.send(fd);
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
            alert("ok");
        }
    }
}

 

　　如果使用JQ的ajax进行异步上传注意要将contentType和processData以及cache都设置为false（在实际开发时是要减少和服务器的交互）。

　　拖拽上传demo