上传来自用户输入的图像，传递给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