HTML - 选择文件名后显示图片

14 浏览
0 Comments

HTML - 选择文件名后显示图片

这个问题已经有了答案:

上传图片前预览图片

我有一个表单允许我用

浏览并选择一个文件。

我想要做的是在选择图片后立即显示该图片。

这是在提交表单之前，因此该图片很可能位于客户端。这可以做到吗？

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

你可以使用以下代码来实现这个功能：

$("input").change(function(e) {
    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
        var file = e.originalEvent.srcElement.files[i];
        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});


演示:
http://jsfiddle.net/ugPDx/

0
0 Comments

这里是给你的：

HTML



  
    
    
    
    
    JS Bin
    
    
  
  
    
    your image

脚本：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah').attr('src', e.target.result).width(150).height(200);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

实时演示

0