Javascript HTML input type=file，提交表单前获取图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5802580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML input type=file, get the image before submitting the form
提问by Tom
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?
这可能吗？
回答by Hardik Sondagar
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]);
}
}
回答by che-azeh
I found This simpler yet powerful tutorialwhich uses the fileReaderObject. 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...">回答by iEamin
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/
回答by Maddy
I feel we had a related discussion earlier: How to upload preview image before upload through JavaScript
感觉之前有个相关的讨论：How to upload preview image before upload through JavaScript
回答by Naren Sisodiya
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.
在从任何服务器提供服务之前，无法显示图像。所以您需要将图像上传到您的服务器以显示其预览。
