Запуск простого метода обмена с использованием jquery в .NET WebForms

Question

Я пытаюсь запускать простое событие/предварительный просмотр изображения, когда пользователь пытается его загрузить, после предварительного просмотра (обрезка и редактирование он нажмет на сохранение) , То, что я и что я пытаюсь до сих пор имеет следующий вид:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
    <script> 
     $(document).ready(function() { 
      function loadImage(event) { 
       var output = $('#<%=FileUpload1.ClientID%>').val(); 
       output.src = URL.createObjectURL(event.target.files[0]); 
      }; 
     }); 
    </script> 
</asp:Content> 

И ОНТ он HTML стороны у меня есть контроль над загруженным файлом, как следующее:

<asp:FileUpload ID="FileUpload1" onchange="loadImage(this)" runat="server" /></div> 

Но когда я пытаюсь выбрать image Я получаю ошибку:

Uncaught ReferenceError: loadImage is not defined(…) 

Что я делаю неправильно?

Answer 1

Вы не можете присвоить значение чтения из ввода файла в изображение. Вы должны прочитать данные первой, как показано ниже

$(document).ready(function() { 
 
     $('input[type="file"]').change(function(){ 
 
      readURL(this); 
 
     }); 
 
     }); 
 
function readURL(input) { 
 

 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
      $('#output').attr('src', e.target.result); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file"/> 
 
<img id="output" src=""/>

Answer 2

Удалите вызов $.ready, так как вы просто определяете функцию.

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
    <script> 
      function loadImage(event) { 
       var output = $('#<%=FileUpload1.ClientID%>').val(); 
       output.src = URL.createObjectURL(event.target.files[0]); 
      }; 
    </script> 
</asp:Content>