Question

从文件输入标签中的选定文件中渲染图像以供预览

2014-07-05

5416

html image

现在我有一个表单字段：

<input id="my_img_field" type="file"/>

在浏览器中选择图像后，我想在目标 img 标签上呈现所选图像文件：

<img id="image_preview" />

但我想在 $('#my_img_field').change 事件之后执行此操作，即我可能希望稍后单击某个按钮时完成此操作。

我听说这可以使用 HTML5 技术来实现。有人可以教我怎么做吗？

Answer 1

原始 js 中的代码

var file = document.getElementById('my_img_field').files[0]
    var fr = new FileReader()
    fr.readAsDataURL(file)
    fr.onload = function(e) {
      var img = document.getElementById('image_preview')
      img.src = this.result
    }

Answer 2

以下方法可行：

var file = $('#my_img_field')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
    var img = $('#image_preview');
    img.attr('src', this.result);
}

Answer 3

可以这样

const file = document.getElementById('my_img_field').files[0]
const link = window.URL.createObjectURL(file)

Vlad Novikov

2022-11-02