点击上传javascript/jquery之前显示图像

Display Image before click on upload javascript/jquery

本文关键字：显示显示图图像 jquery javascript 更新时间：2023-09-26

我正在尝试实现一个消息功能。在这种情况下，允许用户上传图像。我的上传功能运行良好。但我想预览用户想要上传的图像，然后再点击提交按钮。到目前为止，我的图像输入工作代码是<input name="attach" type="file" id="attach" />我搜索了很多，得出的结论是，为此我必须使用java脚本或j-query。我创建了一个onchange="readURL(this);"函数，并将其放置在input中。我还创建了一个图像标签，其中的图像将显示为<img id="preview_img" style="max-width: 130px; max-height: 130px; display: none" src=""/>。从这里开始，我很困惑。我将如何使用java脚本更改图像src，或者将其更改为什么值？

您可以将其放入某个jQuery事件中（'click'，'load'，不确定何时发生）：

$（'#preview_img'）.attr（'src'，'…'）；

将包含图像内容的数据URI设置为src属性。只要你没有在服务器上上传图像，你就可以通过readURL中的FileReader.readAsDataURL以数据URI格式加载其内容内容，在那里你可以通过event.target.files或代码中发送的this访问所选文件。

看看类似问题的答案；它通过其ID访问input元素，但您可以很容易地调整它以使用您发送给readURL的元素。