H5原生文件上传

来源：互联网发布：应用程序界面设计软件编辑：程序博客网时间：2024/05/22 09:47

一、获取文件

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%");            }        }    }};

0 0