首页 > 代码库 > 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 文件上传