jsonデータ転送から画像を読み取る方法

Question

今日、私はHTML5のドラッグアンドドロップで作業しています。その後、私は、この写真を撮ると＃でそれを表示する必要がWebブラウザ

に入力=「ファイル」のdivにドロップ

、お使いのコンピュータから

• グラブイメージファイル：私のような何かをしたいですlivePreview div

私はこのファイルの絶対パスをユーザーの場所から取得できないことを知っています。

私はこのような何か：

var livePreview = document.getElementById('livePreviewId'); 
 
    var imageInput = document.getElementById("inputFileId"); 
 
    
 
    imageInput.addEventListener("dragover", function(e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
    }); 
 
    imageInput.addEventListener("dragenter", function(e){ 
 
     e.preventDefault(); 
 
     e.stopPropagation(); 
 
    }); 
 
    
 
    imageInput.addEventListener("drop", function(e){ 
 
     if(e.dataTransfer){ 
 
      console.log(e.dataTransfer); 
 
      if(e.dataTransfer.files.length) { 
 
       console.log("e files length ", e.dataTransfer.files.length); 
 
       e.preventDefault(); 
 
       e.stopPropagation(); 
 
       /*UPLOAD FILES HERE*/ 
 
       console.log("e files ", e.dataTransfer.getData("image/gif")); 
 
       upload(e.dataTransfer.files); 
 
      } 
 
     } 
 
    }); 
 
    
 
    function upload(files){ 
 
     console.log(files[0]); 
 
    }

<div id="livePreviewId" style="border:1px solid #d3d3d3;width:150px;height:300px;"></div> 
 
      
 
      <div class="pull-right"> 
 
       <p>Drop it here:</p> 
 
       <input id="inputFileId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/> 
 
      </div>

オーケー

HTMLを、私は、JSON内のファイルを持って次は何？ブラウザでどのように表示できますか？どうすればサーバーに送ることができますか？ローカルストレージにどのように格納するのですか？

おそらく1つの方法はサーバー（ローカルストレージ？）に送信してからブラウザに入れることです。しかしこれはライブプレビューではありませんか？

どのようにこの問題を解決するためのアイデアですか？

BR

Answer 1

さて、私はこの問題を解決：

HTML

<img id="livePreviewId" src="" /> 

<div class="pull-right"> 
    <p>Or drop it here:</p> 
    <input id="fileDropFieldId" type="file" class="column" style="border:1px solid #d3d3d3;width:350px;height:50px;"/> 
</div> 

JAVASCRIPT CODE

var dndOutput = document.getElementById('livePreviewId'); 
var imageInput = document.getElementById("fileDropFieldId"); 

imageInput.addEventListener('change', function(){ 
    var file = this.files[0]; 
    if(file.type.indexOf('image') < 0){ 
     console.error('invalid type'); 
     return; 
    } 
    var fReader = new FileReader(); 
    fReader.onload = function(){ 
     dndOutput.src = fReader.result; 
     localStorage.setItem('imgData', getBase64Image(dndOutput)); 
    }; 
    fReader.readAsDataURL(file); 
}); 

function getBase64Image(img){ 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    var imgCtx = canvas.getContext('2d'); 
    imgCtx.drawImage(img, 0,0); 
    var dataUrl = canvas.toDataURL('image/png'); 

    return dataUrl.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

function fetchimage(){ 
    var dataImage = localStorage.getItem('imgData'); 
    dndOutput.src = "data:image/png;base64," + dataImage; 
} 
fetchimage();