[HTML难点及解决]input的file属性显示图片

来源：互联网发布：淘宝信誉评级极好优秀编辑：程序博客网时间：2024/05/30 07:13

一下资料转至其他网站，若有侵权请告知会尽快删除

以下两种方法，可用（非获取完整路径）

方法一[资料来源：js获取 input file 图片立即显示]：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">        <body>                <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"><p><div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div></p><script>function setImagePreview() {        var docObj=document.getElementById("doc");         var imgObjPreview=document.getElementById("preview");                if(docObj.files &&    docObj.files[0]){                        //火狐下，直接设img属性                        imgObjPreview.style.display = 'block';                        imgObjPreview.style.width = '300px';                        imgObjPreview.style.height = '120px';                                            //imgObjPreview.src = docObj.files[0].getAsDataURL();      //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);                }else{                        //IE下，使用滤镜                        docObj.select();                        var imgSrc = document.selection.createRange().text;                        var localImagId = document.getElementById("localImag");                        //必须设置初始大小                        localImagId.style.width = "300px";                        localImagId.style.height = "120px";                        //图片异常的捕捉，防止用户修改后缀来伪造图片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;        }</script></body></html>

方法二：参考链接http://blog.csdn.net/dracotianlong/article/details/38046939

[读取input:file的路径并显示本地图片的方法]

0 0