首页 > 代码库 > HTML5 JavaScript 文件上传
HTML5 JavaScript 文件上传
function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = ‘_fileselect‘; // 文件尺寸 this.fileSize = 0; // 上传表单名称 var formName = ‘‘; var callback = new Object(); // 初始化函数 function init() { this.uploadUrl = targetUrl; var btnObject = getFileObject(); btnObject.onchange=function(){ var fileObj = getFileObject(); var fd = createForm(fileObj); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", listenerProcess, false); xhr.addEventListener("load", listenerLoad, false); xhr.addEventListener("error", listenerError, false); xhr.addEventListener("abort", listenerAbort, false); xhr.open("POST", targetUrl); xhr.send(fd); }; } // 获取表单对象 function getFileObject(){ if(!document.getElementById(inputName)){ var btn=document.createElement("input"); btn.setAttribute("type","file"); btn.setAttribute("style","display:none;"); btn.setAttribute("id",inputName); document.body.appendChild(btn); } return document.getElementById(inputName); } // 选在文件 this.selectFile = function(name){ formName = name; document.getElementById("_fileselect").click(); } // 外部流程监听 this.processListener = function(callbackProcess,callbackFinish){ callback.process = callbackProcess; callback.finish = callbackFinish; } // 生成表单对象 function createForm(fileObj){ var fd = new FormData(); this.fileSize = fileObj.files[0].size; fd.append(formName, fileObj.files[0]); return fd; } // 处理进度响应监听 function listenerProcess(evt){ callback.process(evt.position / evt.totalSize * 100); } // 处理完成响应监听 function listenerLoad(evt){ callback.finish(evt.target.responseText); } // 处理错误响应监听 function listenerError(evt){} // 处理终止响应监听 function listenerAbort(evt){} // 主动初始化 init();}
[ 调用 ]
// 实例化对象的时候,上传URL为参数var fileObj = new fileUpload(‘/user_center/user_place/upload_logo‘);// 上传监听 第一个参数为上传进度通知,第二个参数为上传完成服务器的返回fileObj.processListener(function(val){ // 上传进程处理},function(val){ var obj = eval(‘(‘+val+‘)‘); if(obj.state==‘1‘){ $(‘#preView‘).attr(‘src‘,obj.url); $(‘input[name="placelogo"]‘).val(obj.url); }else{ alert(obj.error); }});// 上传按钮点击时候触发下面方法,参数为表单名称fileObj.selectFile(‘logo‘);
HTML5 JavaScript 文件上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。