请教一些关于Image控件使用时遇到的问题

[angelo_2574]

在做动态页面的时候想上传一个图片到页面上，本人不会用JS的方法，所以是这样想的。先把源图片复制到根路径下的IMAGES文件夹，然后使用复制后的图片的相对路径给image控件的ImageUrl属性赋值，这样来在页面上显示图片。

protected void btnUploadImg_Click(object sender, EventArgs e)
    {
        string RootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath);
        string TempImgPath = RootDir + "\\images\\TempImg.jpg";

        if (FileUpload1.FileName != null)
        {
            CreateTempImg(ImgToBytes(FileUpload1.PostedFile.FileName), TempImgPath);
            Image1.ImageUrl = urlconvertor(TempImgPath);
        }
    }

    /// <summary>
    ///将参数imagesurl1的绝对路径转换为相对路径
    /// </summary>
    /// <param name="imagesurl1">当前的绝对路径</param>
    /// <returns>返回当前项目的相对路径</returns>
    public string urlconvertor(string imagesurl1)
    {
        string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//获取程序根目录
        string imagesurl2 = "~" + imagesurl1.Replace(tmpRootDir, ""); //转换成相对路径
        imagesurl2 = imagesurl2.Replace(@"\", @"/");

        return imagesurl2;
    }

    /// <summary>
    ///以img为源图片，在指定的路径path下复制创建一个临时图片
    /// </summary>
    /// <param name="img">当前源图片的二进制流</param>
    /// <param name="path">临时图片的储存路径</param>
    protected void CreateTempImg(byte[] img,string path)
    {
        FileStream fs = new FileStream(path, FileMode.Create, FileAccess.Write);
        BinaryWriter bw = new BinaryWriter(fs);
        bw.Write(img);
        //=====================注意此处，一定要将文件流关闭，否则临时文件一直会处于使用状态，页面将无法读取
        bw.Close();
        fs.Dispose();
    }

    /// <summary>
    ///将图片转换为对应的二进制流
    /// </summary>
    /// <param name="path">源图片的储存路径</param>
    /// <returns>返回当前图片的二进制流</returns>
    protected byte[] ImgToBytes(string path)
    {
        FileStream fs = new FileStream(path, FileMode.Open, FileAccess.Read );
        BinaryReader br = new BinaryReader(fs);
        return  br.ReadBytes((int)fs.Length);
    }

最后运行是成功的，但是期间遇到了一些问题。
1、FileUpload1.PostedFile.FileName的值在没有调整IE浏览器的安全级别之前，一直返回的是文件名，而不是全路径，这个除了调低IE的安全级别，还有其他的方法么？
2、image控件的ImageUrl属性只能支持相对地址么？好像用绝对地址就不能加载图片了。
3、求教如何使用JS的方法在客户端就可以用IMAGE控件预览图片。
像各位前辈高手求教了！

[我本良人]

<script type="text/javascript">
    function previewImage(file) {
        var MAXWIDTH = 860;
        var MAXHEIGHT = 120;
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function () {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                img.style.marginLeft = rect.left + 'px';
                img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function (evt) { img.src = evt.target.result; }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";
        }
    }
    function previewImage1(file) {
        var MAXWIDTH = 860;
        var MAXHEIGHT = 120;
        var div = document.getElementById('preview1');
        if (file.files && file.files[0]) {
            div.innerHTML = '<img id=imghead1>';
            var img = document.getElementById('imghead1');
            img.onload = function () {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                img.style.marginLeft = rect.left + 'px';
                img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function (evt) { img.src = evt.target.result; }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead1>';
            var img = document.getElementById('imghead1');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";
        }
    }
    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = { top: 0, left: 0, width: width, height: height };
        if (width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>

<img alt="" id="imghead" runat="server" style="height:120px"/>
<input type="file" runat="server" id="fileup1" onchange="previewImage(this)" />

[我本良人]

因为我在页面上做了2个显示的，所以js里有两个调用函数，你去掉previewImage1（）就OK了，可以借鉴下

[我本良人]

引用 2 楼 yangmingxing980 的回复:

因为我在页面上做了2个显示的，所以js里有两个调用函数，你去掉previewImage1（）就OK了，可以借鉴下

运行回报错，是我搞忘了点东西，应该是这样的

<div id="preview" style="width:860px;height:120px">
     <img alt="" id="imghead" runat="server" style="height:120px"/>
</div>
 <br />
        <input type="file" runat="server" id="fileup1" onchange="previewImage(this)" />

[angelo_2574]

引用 3 楼 yangmingxing980 的回复:

[quote=引用 2 楼 yangmingxing980 的回复:] 因为我在页面上做了2个显示的，所以js里有两个调用函数，你去掉previewImage1（）就OK了，可以借鉴下

运行回报错，是我搞忘了点东西，应该是这样的

<div id="preview" style="width:860px;height:120px">
     <img alt="" id="imghead" runat="server" style="height:120px"/>
</div>
 <br />
        <input type="file" runat="server" id="fileup1" onchange="previewImage(this)" />

[/quote] 这个我已经看到了。谢谢! 但是有没有人知道我提出的另外两个问题呢？ 1、FileUpload1.PostedFile.FileName的值在没有调整IE浏览器的安全级别之前，一直返回的是文件名，而不是全路径，这个除了调低IE的安全级别，还有其他的方法么？ 2、image控件的ImageUrl属性只能支持相对地址么？好像用绝对地址就不能加载图片了。

[我本良人]

第一个问题我还真没遇到过，FileUpLoad1.PostedFile.FileName获取的就是全路径 FileUpLoad1.FileName获取的是文件名， 第二个问题，相对路径，绝对路径都可以的，但都必须在根目录下，我一直想尝试读取其他盘里的图片，可是没有成功，如果谁知道方法可以共享下哦

[insus]

这个试试： http://www.cnblogs.com/insus/archive/2013/02/05/2892678.html

[宝_爸]

1、FileUpload1.PostedFile.FileName的值在没有调整IE浏览器的安全级别之前，一直返回的是文件名，而不是全路径，这个除了调低IE的安全级别，还有其他的方法么？ 会使全路径吗？那也不要用.直接用FileUpload1.FileName 缺德文件名。 用FileUpload1.HasFile判断是否有文件上传了。 用FileUpload1.FileBytes 取得文件内容并保存到临时文件中。 2、image控件的ImageUrl属性只能支持相对地址么？好像用绝对地址就不能加载图片了。 用相对路径好点，绝对路径以后不容易维护。

[宝_爸]

3、求教如何使用JS的方法在客户端就可以用IMAGE控件预览图片。 看看这个 http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded 我觉得不一定所有浏览器都支持。

[宝_爸]

引用 8 楼 findcaiyzh 的回复:

3、求教如何使用JS的方法在客户端就可以用IMAGE控件预览图片。 看看这个 http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded 我觉得不一定所有浏览器都支持。

这里看看什么浏览器不支持。