<input type = "file">を理解する

私は自分の頭を浮かべて、ウェブサイトで選択した画像を使用しようとしています。<input type = "file">を理解する

のは、私は、ユーザーが使用して自分のシステムから画像を選択することができますシンプルなウェブサイトがあるとしましょう。そして、JavaScriptで私は、ファイルを取得するためにこれを行うことができます

<input type="file" id="userImage">

を：

var userImage = document.getElementById('#userImage').files[0];

質問：

1）userImageを使用できるようになりましたか？それをキャンバスに描くなど、最初にウェブサイトサーバーにアップロードする必要がありますか？

2）画像を使用している場合、ウェブサイトを毎回アップロードする必要がありますか、それともメモリに保存されていますか？

3）イメージの使用準備ができたら、どうすればわかりますか？あなたの助け:)あなたの答えのための

フォローアップ

感謝のために多くを

感謝を（同じ理由で、すべての画像が前にキャンバスに描かれた開始時にプリロードされなければなりません）。したがって、html5では可能ですが、普遍的にはサポートされていないようです。

出典

2012-08-24 Jamie Fearon

を参照してください。 HTML4ではこれはできませんが、HTML5ではW3 File APIを使ってローカルファイルにアクセスできるはずです。しかし、いつさまざまなブラウザでサポートされるのかはわかりません。私の地元のFirefox 14.0.1、次のコードの作品で、選択したファイルのバイナリデータが得られます。

var reader = new FileReader() 
reader.readAsDataURL(document.getElementById('userImage').files[0]) 
alert(reader.result)

次のページはキャンバスにローカルの画像をペイント：

<html> 
    <body> 
    <script type="text/javascript"> 
     function doIt() { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var img = new Image(); 
      img.src = e.target.result; 
      var c = document.getElementById("canvas"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img,10,10); 
      } 
     ); 
     reader.readAsDataURL(document.getElementById('userImage').files[0]); 
     } 
    </script> 

    <input type="file" id="userImage" /> 
    <button onclick="doIt()">Render Image</button><br/> 
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/> 
    </body> 
</html>

たぶんあなたがすべき読むことを検討する2。

出典

2012-08-24 10:29:35 tbl

あなたの答えをありがとう。したがって、html5では可能ですが、普遍的にはサポートされていないようです。 –

+1 - 良い解決方法とコード – techfoobar

FileReader APIのサポートに関する最新情報は、http://caniuse.com/#feat=filereader – garethm

-3

1）クライアント側のスクリプトがブラウザのサンドボックスで実行されるため、画像を開いたり変更したりすることはできません。スクリプトがファイルシステムにアクセスしたり、ユーザーファイルができれば、それは

2セキュリティの問題になります）いいえ、ブラウザの送信は、リモートサーバにブロックごとの

3を身ファイル）項目1 :)

出典

2012-08-24 10:15:19 ruX

この回答を棄権した人のために：この時点では、クライアントからファイルにアクセスするためのサポートはありませんでした – ruX

<input type = "file">を理解する

答えて

関連する問題