入力ファイルをどのように使用するには？

入力タグからファイルを取得してURLに変換し、そのURLを段落タグに表示したいとします。入力ファイルをどのように使用するには？

これはJavacript/HTMLのみで可能ですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="jquery-1.12.0.min.js"></script> 
    </head> 

    <body> 

     <form action="demo_form.asp"> 
      <input type="file" id="wow" name="pic" accept="image/*"> 
     </form> 

     <script> 
      $("document").ready(function(){ 

       $("#wow").change(function() { 
        document.getElementById("penut").innerHTML = document.getElementById("wow").files.toDataUrl(); 
       }); 
      }); 
     </script> 

     <p id="penut"></p> 

    </body> 
</html>

出典

2016-03-28 Joel Antonio Delacruz Paredes

6日後、私はそれを行うコードを見つけました。

<p>Select a File to Load:</p> 
    <input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" /> 


    <p>File Contents as DataURL:</p> 
    <textarea id="textAreaFileContents" style="width:640;height:240" ></textarea> 

<script type="text/javascript"> 

function loadImageFileAsURL() 
{ 
    var filesSelected = document.getElementById("inputFileToLoad").files; 
    if (filesSelected.length > 0) 
    { 
     var fileToLoad = filesSelected[0]; 

     var fileReader = new FileReader(); 

     fileReader.onload = function(fileLoadedEvent) 
     { 
      var textAreaFileContents = document.getElementById 
      (
       "textAreaFileContents" 
      ); 

      textAreaFileContents.innerHTML = fileLoadedEvent.target.result; 
     }; 

     fileReader.readAsDataURL(fileToLoad); 
    } 
} 

</script> 

</body> 
</html>

出典

2016-04-04 14:15:59

入力ファイルをどのように使用するには？

答えて

関連する問題