标签: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获取文件的字节会出现与其他图片的字节混乱的问题,故需要重新计算。
标签:cal 文件的 console sel eid zid ado i++ readonly
原文地址:https://www.cnblogs.com/wuchaofan1993/p/11445718.html