项目三、文件上传器v1.1

/**
 * 自定义文件上传工具 v1.1
 * @param url 路径
 */
function fileUploader(url) {
    var _date = new Date(); //日期

    this._container_ = null;
    this._file_ = null;

    this._init_1 = function (_uploader) {
        return function () {
            //生成文件上传控件
            var _file = document.createElement("input");
            _file.setAttribute("type", "file");
            _file.setAttribute("name", "file_" + _date.getTime());
            _file.setAttribute("id", "file_" + _date.getTime());
            _file.setAttribute("multiple", "multiple");

            //生成容器
            var _container = document.createElement("div");
            _container.setAttribute("id", "div_" + _date.getTime());
            _container.appendChild(_file);

            //添加事件响应，这种方法很独特
            _file.addEventListener("change", function (_uploader) {
                return function () {
                    _ajax(_uploader);
                }
            }(_uploader));

            //将对象传出
            _uploader._file_ = _file;
            _uploader._container_ = _container;

            //初始状态
            _uploader._file_.style.display = "block";

            return _container;
        }
    }(this);

    /**
     * 异步传输文件
     * @param _uoloader 文件上传器
     * @private
     */
    function _ajax(_uploader) {
        var _files = _uploader._file_.files;
        //检查文件是否为空
        if(_files.length == 0){
            alert("请先选择文件！");
            return;
        }

        /*for(var i=0;i<_files.length;i++){
            console.log(_files[i].name);
        }*/

        //循环上传文件
        for(var i=0; i<_files.length; i++){
            var _file = _files[i];

            //创建xhr对象
            var xhr = new XMLHttpRequest();
            var _formData = new FormData();
            _formData.append("file", _file);

            //生成上传进度条
            var _progress = document.createElement("progress");
            _progress.setAttribute("max", "100");
            //生成文字标签
            var _label = document.createElement("label");
            _label.innerHTML = "正在上传"
            //创建容器，并将进度条和标签添加到容器中
            var _div = document.createElement("div");
            _div.appendChild(_progress);
            _div.appendChild(_label);
            _div.style.display = "none";    //隐藏容器

            _uploader._container_.appendChild(_div);    //将容器添加到页面中

            //状态变化相应处理
            xhr.onreadystatechange = function (_div,_xhr) {
                return function () {
                    //如果正准备上传
                    if(_xhr.readyState == 1){
                        _div.style.display = "block";
                    }
                    //如果上传完成
                    else if(_xhr.readyState == 4 && _xhr.status == 200){
                        _div.getElementsByTagName("label")[0].innerHTML = _xhr.responseText;
                    }
                }
            }(_div,xhr);
            //上传进度处理
            xhr.upload.onprogress = function (_pg) {
                return function (event) {
                    var percentCompleted = Math.round(event.loaded * 100 / event.total);//计算上传百分比
                    _pg.setAttribute("value", percentCompleted);    //显示在进度条上
                }
            }(_progress);

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