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');