/* * zxxFile.js 基于HTML5 文件上传的核心脚本 http://www.zhangxinxu.com/wordpress/?p=1923 * by zhangxinxu 2011-09-12 */ var ZXXFILE = { fileInput: null, //html file控件 dragDrop: null, //拖拽敏感区域 upButton: null, //提交按钮 url: "", //ajax地址 fileFilter: [], //过滤后的文件数组 filter: function(files) { //选择文件组的过滤方法 return files; }, onSelect: function() {}, //文件选择后 onDelete: function() {}, //文件删除后 onDragOver: function() {}, //文件拖拽到敏感区域时 onDragLeave: function() {}, //文件离开到敏感区域时 onProgress: function() {}, //文件上传进度 onSuccess: function() {}, //文件上传成功时 onFailure: function() {}, //文件上传失败时, onComplete: function() {}, //文件全部上传完毕时 /* 开发参数和内置方法分界线 */ //文件拖放 funDragHover: function(e) { e.stopPropagation(); e.preventDefault(); this[e.type === "dragover"? "onDragOver": "onDragLeave"].call(e.target); return this; }, //获取选择文件,file控件或拖放 funGetFiles: function(e) { // 取消鼠标经过样式 this.funDragHover(e); // 获取文件列表对象 var files = e.target.files || e.dataTransfer.files; //继续添加文件 this.fileFilter = this.fileFilter.concat(this.filter(files)); this.funDealFiles(); return this; }, //选中文件的处理与回调 funDealFiles: function() { for (var i = 0, file; file = this.fileFilter[i]; i++) { //增加唯一索引值 file.index = i; } //执行选择回调 this.onSelect(this.fileFilter); return this; }, //删除对应的文件 funDeleteFile: function(fileDelete) { var arrFile = []; for (var i = 0, file; file = this.fileFilter[i]; i++) { if (file != fileDelete) { arrFile.push(file); } else { this.onDelete(fileDelete); } } this.fileFilter = arrFile; return this; }, //文件上传 funUploadFile: function() { var self = this; if (location.host.indexOf("sitepointstatic") >= 0) { //非站点服务器上运行 return; } // for (var i = 0, file; file = this.fileFilter[i]; i++) { // (function(file) { file = this.fileFilter[this.fileFilter.length-1] console.log(file); var xhr = new XMLHttpRequest(); if (xhr.upload) { // 上传中 xhr.upload.addEventListener("progress", function(e) { self.onProgress(file, e.loaded, e.total); }, false); // 文件上传成功或是失败 xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { if (xhr.status == 200) { self.onSuccess(file, xhr.responseText); self.funDeleteFile(file); if (!self.fileFilter.length) { //全部完毕 self.onComplete(); } } else { self.onFailure(file, xhr.responseText); } } }; // 开始上传 xhr.open("POST", self.url, true); xhr.setRequestHeader("X_FILENAME", encodeURI(file.name)); console.log(file) xhr.send(file); } // })(file); // } }, init: function() { var self = this; if (this.dragDrop) { this.dragDrop.addEventListener("dragover", function(e) { self.funDragHover(e); }, false); this.dragDrop.addEventListener("dragleave", function(e) { self.funDragHover(e); }, false); this.dragDrop.addEventListener("drop", function(e) { self.funGetFiles(e); }, false); } //文件选择控件选择 if (this.fileInput) { this.fileInput.addEventListener("change", function(e) { self.funGetFiles(e); }, false); } //上传按钮提交 if (this.upButton) { this.upButton.addEventListener("click", function(e) { self.funUploadFile(e); }, false); } } };