javascript - 从用户输入上传图像，传递到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 net::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

使用文件阅读器

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

jsFiddle