input file多选时获取的文件字节与文件不对应的问题

      window.onload = function(){
        var input=document.getElementById("file");
        if ( typeof(FileReader) === ‘undefined‘ ){
        input.setAttribute( ‘disabled‘,‘disabled‘ );
        } else {
        input.addEventListener( ‘change‘,xmTanUploadImg,false );}
        }
         //选择图片，马上预览
    function xmTanUploadImg() {
     document.getElementById(‘validfile‘).value="0";
        var obj=document.getElementById("file");
        var fl = obj.files.length;
        for (var i = 0; i < fl; i++) {
            var file = obj.files[i];
            //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
                }
            var reader = new FileReader();

            //读取文件过程方法

            reader.onloadstart = function(e) {
                console.log("开始读取....");
            }
            reader.onprogress = function(e) {
                console.log("正在读取中....");
            }
            reader.onabort = function(e) {
                console.log("中断读取....");
            }
            reader.onerror = function(e) {
                console.log("读取异常....");
            }

            reader.readAsDataURL(file);
            reader.onload = function(e) {
                console.log("成功读取....");
                  var nDiv = document.getElementById(‘divnum‘).value;
                  document.getElementById(‘divnum‘).value = parseInt(nDiv) + 1;
                  var nValidFile = document.getElementById(‘validfile‘).value;
                  document.getElementById(‘validfile‘).value = parseInt(nValidFile) + 1;
                var strimgId = ‘img‘ + nDiv;
                var strfileId = ‘file‘ + nDiv;
                var strsizeId = ‘size‘ + nDiv;
                var strbzId = ‘bz‘ + nDiv;
                var strtplxId = ‘tplx‘ + nDiv;
                var strdivId = ‘div‘ + nDiv;
                var strbtnId = ‘btn‘ + nDiv;
                var strValueId=‘val‘ + nDiv;
                var strInputId=‘input‘ + nDiv;
                //直接根据索引获取文件字节会出现与其他图片大小错乱，故需要重新计算
                var base64url=this.result
                var str = base64url.replace(‘data:image/jpeg;base64,‘, ‘‘);//这里根据自己上传图片的格式进行相应修改
                str = str.replace(‘data:image/png;base64,‘, ‘‘);//这里根据自己上传图片的格式进行相应修改

                var strLength = str.length;
                var fileLength = parseInt(strLength - (strLength / 8) * 2);

                // 由字节转换为KB
                var size = "";
                size = parseInt(fileLength / 1024);
                document.getElementById("nSumFileSize").value=parseInt(document.getElementById("nSumFileSize").value)+size;
                var strhtm = ‘<div id="‘ + strdivId + ‘" class="PicDiv">‘;
                strhtm = strhtm + ‘<div style="float:left;"><img onerror="this.src=\‘/img/wfyl.gif\‘" style="cursor:pointer;" id="‘ + strimgId + ‘" src="‘+ e.target.result +‘" width=100 height=100 align=absmiddle ></div>‘;
                strhtm = strhtm + ‘<div  class="RightDiv"><p><span class="inputtitle">大小</span><input  class="inputnormal"  value="‘+size+‘kb" style="width:50px;vertical-align: middle;" readonly id="‘ + strsizeId + ‘" name="‘ + strsizeId + ‘">‘;
                strhtm = strhtm + ‘<span class="inputtitle">名称</span>‘;
                strhtm = strhtm + ‘<select class="inputnormal width_query_k"  id="‘+strtplxId+‘" name="‘+strtplxId+‘">‘;
                strhtm = strhtm + strtplxsels;
                strhtm = strhtm + ‘ </select>‘;
                strhtm = strhtm + ‘<span class="inputtitle">备注</span>‘;
                strhtm = strhtm + ‘<textarea id="‘+strInputId+‘" name="‘+strInputId+‘" style="display:none">‘+this.result+‘</textarea>‘;
                strhtm = strhtm + ‘<input class="inputnormal" style="width:200px;"  id="‘+strbzId+‘" name="‘+strbzId+‘"><input type="hidden" name="‘+strValueId+‘" id="‘+strValueId+‘" value="havevalue">‘;
                strhtm = strhtm + ‘<img src="/img/scbz1.gif" border=0 alt="删除" onclick="document.getElementById(\‘nSumFileSize\‘).value =parseInt(document.getElementById(\‘nSumFileSize\‘).value) -parseInt(document.getElementById(\‘‘+strsizeId+‘\‘).value);$(\‘#‘ + strdivId + ‘\‘).remove();$(\‘#‘ + strfileId + ‘\‘).remove();"></p>‘;
                strhtm = strhtm + ‘</div>‘;
                strhtm = strhtm + ‘</div>‘;
            document.getElementById(‘MyFiles‘).insertAdjacentHTML("beforeEnd", strhtm);
            }
        }

    }

reader.onload中直接通过file.files.size获取文件的字节会出现与其他图片的字节混乱的问题，故需要重新计算。

原文地址：https://www.cnblogs.com/wuchaofan1993/p/11445718.html