2012年10月25日木曜日

任意のファイルをデータスキーム形式に変換する

HTML5のFile APIを使えばwebブラウザだけで任意のファイルをデータスキーム形式に変換することができます.スクリプトの量も極めて短いため,色々と応用が可能です.以下に最もシンプルな形のコードを掲載します.




<script type="text/javascript">
window.addEventListener("load", function(){
 var inputFile = document.querySelector("input[type=file]");
 if(!inputFile){return;}
 inputFile.onchange = function(e){
  var files = e.target.files;
  if(files.length == 0){
   return;
  }
  var reader = new FileReader();
  reader.onload = function(){
   result.innerHTML = reader.result;
  };
  reader.readAsDataURL(files[0]);
 };
}, false);
</script>
<input type="file"/>
<div id="result" style="width:100%;height:200px;overflow:auto;word-break:break-all;border:1px solid black;"></div>

ここでは省きますが,ファイル名を取得したりファイルのmimetypeを取得することも可能です.

0 件のコメント:

コメントを投稿