原生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();
    }