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