gpt4 book ai didi

javascript - 当用户点击按钮时如何显示上传的图像?

转载 作者:太空宇宙 更新时间:2023-11-04 15:32:42 27 4
gpt4 key购买 nike

我这里有以下代码行,它使用户文本在单击发送按钮时出现(以模拟正在发送的聊天消息)

<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但我似乎无法适应它。

最佳答案

<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>

关于javascript - 当用户点击按钮时如何显示上传的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44666238/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com