ASP.NET：文件上传文件名在预览图像后消失答案

【问题标题】：ASP.NET: Fileupload filename gone after preview imageASP.NET：文件上传文件名在预览图像后消失
【发布时间】：2014-10-17 19:02:11
【问题描述】：

如果有用户可以预览他们选择的图片的图像，我正在进行员工注册。所以我的问题是，当我尝试预览所选图像时，fileupload 中的文件名不见了..

“save-14-copy.png”是图片的文件名。

所以下一步是预览图像..

所以你可以看到点击按钮预览后“save-14-copy.png”已经消失了。

如何保留文件名，以便在保存时不会出错？

设计代码：

<asp:Button runat="server" ID="Button1"  Text="PREVIEW"  CssClass="button-green" OnClick="Button1_Click"/>

Javascript：

<script type="text/javascript">
function ImagePreview(Imagepath) {
    if (Imagepath.files && Imagepath.files[0]) {
        var Filerdr = new FileReader();
        Filerdr.onload = function (e) {
            document.getElementById("<%= hfImage.ClientID %>").value = e.target.result; 
        }
        Filerdr.readAsDataURL(Imagepath.files[0]);
    }
}
</script>

代码隐藏：

protected void Button1_Click(object sender, EventArgs e)
{
  EmpImage.ImageUrl = hfImage.Value;
}

【问题讨论】：

您的预览按钮看起来会导致回发并将文件提交到服务器，回发后您有一个新的重新加载页面，因此不再选择文件。除非您有其他代码将其连接到按钮的单击事件，否则我看不到您发布的 JS 将如何运行。
@BenRobinson..我明白了..我测试了它刷新页面但我的文本框中的文本仍然存在..我该如何解决这个问题？>
文本框使用视图状态来存储和加载值。如果是关于文件名，请使用文字或隐藏字段将文件名存储在视图状态中
@fubo.. 我试过了......但它给了我一个 base64 字符串而不是文件名或完整路径

标签： c# asp.net file-upload

【解决方案1】：

我认为您应该在预览单击时保存文件并在那里处理文件名

protected void Button1_Click(object sender, EventArgs e)
{
  hfImagename.Value = fuFile.PostedFile.FileName;
  fuFile.PostedFile.SaveAs(@"C:\foo\"  +fuFile.PostedFile.FileName);
}

【讨论】：

【解决方案2】：

您的 Preview 按钮实际上会导致回发到服务器。按照您现在的设置方式，“预览”按钮更适合称为 Upload。

您正在使用FileReader 对象从用户的本地文件系统中读取文件并在上传前将其显示在图像中。所有这些都应该只发生在客户端中。一旦用户对所选图片感到满意，他就可以将图片上传到服务器。

这是一个非常简单的示例，可以帮助您入门。

.aspx 文件

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="preview" runat="server" ImageUrl="~/Images/NotSelectedYet.jpg" />
        <br />
        <asp:FileUpload ID="pictureOfMe" runat="server" /> 
        <input type="button" value="Preview" onclick="Preview();" />
        <br />
        <asp:Button ID="Upload" runat="server" Text="Upload file to server" OnClick="Upload_Clicked" />
    </div>
    </form>
    <script type="text/javascript">
        function Preview() {
            var fileInput = document.getElementById('<%= pictureOfMe.ClientID  %>');
            var filePreview = document.getElementById('<%= preview.ClientID %>');
            var file = fileInput.files[0];
            var imageType = /image.*/;

            if (file.type.match(imageType)) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    filePreview.src = reader.result;
                }

                reader.readAsDataURL(file);
            }
            else {
                alert('Not an image file!');
            }
        }
    </script>
</body>

这里我们有一个图像，它在首次加载时显示默认图片。然后我们有一个文件上传控件，可以让用户选择要上传的图片。我们有一个 html 输入按钮，用户点击它可以预览选定的图片。单击此按钮时，它会运行使用FileReader 的javascript 代码来加载文件并在图像中显示它。请注意，预览按钮不会导致发回服务器。

我们还有一个服务器按钮，它将页面（包括所选图片）发布到服务器，并声明了服务器事件处理程序。

.aspx.cs 文件

public partial class TestImagePreviewAndUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Upload_Clicked(object sender, EventArgs e)
    {
        if(pictureOfMe.PostedFile.FileName != string.Empty) {
            byte[] uploadedBytes = pictureOfMe.FileBytes;
            //save uploaded picture here
        }
    }
}

在这里，在Upload_Clicked 方法中，我们检查文件是否已上传，并将文件内容作为byte[] 获取。实际存储文件留作练习......

注意：来自here的示例javascript（有一些修改）

【讨论】：