用户单击按钮时如何显示上传的图像？答案

【问题标题】：How to display uploaded image when user clicks on a button?用户单击按钮时如何显示上传的图像？
【发布时间】：2017-11-23 18:37:02
【问题描述】：

我在这里有以下代码行，它会在单击发送按钮时显示用户文本（以模拟正在发送的聊天消息）

<script>
    $('#subbut').click(function(){
        var user_msg = $("#user_msg").val();

        $("#msg").append('<p>User says:'+user_msg+'</p>');
</script>

<body>
    <div id="msg"></div>
    <input type="text" name="user_msg" id="user_msg">
    <input type="submit" value="Submit" id="subbut">
</body>

但我也希望为图像输入这样做。

<body>
    <div id="msg"></div>
    <input type="file" name="newImage" id="upload-photo">
    <input type="submit" value="Submit" id="subbut">
</body>

当单击#subbut 按钮时，如何访问图像并将其附加（以显示图像）到#msg div？我在Preview an image before it is uploaded 看过类似的东西，但我似乎无法适应它。

【问题讨论】：

你的答案在这里：stackoverflow.com/questions/12368910/…
抱歉，忘记添加了。我不确定 readURL(this) 函数的参数。就我而言，我是否传入 id readURL("#upload-photo") 而不是 readURL(this)？
readURL(jQuery('#upload-photo'))
或者你可以在 onchange 函数中使用 readURL(this) 。 jQuery('#upload-photo').onchange(function(){readURL(this);});
jsfiddle.net/LvsYc 不知道为什么当我用 $("#imgInp") 替换 "this" 时它不起作用:( $("#imgInp").change(function(){ readURL(this ); }); 用于测试目的

标签： javascript jquery html ajax image

【解决方案1】：

<div id="image-wrapper"></div>
<input id="upload-image" type="file" accept=".jpg"/>
<input id="subbut" type="submit" value="Submit"/>

<script>
var _URL = window.URL || window.webkitURL;

$("#subbut").click(function () {
    var file;
    var image;
    if ((file = $("#upload-image")[0].files[0])) {
        image = new Image();
        image.onload = function () {
            $("#image-wrapper").append(this);
            $(this).attr("id", "image");
        }
        image.src = _URL.createObjectURL(file);
    }
});
</script>

【讨论】：

谢谢。顺便说一句，我认为您错过了 $("upload-image") 和 $("image-wrapper") 上的“#”符号
@chowsai，请注意

【解决方案2】：

<input type="file" id="inputFileToLoad" onchange="chnageimgupdate()" />

function loadImageFileAsURL()
{
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
        {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
            {
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;
                document.body.appendChild(imageLoaded);
            };
            fileReader.readAsDataURL(fileToLoad);
        }
    }
}

【讨论】：