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

使用FileReader

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

jsFiddle

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

1 个答案: