2013-10-20

javascript：ファイルの読み込み（ドラッグ＆ドロップ）

ドラッグ＆ドロップでファイルを読み込む（複数ファイルの選択可能）

画像ファイルの場合、追加して表示します。

サンプル

◆html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>File API Sample (onDrop)</title>
  6. <script src="onDrop.js"></script>
  7. <style>
  8. html,body {
  9.  margin:  0px;
  10.  padding: 0px;
  11.  height:  100%;
  12. }
  13. #drop img {
  14.  height: 75px;
  15.  border: 1px solid #000;
  16.  margin: 10px 5px 0 0;
  17.  float: left;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>下にファイルをドロップしてください。ファイルを表示します。</div>
  23. <div id="drop" style="width:95%; height:90%;" ondragover="onDragOver(event)">
  24. </div>
  25. </body>
  26. </html>

◆javascript(FileInput.js)

25-31行目：ファイルが画像の場合の処理（height=75pxの大きさで画像を表示）
34-39行目：ファイルが画像以外の場合の処理（テキストを表示）
  1. window.onload = function() {
  2.  if (window.File) {
  3.      // File APIに関する処理を記述
  4. //      window.alert("File APIが実装されてます。");
  5.   document.getElementById("drop").addEventListener("drop", onDrop, false);
  6.  } else {
  7.      window.alert("本ブラウザではFile APIが使えません");
  8.     }
  9. }
  10.  
  11. // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
  12. function onDrop(event){
  13.  var files = event.dataTransfer.files;
  14.  var drop = document.getElementById("drop");
  15.  // ファイルの配列から1つずつファイルを選択
  16.  for(var i=0; i< files.length; i++){
  17.   var f = files[i];
  18.   // FileReaderオブジェクトの生成
  19.   var reader = new FileReader();
  20.   // エラー発生時の処理
  21.   reader.onerror = function (evt) {
  22.    drop.innerHTML = "読み取り時にエラーが発生しました。";
  23.   }
  24.   if (f.type.match('image.*')) {
  25.          reader.onload = function (evt) {
  26.            var img = document.createElement('img');
  27.            img.src = evt.target.result;
  28.            document.getElementById("drop").appendChild(img);
  29.          }
  30.          // readAsDataURLメソッドでファイルの内容を取得
  31.          reader.readAsDataURL(f);
  32.   } else {
  33.    // ファイル読取が完了した際に呼ばれる処理
  34.    reader.onload = function (evt) {
  35.     var content = reader.result.replace(/</g,'<')
  36.     drop.innerHTML = content;
  37.    }
  38.    // readAsTextメソッドでファイルの内容を取得
  39.    reader.readAsText(f);
  40.   }
  41.      }
  42.      // ブラウザ上でファイルを展開する挙動を抑止
  43.      event.preventDefault();
  44. }
  45.  
  46. function onDragOver(event){ 
  47.  // ブラウザ上でファイルを展開する挙動を抑止
  48.  event.preventDefault(); 
  49. }

参考にしたページ





以上





投稿者 時刻:
ラベル: