Question

所以我有一张图片

<div class="portfolio-image" style="height:200px; width:100%;">
   <img id="coverImage" src="" alt="Avatar" class="img-thumbnail img-responsive" style="height:200px; width:100%;">
   <i class="fa fa-cloud-upload"></i>
   <input type="file" id="uploadedCoverImage" style="display: none;">
</div><br>

我使用jquery来改变图像..

$('.fa-cloud-upload').click(function () {
  $('#uploadedCoverImage').trigger('click');
});

使用此.trigger('click')然后

$('#uploadedCoverImage').change(function (e) {
    var input = e.target;

    var formData = new FormData();
    formData.append('uploadedFiles-0' , input.files[0]);
    formData.append('user_id', user_id);

    $.ajax({
        type:'POST',
        url:'../../../ajax/user/upload_coverImage.php',
        dataType:'JSON',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success:function (results) {
            window.location.reload(true);
        }
    });

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = $('#coverImage')[0];
      output.src = dataURL;

    };
    reader.readAsDataURL(input.files[0]);
});

ajax请求很好，它将图像路径保存到我的数据库，但我的问题是，当它返回true时，我的数据库中的图像路径将显示在图像src标签上，但是发生的事情是它没有＆＃ 39; t显示我的数据库中的图像..我认为文件读取器有问题但不知道如何解决它...任何想法？

Answer 1

如果我正确理解问题不在于DB或Ajax ......
但图像显示在#coverImage ...尝试此操作。

var reader = new FileReader();
reader.onload = function (e) {
  $("#coverImage").attr("src",e.target.result);
};
reader.readAsDataURL($("#uploadedCoverImage").files[0]);

Answer 2

您的代码似乎没问题，我个人会将下面的代码（稍微修改过你的版本）放在ajax调用的成功回调中，而不是重新加载窗口，无论如何，重新加载的目的是什么？如果重新加载页面，则JavaScript将无法在快速Internet连接上完全执行。如果您的Ajax调用需要一段时间才能完成，那么您可能会获得所需的功能，否则Ajax将在FileReader为您呈现文件之前足够快地成功重新加载页面。

if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.uploadedCoverImage = $("#uploadedCoverImage");
        reader.onload = function (e) {

           $(reader.uploadedCoverImage).attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }

使用jquery

2 个答案: