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

Question

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

Answer 1

你可以把它放在一些jQuery事件中（'click'，'load'，不确定你什么时候发生这种情况）：

$（'＃preview_img'）。attr（'src'，'...'）;

Answer 2

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

看看an answer to a similar problem;它通过ID访问readURL元素，但您可以轻松调整它以使用您发送到{{1}}的元素。