关于无刷新实现文件上传

相信AJAX对于大家而言，并不陌生，但怎么利用他上传文件却鲜有人试过，其实，通过无刷新上传文件至少有两种方式。

1、传统的方式

    <form method="post" target="frame">
        <iframe name="frame"></iframe>
        <input type="file" name="test" />
        <button type="submit"></button>
    </form>

重点在于form里面的target和iframe里面的name相同，此时提交会直接提交到iframe里面，会造成iframe刷新，如果将其大小设置为无法可见，则实现文件上传功能。

2、AJAX功能

通常大家使用都是用来传递可序列化为字符串的东西，但实际上有一个对象，类型是FormData，他可以实现传递文件。

            var formData = new FormData(); //创建一个虚拟的Form
            formData.append('fileName', file); //添加文件         
            var xhr = getHttpRequest();//获取AJAX对象
            xhr.open("POST", url);//必须POST
            xhr.upload.onprogress = function(e){//处理过程
                //e.total和e.loaded，表示一共需要上传的大小和已经上传的文件大小
            };
            xhr.onreadystatechange = function () {//上传情况
                //如果有返回值了
                if (xhr.status && xhr.readyState && xhr.status == 200 && xhr.readyState == 4) {
                    //上传完成，回调
  
                };
            };
            //不能有这一行，否则失败，因为上传文件不能使用会被编码的类型
            //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(formData);//发送