我正在尝试实现消息功能。在此,允许用户上传图像。我的上传功能正常。但我想在实际点击提交按钮之前预览用户想要上传的图像。到目前为止我的图像输入工作代码是
<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
或将其更改为什么值?
答案 0 :(得分:0)
你可以把它放在一些jQuery事件中('click','load',不确定你什么时候发生这种情况):
$('#preview_img')。attr('src','...');
答案 1 :(得分:0)
将包含图片内容的data URI设置为src
属性。只要您没有在服务器上上传图像,就可以在readURL
中通过FileReader.readAsDataURL以数据URI格式加载其内容内容,您可以通过event.target.files
访问所选文件this
或您在代码中发送的input
。
看看an answer to a similar problem;它通过ID访问readURL
元素,但您可以轻松调整它以使用您发送到{{1}}的元素。