上傳來自用戶輸入的圖像，傳遞給ajax，並返回帶有響應的圖像

Question

我正在傳遞用戶從他們的計算機或手機上傳的照片。

HTML：

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

我得到的圖像，並將其傳遞給我的AJAX調用，以便將其發送到API。我想只通過原始圖像上載，但我總是和錯誤： 「coyote1.jpg：1個GET MYAPP.com/coyote1.jpg網:: ERR_FILE_NOT_FOUND」

的jQuery：

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%"/>`)); 
)}; 

它試圖從我的應用程序中查看照片，但它來自用戶。我如何將它指引到照片的正確路徑？

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