HTML输入类型=文件，在提交表单之前获取图像 [英] HTML input type=file, get the image before submitting the form
本文介绍了HTML输入类型=文件，在提交表单之前获取图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在建立一个基本的社交网络，并在用户上传一个显示图像的注册。
基本上我想显示图像，就像在表单的同一页面上预览一样，然后在表单提交之前。
这是可能的吗？
解决方案
这是预览图片上传前的完整示例。
HTML：
< html>
< head>
< link class =jsbinhref =http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css =stylesheettype = text / css/>
< script class =jsbinsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script>
< script class =jsbinsrc =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）; />
< / 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]）;
}
}
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?
解决方案
Here is the complete example for previewing image before it gets upload.
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]);
}
}
这篇关于HTML输入类型=文件，在提交表单之前获取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
