项目三、文件上传器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); //发生文件 } } }