使用fileupload预览图像

本文关键字：图像 fileupload 使用 | 更新日期: 2023-09-27 18:28:34

我想预览我使用FileUpload在同一页面上拍摄的3张图像。我还必须显示它的3个缩略图，每个缩略图3张。但问题是它显示了9次第一个图像，即3*3。我为它创建了图像文件夹。以下是我运行的代码：字符串文件，thumbPath；

    file = FileUpload1.PostedFile.FileName;
    thumbPath = ("~/images" + "/" + file);
    FileUpload1.SaveAs(Server.MapPath("images/") + file);
    Image1.ImageUrl = thumbPath;
    Image2.ImageUrl = thumbPath;
    Image3.ImageUrl = thumbPath;
    file = FileUpload2.PostedFile.FileName;
    thumbPath = ("~/images" + "/" + file);
    FileUpload1.SaveAs(Server.MapPath("images/") + file);
    Image4.ImageUrl = thumbPath;
    Image5.ImageUrl = thumbPath;
    Image6.ImageUrl = thumbPath;
    file = FileUpload3.PostedFile.FileName;
    thumbPath = ("~/images" + "/" + file);
    FileUpload1.SaveAs(Server.MapPath("images/") + file);
    Image7.ImageUrl = thumbPath;
    Image8.ImageUrl = thumbPath;
    Image9.ImageUrl = thumbPath;

使用fileupload预览图像

您似乎每次都在保存第一个图像，所以您在任何地方都能看到该图像是有道理的。同一行在您的代码中出现3次：

FileUpload1.SaveAs(Server.MapPath("images/") + file);

您可能希望更改FileUpload1，以便在代码的第二部分和第三部分中也使用FileUpload2和FileUpload3。

FileUpload1.SaveAs(Server.MapPath("images/") + file);
// do something
FileUpload2.SaveAs(Server.MapPath("images/") + file);
// do something
FileUpload3.SaveAs(Server.MapPath("images/") + file);
// do something

此外，如果用户选择上传多个同名文件，你会覆盖其中的一些文件。您可能应该使用一些唯一的文件名（可能是windows临时文件）。不要使用用户上传的文件名，或者至少不要用于此特定任务。

这一行中代码中的问题

       FileUpload1.SaveAs(Server.MapPath("images/") + file);

试试这个

       string  file = FileUpload1.PostedFile.FileName;
       string thumbPath = ("~/images" + "/" + file);            
       FileUpload1.SaveAs(Server.MapPath("~/images/"+ file) );
       Image1.ImageUrl = thumbPath;

试试下面的代码。对于单个图像，您也可以将其更改为多个图像：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        #newPreview 
        { 
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        } 
    </style> 

    <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> 
</head> 
<body> 
    <form id="form1" runat="server">
    <div> 
        preview 
        <asp:FileUpload ID="Fud_Pic" runat="server"
 onchange="PreviewImg(this)" />
        <div id="newPreview">
        </div> 
    </div> 
    </form> 
</body> 
</html>
相关文章：