ユーザー入力から画像をアップロードし、ajaxに渡し、応答で画像を返す

Question

ユーザーが自分のコンピュータまたは電話からアップロードした写真を渡しています。

HTML：

<input class="button" type="file" capture="camera" accept="image/*" id="upload-button" name="cameraInput">

私はそのイメージを取得し、APIに送信するために、私のAJAX呼び出しに渡します。私は、元の画像をアップロード合格しようとしていますが、私は常に取得し、エラー：

var uploadImage = function() { 
     var uploadBtn = $('#upload-button'); 
     uploadBtn.change(function(event) { 
     var formData = new FormData(); 
     var file = event.target.files[0]; 
     formData.append('sampleContent', file);$.ajax({ 
      url: 'MY API ENPOINT, 
      method: 'POST', 
      headers: { 
      'Access-Control-Allow-Origin': '*', 
      'Authorization': 
       'Bearer <MY TOKEN>', 
      'Cache-Control': 'no-cache' 
      }, 
      data: formData, 
      processData: false, 
      contentType: false 
     }).done(function(res) { 
      var introArticle = $('#intro'); 
      var htmlCard = introArticle.append($(`<div class="card" </div>`)); 
      var htmlContainer = htmlCard.append($(`<div class="container"></div>`)); 
      var htmlImage = htmlCard.append($(`<img src="${file.name}")}" style="width:100%"/>`)); 
)}; 

を： "coyote1.jpg：1つのGET MYAPP.com/coyote1.jpgネット:: ERR_FILE_NOT_FOUND"

のjQueryそれは、写真のために私のアプリを見ようとしているが、それはユーザーからのものです。それを写真の正しい道に向けるにはどうすればいいですか？

Answer 1

使用FileReaderの

var fr = new FileReader(); 
    fr.onload = function() { 
     var htmlImage = $('<img src="'+fr.result+'" style="width:100%"/>').appendTo('div#result'); 
    } 
    fr.readAsDataURL(file); 

jsFiddle