Загрузить изображение с помощью Javascript из элемента управления ASP.NET FileUpload

Question

Я пытаюсь загрузить окно изображения asp <asp:Image ID="imgPicture" width="200" height="200" runat="server" /> с изображением после того, как пользователь выбрал его, используя элемент управления загрузкой файла asp.net <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"/>

Javascript

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

Изображение не будет загружаться в элемент управления imgPicture.Также я заметил, что, добавив предупреждение в функцию javascript для оповещения о пути и изображении, этот путь равен C:\fakepath\ImageName.jpg.Я не уверен, почему это говорит поддельный путь.

Любая помощь приветствуется.Также обратите внимание, что за этим проектом стоит файл кода C #.

Answer 1

После всех ваших вводов я изменил свой управляющий код 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-адрес поля imagebox в URL загруженного изображения.

Спасибо всем за вашу помощь и вклад. Кроме того, я ценю идеи JQuery. В этом случае мне просто нужно что-то быстрое и грязное, чтобы выполнить работу.

Answer 2

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());
        }

Я думаю, что это может помочь вам,это отлично работает на моем компьютере.

Answer 3

Ваш файл не загружен до тех пор, пока вы не вернете сообщение. Похоже, вы просто просматриваете файл и затем пытаетесь получить миниатюру, прежде чем отправлять обратно / загружать изображение.