HTML输入类型=文件，在提交表单之前获取图像

I'm building a basic social network and in the registration the user uploads a display image. Basically I wanted to display the image, like a preview on the same page as the form, just after they select it and before the form is submitted.

我正在建立一个基本的社交网络，在注册时，用户上传了一个显示图像。基本上我想在显示图像时，就像在表单的同一页面上预览一样，只需在选择它之后和表单提交之前。

Is this possible?

这可能吗？

7 个解决方案

#1

Here is the complete example for previewing image before it gets upload.

以下是在上传之前预览图像的完整示例。

HTML :

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 :

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]);
  }
}

#2

this can be done very easily with HTML 5, see this link http://www.html5rocks.com/en/tutorials/file/dndfiles/

这可以通过HTML 5轻松完成，请参阅此链接http://www.html5rocks.com/en/tutorials/file/dndfiles/

#3

I found This simpler yet powerful tutorial which uses the fileReader Object. It simply creates an img element and, using the fileReader object, assigns its source attribute as the value of the form input

我找到了这个使用fileReader对象的简单但功能强大的教程。它只是创建一个img元素，并使用fileReader对象将其source属性指定为表单输入的值

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

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

#4

nice open source file uploader

漂亮的开源文件上传器

http://blueimp.github.com/jQuery-File-Upload/

#5

I feel we had a related discussion earlier: How to upload preview image before upload through JavaScript

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

#6

Image can not be shown until it serves from any server. so you need to upload the image to your server to show its preview.

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

#7

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

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

#1