您的位置:首页 > 其它

图片上传前预览,支持IE各版本、火狐、谷歌浏览器

2013-07-02 12:50 393 查看
JS函数实现部分

/*
* 绑定文件域onchange事件,实现图片上传前预览 IE6-IE10 firefox Chrome
* @param fileInputObject Object onchange中传this执行input
* @param imgControlsID string image标签id
* @return void
*/
function changePreviewImgSrc(fileInputObject,imgControlsID)
{
if(typeof FileReader === "undefined")
{
//针对各个版本的IE
if(navigator.userAgent.indexOf("MSIE") > 0)
{
document.getElementById("imgControlsID").src = "file:///" + fileInputObject.value;
}
}
else
{
var reader = new FileReader();
reader.readAsDataURL(fileInputObject.files[0]);
reader.onload = function(e)
{
document.getElementById("imgControlsID").src = e.target.result;
}
}
}

HTML demo

<input type="file" onchange="changePreviewImgSrc(this,'ff')"/>
<img id="ff" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: