html input file 图片,html,图片上传预览，input file获取文件等相关操作

上传图片

//下面用于图片上传预览功能

functionsetImagePreview() {varobj=document.getElementById("upimage");varimgObjPreview=document.getElementById("preview");varsrc=event.target||window.event.srcElement;//获取事件源，兼容chrome/IE

//下面把路径截取为文件名

varfilename=src.value;//图片完整路径

varprefix=filename.substring( filename.lastIndexOf(‘\\‘)+1);//获取文件名的前缀名(文件格式)

varsuffix=filename.substring( filename.lastIndexOf(‘.‘)+1).toLocaleLowerCase();//获取文件名的后缀名(文件格式)

console.log(suffix);if(suffix!=‘jpg‘ &&suffix!=‘png‘){

alert("图片格式只能为jpg 或者 png");

obj.outerHTML=obj.outerHTML;//清空选择按钮

return false;

}if(obj.files&&obj.files[0])

{if(obj.files[0].size>2048000){

alert("文件超过2M");

obj.outerHTML=obj.outerHTML;//清空选择按钮

return false;

}//火狐下，直接设img属性

imgObjPreview.style.display= ‘block‘;

imgObjPreview.style.width= ‘150px‘;

imgObjPreview.style.height= ‘180px‘;

console.log(obj.files[0].size);//imgObjPreview.src = obj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

imgObjPreview.src=window.URL.createObjectURL(obj.files[0]);//写入文件流

}else{

obj.select();//IE下，使用滤镜

varimgSrc=document.selection.createRange().text;//路径

varlocalImagId=document.getElementById("imageDiv");varimg=document.getElementById("preview");

alert(localImagId.fileSize);//必须设置初始大小

localImagId.style.width= "150px";

localImagId.style.height= "180px";//图片异常的捕捉，防止用户修改后缀来伪造图片

try{

localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgSrc;//显示图片

}catch(e)

{

alert("您上传的图片格式不正确，请重新选择!");return false;

}

imgObjPreview.style.display= ‘none‘;

document.selection.empty();

}return true;

}