フォームを提出する前に画像を読み込む方法

基本的に私はその中にファイル入力を持つ画像ボックスを持っていますが、ファイル入力から選択した画像を表示し、画像ボックスに送信するフォーム。フォームを提出する前に画像を読み込む方法

私が言うのチュートリアルが見つかりました：

<!DOCTYPE html> 
<html> 
    <head> 
    <script> 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     function readURL(input) { 
      if (input.files && input.files[0]) { 
       reader.readAsDataURL(input.files[0]); 
      } 
     } 

     $("#imgInp").change(function(){ 
      readURL(this); 
       alert(input.val()); 
     }); 
    </script> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
     <input type='file' id="imgInp" /> 
     <img id="blah" src="#" alt="your image" /> 
    </form> 

    </body> 
</html>

をしかし、これは私のイメージボックスで選択した画像が表示されませんが。

出典

2016-09-06 Jorden

は質問で、このサンプルのjs

function readURL(input) { 
 

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

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

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

 
$("#imgInp").change(function(){ 
 
    readURL(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <input type='file' id="imgInp" /> 
 
    <img id="blah" src="#" alt="your image" /> 
 
</form>

出典

2016-09-06 08:39:39

javascriptを試してみてください期待される結果を返すように表示されます。問題は、<script>要素の配置か、.ready()を使用していないことです。また、inputは、changeイベント内で定義されていません。 this.valueをinput.val()に置き換え、alert()コールのパラメータとしてchangeイベントハンドラ内で代用することができます。

<script>要素は<head>要素の子として残って.ready()を使用してHTML

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <form id="form1" runat="server"> 
 
    <input type="file" id="imgInp" /> 
 
    <img id="blah" src="#" alt="your image" /> 
 
    </form> 
 
    <script> 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
     $('#blah').attr('src', e.target.result); 
 
    } 
 

 
    function readURL(input) { 
 
     if (input.files && input.files[0]) { 
 
     reader.readAsDataURL(input.files[0]); 
 
     } 
 
    } 
 

 
    $("#imgInp").change(function() { 
 
     readURL(this); 
 
     alert(this.value); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

で<script>素子要素<form>下に配置

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script> 
 
    $().ready(function() { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(e) { 
 
     $('#blah').attr('src', e.target.result); 
 
     } 
 

 
     function readURL(input) { 
 
     if (input.files && input.files[0]) { 
 
      reader.readAsDataURL(input.files[0]); 
 
     } 
 
     } 
 

 
     $("#imgInp").change(function() { 
 
     readURL(this); 
 
     alert(this.value); 
 
     }); 
 
    }) 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form id="form1" runat="server"> 
 
    <input type="file" id="imgInp" /> 
 
    <img id="blah" src="#" alt="your image" /> 
 
    </form> 
 

 
</body> 
 

 
</html>

出典

2016-09-06 08:51:37 guest271314

フォームを提出する前に画像を読み込む方法

答えて

関連する問題