个人中心
gpt4 book ai didi

javascript - 显示图像预览而不是文本

转载 作者：可可西里 更新时间：2023-11-01 01:18:37 28 4
gpt4 key购买 nike

<分区>

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

  1. 我们点击“上传图片”按钮。

enter image description here

  1. 然后显示弹出框。

enter image description here

  1. 然后我们点击上传新图片按钮

  2. 之后，我们将从电脑中选择图片并显示消息图片上传

enter image description here

我想像这样显示上传图片的预览，而不是消息“图片已上传”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>');
        }
    });
});

我对上面的代码进行了以下更改，以显示“图像预览”而不是消息。现在我们上传图片后不显示图片预览。在我们将图片上传到网站之前，它会显示如下图。

enter image description here 

<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]);
    }
}

28 4 0
文章推荐： java - Internet Explorer 8-10 中的 Selenium WebDriver 窗口切换问题
文章推荐： java - 切换 boolean 值，但只是一次？ ( java )
文章推荐： java - 使用 Java 代码访问 DLNA 电视
文章推荐： java - AutoBeanFactory在GWT 2.3中不起作用
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com