从用户输入上传图像，传递给 ajax，并返回带有响应的图像答案

【问题标题】：upload image from user input, pass to ajax, and return image with response从用户输入上传图像，传递给 ajax，并返回带有响应的图像
【发布时间】：2017-10-22 02:42:23
【问题描述】：

我正在传递用户从他们的计算机或手机上传的照片。

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

它试图在我的应用程序中查看照片，但它来自用户。如何将其引导到照片的正确路径？

【问题讨论】：

标签： javascript jquery ajax image input

【解决方案1】：

使用文件阅读器

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

jsFiddle

【讨论】：