从 FileUpload 控件加载带有 Javascript 的图像 ASP.NET

本文关键字：图像 ASP NET Javascript FileUpload 控件 加载 | 更新日期: 2023-09-27 17:55:33

用户使用 asp.net 文件上传控件选择图像后，我正在尝试加载带有图像<asp:Image ID="imgPicture" width="200" height="200" runat="server" />的asp图像框<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

.HTML 

<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

爪哇语

<script type="text/javascript">
    function LoadImage(path, img) {
        imgPrev = document.images[img];
        imgPrev.src = path;
   }
</script>

图像将不会加载到 imgPicture 控件中。我还注意到，通过向 javascript 函数添加警报以提醒路径和图像，路径C:'fakepath'ImageName.jpg。我不确定为什么它说假路径。

任何帮助，不胜感激。另请注意，此项目后面有一个 C# 代码文件。

从 FileUpload 控件加载带有 Javascript 的图像 ASP.NET

在您输入所有内容后，我将我的 FileInput 控件代码更改为如下： 

<asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>

然后，我向 Page.OnLoad 事件添加了一个测试，以确定该文件是否已准备就绪上传。

if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();

然后我允许 UploadImage（） 方法上传图像，存储它，然后将图像框的 url 设置为上传图像的 url。

感谢大家的帮助和投入。另外，我很欣赏jQuery的想法。在这种情况下，我只需要一些快速而肮脏的东西来完成工作。

在回发之前，您的文件不会上传，这听起来像您只是浏览到该文件，然后在您回发/上传图像之前尝试获取缩略图。

ASP.Net （HTML） 代码 ： 

<asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX"   />

JAVASCRIPT 代码 ：

function showImage() 
        {
            // Get File Upload Path & File Name
            var file = document.getElementById("FileUpload1");
            // Set Image Url from FileUploader Control
            document.getElementById("Image1").src = file.value;
            // Display Selected File Path & Name
            alert("You selected " + file.value);
            // Get File Size From Selected File in File Uploader Control 
            var inputFile = document.getElementById("FileUpload1").files[0].size;
            // Displaty Selected File Size
            alert("File size: " + inputFile.toString());
        }

我认为这可以帮助你。 它在我的电脑上完美运行。

相关文章：