FileUpload图片上传预览问题

wenblue7 2009-09-11 03:53:23
<script language="JavaScript" type="text/javascript">

function PreviewImg(imgFile)
{
var newPreview = document.getElementById("newPreview");
alert(imgFile.value);//
newPreview.style.backgroundImage= imgFile.value;
}

</script>
<asp:FileUpload ID="fu_Imge" runat="server" Width="300px" onchange="PreviewImg(this)" />
<div id="newPreview" ></div>

问题：
不管我选择本机哪个盘的图片
imgFile.value总是等于"C:\fakepath\"+图片的名称，同时网页报错“参数无效”
所以我下面的div根本就得不到正确的图片路径
因此无法预览
各位大侠这到底是什么情况？
...全文
3435 23 打赏 收藏 转发到动态 举报
写回复
用AI写文章
23 条回复
切换为时间正序
请发表友善的回复…
发表回复
liyoubaidu 2010-09-13
  • 打赏
  • 举报
 回复
鉴定：被淘汰的技术。
mengmeng1219 2010-07-13
  • 打赏
  • 举报
 回复
我也遇到这个问题 已解决

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PreviewImageInFileUpload.aspx.cs" Inherits="PreviewImageInFileUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Preview Image In FileUpload</title>
<%--CSS--%>
<style type="text/css">
#newPreview{
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style>
</head>
<body>
<%--JavaScript--%>
<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>

<form id="form1" runat="server">
<div>
<%--添加onchange事件--%>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)" />
</div>
<%--建立一个div来存放预览--%>
<div id="newPreview"></div>

</form>
</body>
</html>
cloudgamer 2010-03-12
  • 打赏
  • 举报
 回复
这里有一个支持ie ff的图片预览
试试看
wlsever 2009-12-29
  • 打赏
  • 举报
 回复
这是ie8的设置问题，ie8安全里面有一个自定义设置，将文件上传至服务器时包含路径开启就行了
动动 2009-12-03
  • 打赏
  • 举报
 回复
只用
<asp:FileUpload ID="FileUpload1" runat="server" />
和
<img class="newPreview" id="imgShow" alt="" />
可不可以实现预览呢？
binadan 2009-10-21
  • 打赏
  • 举报
 回复
asp:fileupload空间里面并没有 onchange事件啊 ？
你们确定有么？
wenblue7 2009-09-11
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 jianlanzq 的回复:]
引用 12 楼 wenblue7 的回复:
引用 7 楼 txg92 的回复:
var fileUrl="C:\\Documents and Settings\\Administrator\\桌面\\照片\\5001.jpg";   
JS传路径记得加“\\”两个斜杠，否则就会报什么参数无效脚本错误，以前我就遇到过
在IE7.0下预览比较特殊，用5楼的方法，滤镜，呵呵

应该就是这个问题
可是怎么加"\\"


如果是这样的话，就替换一下
比如
string s="C:\fakepath\1.jpg" ;
s=s.Replace("\","\\");

就OK了

[/Quote]
呵呵
我知道这样替换
可是在什么时候替换啊？
leon28 2009-09-11
  • 打赏
  • 举报
 回复
http://www.cnblogs.com/zhway/archive/2006/10/27/540901.html
拿去研究下吧
阳光彩虹小白马嘀嘀哒嘀嘀嗒 2009-09-11
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 wenblue7 的回复:]
引用 7 楼 txg92 的回复:
var fileUrl="C:\\Documents and Settings\\Administrator\\桌面\\照片\\5001.jpg";   
JS传路径记得加“\\”两个斜杠，否则就会报什么参数无效脚本错误，以前我就遇到过
在IE7.0下预览比较特殊，用5楼的方法，滤镜，呵呵

应该就是这个问题
可是怎么加"\\"
[/Quote]

如果是这样的话，就替换一下
比如
string s="C:\fakepath\1.jpg" ;
s=s.Replace("\","\\");

就OK了
wenblue7 2009-09-11
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 jianlanzq 的回复:]
...这么奇怪的问题

你哪里设置过上传的路径？webconfig?
[/Quote]
webconfig里面没有设置啊
我记得以前是可以的
可是我也不知道是为什么现在就出现这种状况了
wenblue7 2009-09-11
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 txg92 的回复:]
var fileUrl="C:\\Documents and Settings\\Administrator\\桌面\\照片\\5001.jpg";   
JS传路径记得加“\\”两个斜杠，否则就会报什么参数无效脚本错误，以前我就遇到过
在IE7.0下预览比较特殊，用5楼的方法，滤镜，呵呵
[/Quote]
应该就是这个问题
可是怎么加"\\"
阳光彩虹小白马嘀嘀哒嘀嘀嗒 2009-09-11
  • 打赏
  • 举报
 回复
...这么奇怪的问题

你哪里设置过上传的路径？webconfig?
wenblue7 2009-09-11
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 jianlanzq 的回复:]
给你一个 FileUpload图片上传前预览的例子，就是FileUpload选择图片后，可以预览，但并不上传

JS:
JScript codefunction $(o){return document.getElementById(o);}function CheckImgCss(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;
}
}

前台:
HTML code<asp:FileUploadID="FileUpload1" runat="server" onchange="CheckImgCss(this, 'img');"/><divid="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:88px;height:113px;"></div>

后台：
C# codepublicstring pic="";protectedvoid Page_Load(object sender, EventArgs e)
{

}
[/Quote]
首先谢谢这位同志的回答
可是我得到的o.value的值还是那样
例如我选择的是"D:\babypic\090808\1.jpg"
可是我的o.value的值确是"C:\fakepath\1.jpg"
所有这种方法在我这里还是无法预览
mxc1225 2009-09-11
  • 打赏
  • 举报
 回复
这只是预览,并没有上传事件
mxc1225 2009-09-11
  • 打赏
  • 举报
 回复
楼主,正好我这几天解决了这个问题!!
而且是在多浏览器上可以实现的!!
网上好多方法,但是在Firefox,ie8等高一点版本的浏览器就失效了!
以下是方法,希望对你有用!
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<%--<script type="text/javascript" src="Jscode/JScript.js"></script>--%>
</head>
<body>
<input type="file" name="File" id="File" onchange='loadImage(this)' />
<input id='preview' type='button' value='预览' style='display:none;' onclick='preview();' />
<div id='box'></div>
<script type="text/javascript">
var picPath;
var image;
// preview picture
function preview()
{
document.getElementById('preview').style.display = 'none';
// 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片 "+image.width+" "+image.height+"
document.getElementById('box').innerHTML
= "<img width='100' height='100' id='aPic' src='"+picPath+"'>";
}
// show view button
function buttonShow()
{
/*
这里用来解决图片加载延时造成的预览失败.
简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，
这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
这里我仍然有一个困惑，在IE7下预览效果偶尔会失效.
*/
if ( image.width == 0 || image.height == 0 ) {
setTimeout(buttonShow, 1000);
} else {
document.getElementById('preview').style.display = 'none';
}
}
function loadImage(ele) {
picPath = getPath(ele);
image = new Image();
image.src = picPath;
setTimeout(buttonShow, 1000);
document.getElementById("preview").click(); //在这里是自动触发那个预览按钮事件!!
}
function getPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</body>
</html>
txg92 2009-09-11
  • 打赏
  • 举报
 回复
var fileUrl="C:\\Documents and Settings\\Administrator\\桌面\\照片\\5001.jpg";
JS传路径记得加“\\”两个斜杠，否则就会报什么参数无效脚本错误，以前我就遇到过
在IE7.0下预览比较特殊，用5楼的方法，滤镜，呵呵
阳光彩虹小白马嘀嘀哒嘀嘀嗒 2009-09-11
  • 打赏
  • 举报
 回复
刚试过可以。

如果想固定div的大小，就
public string pic = "服务器的一个图片地址";

也就是事先显示一个图片，比如你可以显示一个“暂无图片”的图片。

大小可以在div的属性里控制。
阳光彩虹小白马嘀嘀哒嘀嘀嗒 2009-09-11
  • 打赏
  • 举报
 回复
给你一个 FileUpload图片上传前预览的例子，就是FileUpload选择图片后，可以预览，但并不上传

JS:
function $(o){return document.getElementById(o);}

function CheckImgCss(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="CheckImgCss(this, 'img');"  />

<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=<%= pic%>,sizingMethod=scale);width:88px;height:113px;"></div>


后台：
public string pic = ""; 

protected void Page_Load(object sender, EventArgs e)

{

     

}
wenblue7 2009-09-11
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 zccmy22 的回复:]
能说下你要做什么吗？
[/Quote]
点击上传图片，选择要上传的图片后，预览所选的图片
zccmy22 2009-09-11
  • 打赏
  • 举报
 回复
能说下你要做什么吗？
加载更多回复（2）
fileupload上传图片前预览
实现asp.net中使用fileupload控件上传图片前预览功能，可兼容ie6,ie7,ie8,火狐等浏览器，实现真正的上传图片前预览，节约网络资源
asp.net vs2012 fileupload 图片上传前预览
asp.net vs2012 fileupload 图片上传前预览
.NET 使用FileUpload上传并预览
使用FileUpload快速上传并保存图片，可以在使用 FileUpload选择图片后，预览图片在选择是否保存。
使用FileUpload上传图片实现图片预览
使用FileUpload上传图片实现图片预览
Asp.net FileUpload控件 预览
Asp.net FileUpload控件 不上传图片进行预览
.NET社区

62,051

社区成员

669,050

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章