js 文件异步上传 显示进度条 显示上传速度 预览文件

通常文件异步提交有几个关键

1.支持拖拽放入文件。2.限制文件格式。3.预览图片文件。4.上传进度，速度等，上传途中取消上传。5.数据与文件同时上传

现在开始笔记：

需要一个最基础的元素<input id="inputFile" type=file multiple="multiple">

一、首先我们需要实现最基本的异步上传功能

//获得input元素的文件

var fileObj = document.getElementById("inputFile").files;

//定义一个表单数据对象

var form = new FormData();

//将文件input的文件信息放入表单数据对象中

for(var i in fileObj)
{
        form.append("file[]", fileObj[i]); // 文件对象
 }

//定义一个xhr对象

var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");

//创建一个http请求

xhr.open("post",url,true);

//发送数据

xhr.send(form);

这样数据就上传成功了。

二、接下来说明如何捕获文件上传开始，过程中，结束的各种信息状态

主要是几个xhr回调函数

xhr.onload = function(evt){}；//上传请求完成

xhr.onerror = function(evt){}；//上传异常

xhr.upload.onloadstart = function(evt){}；//开始上传

xhr.upload.onprogress =function(evt){};//上传进度  这个方法会在文件每上传一定字节时调用

evt.loaded//表示已经上传了多少byte的文件大小

evt.total//表示文件总大小为多少byte

通过这两个关键的属性就可以去计算 上传进度与速度

xhr.onreadystatechange = function(){}//当xhr的状态（上传开始，结束，失败）变化时会调用

该方法可以用来在文件上传完成后接收服务器返回的内容  xhr.responceText

中途取消上传 xhr.abort();

三、关于限制文件格式

在fileObj[i]中有个type属性可以使用

四、传文件的时候需要传其他数据

只需要

form.append("name","potatog");

这种键值录入即可。

只是需要注意后台获取数据是 不是在$_FILE中。

五、文件拖放

定义一个用来接收拖放事件的元素

如：

<div id="holder" style="width:150px;height:150px;border:5px solid red;"></div>

//检查浏览器是否支持拖放上传。
　　if('draggable' in document.createElement('span')){
　　　　var holder = document.getElementById('holder');
　　　　//当拖放的文件悬浮在该元素上方是触发
　　　　holder.ondragover = function () { this.className = 'hover'; return false; };
　　　　//当拖放的文件不再悬浮在该文件上方时调用
　　　　holder.ondragend = function () { this.className = ''; return false; };
　　　　//当拖放的文件放到该元素中时
　　　　holder.ondrop = function (event) {

　　　　　　event.preventDefault();

　　　　　　this.className = '';

　　　　　　//得到拖放的文件　　
　　　　　　var files = event.dataTransfer.files;

　　　　　//将文件放入输入框对象的files中
       　　　　 fileObj.files = files;
       　　　　 fileObj.onchange();
　　　　　　return false;
　　　　};

　　}

六、预览图片

fileObj.onchange = function(){
            　　// 检查是否支持FileReader对象
    　　if (typeof FileReader != 'undefined') {

//能预览的文件
    　　　　var acceptedTypes = {
    　　　　　　'image/png': true,
    　　　　　　'image/jpeg': true,
    　　　　　　'image/gif': true
    　　　　};
得到input=file元素中的所有文件信息
        for(var i = 0; i < fileObj.files.length; i++)
        {

//如果是支持预览的图片文件
    　　　　if (acceptedTypes[fileObj.files[i].type] === true) {
//新建一个预览对象
    　　　　　　var reader = new FileReader();
//绑定事件 当数据加载后执行  每有一张图片载入完成就会别调用。
    　　　　　　reader.onload = function (event) {
//定义一个图片对象
    　　　　　　　　var image = new Image();
//将对象载入的结果返回到图片元用来显示
    　　　　　　　　image.src = event.target.result;

　　　　　　　　image.width = 100;

　　　　　　　　holder.appendChild(image);

　　　　　　};

//开始加载数据 文件
    　　　　reader.readAsDataURL(fileObj.files[i]);
        }

　　　　}

　　}
    }

关于异步上传的封装demo代码

本文参考：

https://www.cnblogs.com/yuanlong1012/p/5127497.html

http://www.ruanyifeng.com/blog/2012/08/file_upload.html