H5原生文件上传

一 、获取文件

var file=DOM对象.files[0]; //获取的第一个文件

二、判断文件大小

   file.size > 52428800  //判断大小是否小于50M

三、上传文件(用FormData封装）

    var data = new FormData();
    data.append('myFiles', self.file);  
    LessonBeforeHandler.upResource(data, self, self.GetResOrigin);//调用上传接口

四、上传进度（H5原生进度条）

LessonBeforeHandler.upResource= function(data,listener,listenerFun) { 
    $.ajax({
        url:上传地址,
        data: data,
        type: "post",
        timeout: 300000,
        cache: false,
        processData: false,
        contentType: false,
        xhrFields: {
            withCredentials: true
        },
        xhr: function(){ 
            //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
            var myXhr = $.ajaxSettings.xhr(); 
            if(myXhr.upload){ //检查upload属性是否存在
                //绑定progress事件的回调函数
                myXhr.upload.onprogress = progressFunction;
            }
            return myXhr; //xhr对象返回给jQuery使用
        },
        success: function (data) { 
            if (data.code == 0) {
                listenerFun.call(listener,true,data.result);
            }  else {
                listenerFun.call(listener, false, data.code, data.msg);
            }
        },
        error: function (data) { 
            listenerFun.call(listener, false, data.status, data.statusText)
        }
    });

    //progress事件的回调函数
    function progressFunction(evt) { 

        var widthAll=$("#progress-all").width();
        var progressBar = document.getElementById("progress-all");
        var percentageDiv = document.getElementById("progress-now");
        var percentageNum = document.getElementById("progress-num");

        if (evt.lengthComputable) {
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            $(percentageDiv).css("width",Math.round(evt.loaded / evt.total *widthAll)+"px");
            percentageNum.innerHTML = Math.ceil(evt.loaded / evt.total * 100) + "%";
            if (evt.loaded == evt.total) {
                console.log("上传完成100%");
            }
        }
    }
};