jquery实现上传图片预览,可兼容大部分浏览器

Javascript 3621 0 2012-08-25

jquery实现上传图片预览,可兼容大部分浏览器

<script language="javascript" src="jquery-1.8.0.min.js"></script>

function readURL(input){ 

if (input.files && input.files[0]){
    var reader = new FileReader(); 
    reader.onload = function(e){ $('#img_prev').attr('src', e.target.result).width(150).height(200); };
    reader.readAsDataURL(input.files[0]);
}else{
    //IE下,使用滤镜
    var docObj=document.getElementById('doc'); docObj.select();
    var imgSrc = document.selection.createRange().text;
    var localImagId = document.getElementById("localImag");
    $('#localImag').width(150).height(200); //必须设置初始大小
    //图片异常的捕捉,防止用户修改后缀来伪造图片
    try{
    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    }catch(e){
    alert("您上传的图片格式不正确,请重新选择!"); return false;
    }
    $('#img_prev').hide();
    document.selection.empty();
}

}

 

<input type='file' id="doc" onchange="readURL(this);" />
<div id="localImag"><img id="img_prev" src="" alt="your image" /></div>

上一篇:jQuery1.8正式版全新JS框架发布下载 模块化代码更小

下一篇:jquery-append动态创建节点元素与内部插入节点

讨论数量:2

天涯网魂 3 杠 5 星2013-08-07 17:50:17

这个太好了!找一个能用的真不容易

天涯网魂 3 杠 5 星2012-08-25 12:54:18

本人测试通过,IE系列(IE6、IE7、IE8)、火狐(Firefox)、谷歌(Chrome)、欧朋(Opera)等等。

请先登录再发表讨论。 2024-05-01

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链