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

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

javascript html forms file-io

Javascript HTML输入类型=文件，在提交表单之前获取图像,javascript,html,forms,file-io,Javascript,Html,Forms,File Io,我正在建立一个基本的社交网络，用户在注册时上传一张显示图像。基本上，我想在他们选择图像之后，在提交表单之前，在与表单相同的页面上显示图像，就像预览一样这是可能的吗？图像只有在从任何服务器提供服务后才能显示。因此，您需要将图像上载到服务器以显示其预览我觉得我们之前有过相关的讨论：这可以很容易地用HTML 5完成，请参见此链接这里是在上传图像之前预览图像的完整示例 HTML: <html> <head> <link class="jsbin" href="http

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

这是可能的吗？

图像只有在从任何服务器提供服务后才能显示。因此，您需要将图像上载到服务器以显示其预览

我觉得我们之前有过相关的讨论：

这可以很容易地用HTML 5完成，请参见此链接

这里是在上传图像之前预览图像的完整示例

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>

我发现它使用了

fileReader

对象。它只创建一个img元素，并使用fileReader对象将其源属性指定为表单输入的值

函数预览文件（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
preview.src=“”；
}
}

谢谢，很简单，但正是我需要的：）这是一个错误的答案。。。虽然它出现在顶部的结果。。。请参阅本讨论中的其他链接或可能的副本啊，好点。我已经将这个问题标记为一个潜在的重复。它不会呈现URL，但它使用在文本中嵌入图像直接显示来自本地存储的图像。。。试一下这个代码，然后你就会误解了。问题是为什么要使用url缩短器（goo.gl）？它隐藏/混淆了URL，因此非常抱歉。。！！谢谢你的更正。。我将其替换为原始URL。

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