项目二、自定义文件上传函数(js函数)

/**
 * 文件上传工具 v1.0
 * @param file 要上传的文件
 * @param url 要上传到的路径
 * @param div 要显示的区域
 */
function uploader(file, url, div) {
    
    var xhr = new XMLHttpRequest(); //创建xhr对象
    var _data = new FormData(); //创建数据对象
    _data.append("file", file); //添加文件

    var _prog = document.createElement("progress");//创建进度条
    _prog.setAttribute("max", "100");   //设置最大值
    var _lbl = document.createElement("label"); //创建标签
    _lbl.innerHTML = file.name;    //显示文件名
    var _btn = document.createElement("button");    //创建按钮
    _btn.innerHTML = "删除";  //设置文字
    
    var _innerDiv = document.createElement("div");//创建显示区域
    _innerDiv.appendChild(_prog); //将进度条添加到显示区域
    _innerDiv.appendChild(_lbl);  //将标签添加到显示区域
    _innerDiv.appendChild(_btn);      //将按钮添加到显示区域

    //状态发生改变时的处理
    xhr.onreadystatechange = function () {
        //如果准备好了，但还没发送时
        if(xhr.readyState == 1){
            div.appendChild(_innerDiv);
        }
        //如果传送完成了
        else if(xhr.readyState == 4 && xhr.status == 200){
            _lbl.innerHTML += xhr.responseText;  //将结果显示在标签上
        }
    }

    //传送过程处理
    xhr.upload.onprogress = function (event) {
        var percentCompleted = Math.round(event.loaded * 100 / event.total);//计算上传百分比
        _prog.setAttribute("value", percentCompleted);  //将结果显示在进度条上
    }

    xhr.open("POST", url, true);    //打开连接
    xhr.send(_data);    //发送文件
}