img 如何访问本地图片？

[l171147904]

img 如何访问本地图片？

<img scr=?>

背景：用户新增一个DIV，里面带IMG；用户选择本地图片为 IMG的SCR！ 如何访问???


别说，绝对路径（scr="C:\1.jpg"）；要有觉得绝对路径可行的朋友！请直接给代码

求解啦！

[wuyq11]

图片预览
<script language="javascript" type="text/javascript">
function PreviewImg(imgFile)
{
var newPreview = document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "80px";
newPreview.style.height = "60px";
}
</script>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
<div id="newPreview"> </div>


function $(o){return document.getElementById(o);}
function CheckImg(o,img)
{
if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value))
{
alert('只能上传jpg,bmp,gif,png格式图片!');
o.outerHTML = o.outerHTML;
}
else
{
$(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value;
}
}

<asp:FileUpload ID="FileUpload1" runat="server" onchange="CheckImg(this, 'img');" />
<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= <%= pic%>,sizingMethod=scale);width:88px;height:113px;"> </div>
public string pic="";

[丰云]

必须先上传到服务器，再回发到页面！！！

[丰云]

这个上传再回发的过程页面可以不表现出来，但后台必须这么做。

[migercai]

只支持IE

   <script type="text/javascript">
        var right_type = new Array(".gif", ".jpg", ".jpeg", ".png", ".bmp")
        function checkImgType(fileURL) {     
            //本程序用来验证后缀，如果还有其它格式，可以添加在right_type;   
            var right_typeLen = right_type.length;
            var imgUrl = fileURL.toLowerCase();
            var postfixLen = imgUrl.length;
            var len4 = imgUrl.substring(postfixLen - 4, postfixLen);
            var len5 = imgUrl.substring(postfixLen - 5, postfixLen);
            for (i = 0; i < right_typeLen; i++) {
                if ((len4 == right_type[i]) || (len5 == right_type[i])) {
                    return true;
                }
            }
        }
        
        var tempimg = new Image(); //构建一个image对象，用来临时存取上传的图片信息
        function perImg(obj) {//o是浏览上传的值;
            var o = obj.value;
            var divid = "img_see_" + obj.id.substring(9, obj.id.length);
            isOpare = (navigator.userAgent.toLowerCase().indexOf("opera") != -1) ? true : false;
            if (isOpare && o.indexOf("http://") == -1) { document.getElementById(divid).innerHTML = "Opera 浏览器得到不本地路径，所以无法提供预览效果，谢谢！"; return; }
            if (o != "") {
                // o=encodeURIComponent(o);   
                if (o.indexOf("file:///") == -1 && o.indexOf("http://") == -1) o = "file:///" + o;
                //给url加上file,这种方式在非windows平台可能会有问题;   
                o = o.replace(/\\/g, "/");
                tempimg.src = o;
                //alert(o+"||"+tempimg.width+"||"+tempimg.height);
                //clearTimeout(re);
                //re = setTimeout("resize(tempimg,divid);", 100);
                resize(tempimg, divid); 
            }
        }

        function resize(o, divid) {
            //预览时若图片宽或高大于200*200,则设定宽或高最大为200*200;   
            //上传后再用java/php/c等裁剪生成大小两张图片;   
            ow = o.width;
            oh = o.height;
            var ow2 = ow, oh2 = oh; //得到宽高   
            //alert("ow:"+ow+"oh:"+oh+"\now2:"+ow2+"oh2"+oh2)   
            try {
                if (ow > oh) {//如宽大于高且宽大于200就缩小宽为200,高则按比例缩放   
                    if (ow > 200) { ow2 = 200; oh2 = "auto"; }
                } else {//如高大于宽且高大于200就缩小高为200,宽则按比例缩放   
                    if (oh > 200) { oh2 = 200; ow2 = "auto"; }
                }
                var info = "原宽:" + ow + " || 原高:" + oh + " == " + "改后宽:" + ow2 + " || 改后高:" + oh2;
                var getimg = "<a href=\"" + o.src + "\" target=\"_blank\">"
                                + "<img border=\"0\" id=\"uploadimg\" src=\"" + o.src + "\" style=\"width:" + ow2 + ";height:" + oh2 + ";\">"
                                + "</a>";
                document.getElementById(divid).innerHTML = getimg;
            } catch (ex) {
                alert(ex.toString());
            }

        }
        
    </script>

上面为脚本，下面为html

  <input type='file'  id='img_path_{0}' name='img_path_{0}' onchange='{1}' />
  <div runat="server" id="AdvContent" width="100%">
            
        </div>

[migercai]

onchange="if(checkImgType(this.value)){perImg(this)};"

[migercai]

页面引用jquery

[camperer]

ie6可以，IE8就默认阻止了。。

[l171147904]

这么麻烦嘛。。。。。求救啊！！！

上传服务器，不是解决办法啊！

用户浏览完图片，可能选择关闭！不上传了。。。

这样无形上传1张无用图片到服务器，或你还要做一次 删除操作！

[sunnj87]

是要选择图片然后在本地预览吗？
IE以前的版本直接给src=“”就行，但是IE7，8好像都不支持了。
得用DXImageTransform.Microsoft.AlphaImageLoader
上网上搜下，就能搞定了

[chen_ya_ping]

[Quote=引用 8 楼 sunnj87 的回复:]
是要选择图片然后在本地预览吗？
IE以前的版本直接给src=“”就行，但是IE7，8好像都不支持了。
得用DXImageTransform.Microsoft.AlphaImageLoader
上网上搜下，就能搞定了
[/Quote]
试试，这个，但是这样不是所有的游览器都是有效果的。