javascript-HTML输入type = file,在提交表单之前获取图像

我正在建立一个基本的社交网络,在注册过程中,用户上传了一个显示图像。基本上,我想在选择表单之后和提交表单之前,在与表单相同的页面上显示图像,例如预览。

这可能吗?

Tom asked 2020-08-03T07:09:16Z
6个解决方案
58 votes

这是在上传图片之前预览图片的完整示例。

HTML:

<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://goo.gl/r57ze"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>

JavaScript:

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]);
  }
}
Hardik Sondagar answered 2020-08-03T07:09:40Z
25 votes

我发现了这个使用<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">对象的简单但功能强大的教程。 它只是创建一个img元素,并使用fileReader对象将其source属性分配为表单输入的值

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

che-azeh answered 2020-08-03T07:10:00Z
16 votes

使用HTML 5可以很容易地做到这一点,请参阅此链接[http://www.html5rocks.com/en/tutorials/file/dndfiles/]

iEamin answered 2020-08-03T07:10:21Z
6 votes

不错的开源文件上传器

[HTTP://blue imp.GitHub.com/jQuery-file-upload/]

MakuraYami answered 2020-08-03T07:10:45Z
5 votes

我觉得我们之前有一个相关的讨论:如何在通过JavaScript上传之前先上传预览图像

Maddy answered 2020-08-03T07:11:05Z
3 votes

在从任何服务器上提供图像之前,无法显示图像。 因此您需要将图像上传到服务器以显示其预览。

Naren Sisodiya answered 2020-08-03T07:11:25Z
translate from https://stackoverflow.com:/questions/5802580/html-input-type-file-get-the-image-before-submitting-the-form