Question

我们正在尝试将图片上传到我们的网站。

点击“上传图片”按钮。

然后显示弹出框。

然后我们点击上传新图片按钮
之后，我们将从计算机和电脑中选择图像。显示消息已上传图片

我希望显示已上传图片的预览，而不是消息“图片已上传”，如此Jsfiddle

代码显示消息“图像已上传”

<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>

JS

jQuery(document).ready(function () {
    jQuery('body').delegate('.newcustomimage', 'change', function () {
        if(jQuery(this).val()) {
            jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploaded.</div>');
        }
    });
});

我在上面的代码中做了以下更改，以显示“图片预览”而不是消息。现在我们上传图片后没有显示图片预览。相反，在我们在网站上传图片之前，它会显示如下图像。

<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
<img id="blah" src="http://example.com/media/custom_product_preview/quote" />

的js

jQuery(document).ready(function () {
    jQuery('body').delegate('.newcustomimage', 'change', function () {
        if (jQuery(this).val()) {
            jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploded.</div>');
   }
});

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

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

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

Answer 1

要做到这一点，请按照以下

在你的HTML

中添加它

<input type="file" id="add_image_{{rand}}" data-rand={{rand}} class="newcustomimage" name="new_image" onchange="readURL(this);" value=""  />

<img id="previewImg" src="#" style="display: none;height: 200px; width: 200px;" >

相同的java脚本将是。

function readURL(input) {

    if (input.files && input.files[0]) { 

        var reader = new FileReader(); 
        reader.onload = function (e) {
            jQuery('#previewImg').attr('src', e.target.result);
            jQuery('#previewImg').show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

这适用于您的情况，请试试。

Answer 2

这似乎工作正常。只需要配置图像的尺寸。

应用以下css：

.tool-body.selected {
    text-align: center;
}

#previewImg {
    height: 75px;
    display: inline-block;
}

同时更正已上传的拼写。

修改

以下代码适用于OP，符合他的要求：

jQuery(document).ready(function() { jQuery('body').on('.newcustomimage', 'change', function() { if (jQuery(this).val()) { console.log(jQuery(this).val()); if (jQuery(this).val()) { var reader = new FileReader(); } jQuery(this).parent().parent().append('<div id="add_image_2508269_success" class="success-message validation-advice"> Image Uploaded.</div>'); } }); jQuery(".aitcg-button").click(function() { jQuery('#previewImg').hide(); }); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { jQuery('#previewImg').attr('src', e.target.result); jQuery('#previewImg').show(); }; reader.readAsDataURL(input.files[0]); } }

可以找到工作网站的屏幕抓取here。

Answer 3

您可以尝试这样

<强> HTML

<input type="file" id="add_image_{{rand}}" class="newcustomimage" name="new_image" value=""/>
<div id="imgcontaner"></div>

<强> JS

$(".newcustomimage").change(function() {
   var input = this;
   if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function(e) {
                $("#imgcontaner").empty();
                $('<img/>').appendTo("#imgcontaner")
                           .attr('src', e.target.result);
          }

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

Answer 4

您没有在文件选择上调用函数。你需要改变它：

    jQuery(document).ready(function (){
      jQuery('body').delegate('.newcustomimage', 'change', function (){
       if (jQuery(this).val())
          {
             readURL(jQuery(this));
          }
      });
  });

在jQuery（文档）.ready

之外保留readurl函数

     function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            jQuery('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
     }

显示图片预览而不是文字

4 个答案: