Question

我正在做一个员工注册，如果有一个图像，用户可以预览他们选择的图片。所以我的问题是，当我尝试预览所选图像时，文件上载中的文件名就消失了。

enter image description here

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

下一步是预览图像..

enter image description here

因此，您可以看到“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;
}

Answer 1

我认为你应该在预览点击时保存文件并处理文件名

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

Answer 2

您的预览按钮实际上会导致回发到服务器。现在设置它的方式，预览按钮将更恰当地称为上传。

您正在使用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输入按钮，用户点击该按钮可预览所选图片。单击此按钮时，它会运行javascript代码，该代码使用FileReader加载文件并在图像中显示该文件。请注意，预览按钮不会导致回发到服务器。

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

.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[]获取。 Actuelly存储文件留作练习......

注意：来自here

的示例javascript（带有一些修改）

ASP.NET：Fileupload文件名在预览图像之后消失了

2 个答案:

.aspx文件

.aspx.cs文件