原生ajax文件上传（前端部分）

原生ajax上传文件 ：记录

 <div style="display: none;"><input type="file" id="i-imgfile" data-value='' accept="image/jpeg,image/jpg,image/png,application/zip"></div>

绑定事件

    $('#i-imgfile').on('change', function (e) {
        uplimg(e);
    });

//上传图片
    function uplimg(e)
    {
        //1.从事件对象中获取上传文件的信息 提出后缀名 大小等
        var file = e.target.files[0]; //从事件对象中获取上传文件的信息 e.target.fiels 有上传文件的信息 大小等
        if(file == undefined) return;
        var ext = get_subfix(file.name); //获取文件的后缀名
        var fss = file.size;//获取文件的大小

        //2.检测文件的大小，并针对png和zip单独
        var maxfs = (ext == 'zip') ? 400*1024*1024 : 10*1024*1024;//定义文件zip类型和图片类型的尺寸并进行检测
        if(fss > maxfs){
            hintErr('文件过大啦');
            return;
        }

        //3.如果是图片只针对jpg、png、jpeg进行处理
        if(ext == 'jpg' || ext == 'png' || ext == 'jpeg'){
            //调出上传进度的弹框
            $('.progress-bar').css('width', "0%");
            $(".loading_progress_bar span").html("0%");
            $(".loading_progress_bar").show();
            var xhr = new XMLHttpRequest();  //实例化原生ajax
            console.log(xhr);return;
            var loaded, tot, per;
            var fd = new FormData();
            fd.append("rawfile", file);//formdata是构建键值对数据和form表单一样 这里将事件中文件信息构成键值对放入;
            //侦查当前附件上传情况
            xhr.upload.onprogress = function(evt) {
                loaded = evt.loaded;
                tot = evt.total;
                per = Math.floor(100 * loaded / tot); //已经上传的百分比
                $('.progress-bar').css('width', per+"%");
                $(".loading_progress_bar span").html(per+"%");
            };
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.responseText);
                    $(".loading_progress_bar").hide();
                    var url = host+'/env/'+g_it.plan_card[i];
                    $('#i-imgfile').attr('data-value',data.data);
                }
            };
            xhr.open("post", "/api_special/add_pack_img?uid="+g_uid+"&id="+g_id+"&status="+g_status);
            xhr.send(fd);
        }else{
            hintErr('请上传格式正确的图片');
            return;
        }
    }

    function get_subfix(name)
    {
        var ext = name.substring(name.lastIndexOf('.') + 1);
        return ext.toLowerCase();
    }