在上传图像之前预览图像

我希望能够在上传之前预览文件（图像）。预览操作应该在浏览器中全部执行，而不使用 Ajax 上传图像。

我怎样才能做到这一点？

javascript jquery file-upload

请看下面的示例代码：

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

此外，您可以在此处尝试此示例。

有几种方法可以做到这一点。最有效的方法是在的文件中使用URL.createObjectURL（）。将此 URL 传递给img.src ，告诉浏览器加载提供的图像。

这是一个例子：

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

您还可以使用FileReader.readAsDataURL（）来解析中的文件。这将在内存中创建一个包含图像的 base64 表示的字符串。

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

单线解决方案：

以下代码使用对象 URL，这比查看大图像的数据 URL 更有效（数据 URL 是包含所有文件数据的大字符串，而对象 URL 只是引用文件数据的短字符串 - 记忆）：

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

生成的 URL 将如下：

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

协慌网

在上传图像之前预览图像

答案