.net 上传图片预览功能

这种方式预览只有IE6浏览器才可以，更高版本或者FIREFOX都不能预览。用滤镜的话IE7可以预览，但更好版本或者FIREFOX也不能预览

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

还是考虑使用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呢
你先将这个文件传到临时文件夹，然后再设置临时目录路径给控件
<img id="preView" 的src 是相对服务器的
本帖最后由 net_lover 于 2012-05-17 16:01:16 编辑
不装插件，IE7以上版本和firefox等浏览器，好像是实现不了预览的。
或者你换个思路，先把图片先上传到服务器的临时文件夹，等提交后，再把图片转移到真正的目录去。然后就是记得维护那个临时文件夹。
还是使用flash来实现吧.留邮箱回头给你个DEMO
我也需要发我下吧 [email protected]
楼主在的话发下
问题解决了吗，能给我发一下吗[email protected]