.net 上传图片预览功能
如题，为什么我的图片选择之后看不到图片的预览呢，现在我贴上代码，请各位指导一下
<td align="left">
<asp:FileUpload ID="image_file" runat="server" onchange="previewpic(this)" Height="21px" Width="188px" />
<br />
<script type="text/javascript">
function previewpic(obj) {
var preview = document.getElementById("preView");
preview.src = obj.value;
}
</script>
<img id="preView" style="width: 165px; height: 119px" /> </td>
[解决办法]
这种方式预览 只有IE6浏览器才可以，更高版本或者FIREFOX都不能预览。用滤镜的话IE7可以预览，但更好版本或者FIREFOX也不能预览
[解决办法]
还是考虑使用Jqaury flash的方式来实现上传预览吧
[解决办法]
怎么没高级回复了。
[解决办法]
<!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></title>
<base target="_self"/>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.PreviewImage = function (options) {
var Default = {
ImageClientId: "",
MaxWidth:500,
MaxHeight: 400
};
$.extend(true, Default, options);
return this.each(function () {
if (Default.ImageClientId != "") {
$(this).unbind("change");
$(this).change(function () {
if ($(this).val() == "") {
$("#" + Default.ImageClientId).parent("div").hide();
return;
}
else {
$("#" + Default.ImageClientId).parent("div").show();
}
if ($.browser.msie) {
$("#" + Default.ImageClientId).attr("src", $(this).val());
}
else {
$("#" + Default.ImageClientId).attr("src", $(this)[0].files[0].getAsDataURL());
}
if ($.browser.msie && $.browser.version > 6) {
$("#" + Default.ImageClientId).hide();
$("#" + Default.ImageClientId).parent("div").css({
'z-index': '999',
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'max-width': Default.MaxWidth + 'px', 'max-height': Default.MaxHeight + 'px',
'width': Default.MaxWidth + 'px', 'height': Default.MaxHeight + 'px'
});
var div = $("#" + Default.ImageClientId).parent("div")[0];
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#" + Default.ImageClientId).attr("src");
}
});
$("#" + Default.ImageClientId).load(function () {
var image = new Image();
image.src = $(this).attr("src");
$(this).attr("width", Default.MaxWidth);
$(this).attr("height", Default.MaxHeight);
$(this).attr("alt", Default.MaxWidth + "x" + Default.MaxHeight);
});
}
});
};
})(jQuery);
</script>
<style type="text/css">
* { border: 0; margin: 0px; padding: 0; outline: 0; }
body { background-color:#c8c8c8; }
.image { width: 500px; height: 400px;}
.FileUpload1 { width: 400px;height: 38px; }
.btnEdit { width: 96px; height: 38px; cursor: pointer; }
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div>
<asp:Image runat="server" ID="img_tp" CssClass="image" /></div>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
$(document).ready(function () {
$("#FileUpload1").PreviewImage({ ImageClientId: "img_tp" });
});
</script>
<br />
<asp:FileUpload runat="server" ID="FileUpload1" CssClass="FileUpload1" />
<asp:Button runat="server" ID="btnEdit" Text="确定修改" CssClass="btnEdit" OnClientClick="return confirm('确认修改？\r\n提示:本操作将会删除之前图片,且无法恢复.')" OnClick="btnEdit_Click"/>
</td>
</tr>
</table>
</form>
</body>
</html>
[解决办法]
建议用swfupload
[解决办法]
如果只是上传单个文件 我贴的那代码可以解决 如果多的话 还是swfupload好 我也正在整swfupload呢
[解决办法]
用 swf 做吧,
[解决办法]
参考
------解决方案--------------------
你先将这个文件传到临时文件夹，然后再设置临时目录路径给控件
<img id="preView" 的src 是相对服务器的
[解决办法]
本帖最后由 net_lover 于 2012-05-17 16:01:16 编辑
