码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-09-02 14:02:47      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:cal   文件的   console   sel   eid   zid   ado   i++   readonly   

      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获取文件的字节会出现与其他图片的字节混乱的问题,故需要重新计算。

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

标签:cal   文件的   console   sel   eid   zid   ado   i++   readonly   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!