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