FileUpload选择图片即时显示在一个Div中，求解答

[tp420116]

<tr>
<td class="t1">封面</td>
<td class="t2" style=" height:150px;">
<asp:Image ID="Image1" runat="server" />
<asp:FileUpload ID="fudIamge" runat="server" />
</td>
</tr>

在FileUpload选择一张图片之后马上显示在Image中(先不上传)，据说在IE8中是不太可能实现，麻烦给个比较好理解的
解决方案！谢谢*……

[ycproc]

http://www.360doc.com/content/10/1027/12/3883221_64411209.shtml

上传并预览

[liuxing19870629]

<asp:FileUpload ID="fudIamge" runat="server" />
加上onchange="GetImg(this);"

js

function GetImg(o)
{
    img=document.getElementById(Image1);
    if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value))
    {
        alert('只能上传jpg,bmp,gif,png格式图片!');
        o.outerHTML = o.outerHTML;//清空选择文件
    }
    else
    {
        if($(".RoomImgHave,.ItemImgHave,.TypeImgHave,.imgHaved").length==10)
        {
            o.outerHTML = o.outerHTML;
            alert("图片张数已达到最大限制！");
            return false;
        }
        img.style.width = "130px";   
        img.style.height = "90px";
        img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)"; 
        img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value;
    }
}

[liuxing19870629]

if($(".RoomImgHave,.ItemImgHave,.TypeImgHave,.imgHaved").length==10)
        {
            o.outerHTML = o.outerHTML;
            alert("图片张数已达到最大限制！");
            return false;
        }

这个不要，从我以前的项目里复制出来的，没注意，忘了删了。

[porschev]

浏览器的安全原因，这个做不到。。

一般都是上传到一个临时文件夹，再预览。。。

[我想有个浪漫小屋]

[Quote=引用 1 楼 的回复:]
http://www.360doc.com/content/10/1027/12/3883221_64411209.shtml

上传并预览
[/Quote]
Up Up

[事理]

http://www.cnblogs.com/slyzly/articles/2411940.html

网上很多都不兼容，我最近新做的，兼容多种浏览器

[事理]

<asp:FileUpload ID="fuHeadPhoto" runat="server" onchange="ShowImage(this)" size="20" />

[SomethingJack]

完美的上传预览还是flash好- -

[yzf86211861]

[Quote=引用 1 楼 的回复:]
http://www.360doc.com/content/10/1027/12/3883221_64411209.shtml

上传并预览
[/Quote]
Mark

[L61551]

这个我做过。后来觉得用着觉得挺烦的。因为浏览器的情况太多了。甚至火狐浏览器不同的版本都会有问题。。
如果还是想弄。就搜一下 图片上传预览。有现成的js

[冰镇宝贝321]

[Quote=引用 1 楼 的回复:]
http://www.360doc.com/content/10/1027/12/3883221_64411209.shtml

上传并预览
[/Quote]

这个我看过了 你去试试下

[天齐贺少]

可以用JQ图片上传Uploadify。
可以去瞧瞧
http://www.uploadify.com/
演示地址：http://www.uploadify.com/demos/

[天齐贺少]

http://apps.hi.baidu.com/share/detail/9247525
在给你个简介地址

[dan_le]

我以前遇到这个问题，也查过资料，没有解决啊。如果有好方法，分享

[huangwenquan123]

[Quote=引用 4 楼 的回复:]
浏览器的安全原因，这个做不到。。

一般都是上传到一个临时文件夹，再预览。。。
[/Quote]+1
可以用iframe,设置其name,form target到设置的name用来模拟无刷新
不然就用flash
swfupload不错。
或者看看其他这些
http://www.open-open.com/ajax/Upload.htm

[mngzilin]

// JScript 文件
   var	SleepTotal=0;

function SleepImg(imgObjId,sizeObjId) {
        if(SleepTotal>10) return false;
        var view=document.getElementById(imgObjId);
        var isize=document.getElementById(sizeObjId);
        var imgsrc=document.getElementById(imgObjId).src;
        if(view.readyState=="complete") {
			if(view.fileSize>1024*1024*2) {
					view.src=imgsrc;
					alert(view.src);
				return false;
			}
            isize.innerHTML="(大小:"+Math.ceil(view.fileSize/1024)+"K)";
        }       
        else setTimeout("SleepImg('"+imgObjId+"','"+sizeObjId+"')", 500);
}
   function ShowImg(obj,imgObjId,sizeObjId){

	if(obj.value=="") return false;
	var imgsrc=document.getElementById(imgObjId).src;
	var view=document.getElementById(imgObjId);
	if(obj.files)
	{
	    view.src=obj.files[0].getAsDataURL();
	    SetFileSize(obj.files[0],sizeObjId);
	}
	else
	{
	    view.src=obj.value;
	    if(obj.value.search(/\.jpg|\.jpeg|\.bmp|\.gif|\.emf|\.wmf|\.xbm|\.png$/i) == -1) {
		    alert("文件格式不正确");
		    view.src=imgsrc;
		    return false;
	    }
	
	    var isize=document.getElementById(sizeObjId);
	    if(view.readyState=="complete") {
		    if(view.fileSize>1024*1024*2) {		
			    alert("该图片超过2M");		    	
		    	    alert(view.src);
			    return false;
		    }
		    isize.innerHTML="(大小:"+Math.ceil(view.fileSize/1024)+"K)";
	    }
	    else setTimeout("SleepImg('"+imgObjId+"','"+sizeObjId+"')", 500);
	}	
}
function SetFileSize(file,size)
{
    document.getElementById(size).innerHTML="(大小:"+Math.ceil(file.fileSize/1024)+"K)";
}

将上面js保存到js文件并引用到页面后，调用如下：

  <asp:Image ID="Image1" runat="server" />
  <asp:FileUpload ID="fudIamge" runat="server" onchange="ShowImg(this,'fudIamge','Image1')" />

如果id错误那就需要使用<%=Image1.ClientID%>来代替Image1，fudIamge同理

[习惯就好]

对，可以先放到临时文件夹，每次操作后，上传提交图片后清空临时文件夹

[Quote=引用 4 楼 的回复:]
浏览器的安全原因，这个做不到。。

一般都是上传到一个临时文件夹，再预览。。。
[/Quote]

[yangchenhuahua]

在上传空间onchange事件里 把值赋给<img>

[色拉油]

正解[Quote=引用 4 楼 的回复:]
浏览器的安全原因，这个做不到。。

一般都是上传到一个临时文件夹，再预览。。。
[/Quote]