如何使用 js 获取二进制代码中的任何图像？

Question

我想做一个带进度条的多图上传系统。我想做简单的代码（使用 jquery 或 js）。我想当用户在浏览器上上传他的图像​​并且我想在浏览器上显示该图像并使用上传按钮他开始通过他的文件夹中的 ajax 上传图像。

所以问题

1.) 是否可以显示上传的图片（无需任何复杂的代码）？

2.) 我是否获得了一个变量或数组，其中上传的图像存储为 base64 代码（数据：/img:dfd5d/d54fs ......类似这样）或编码？

3.) 如何添加进度条？

我还没有编写任何代码，因为我不知道如何开始。我是计算机科学的新手。

但我在 this site 上找到此代码

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 = "";
  }
}

这是简单的代码，我理解，但有一点不清楚这行 var reader = new FileReader(); 的含义是什么，为什么要使用 new，它是什么？ 提前 Ty，请不要解释复杂，我的英语不太好。所以如果可能的话，请尽量用粗话来解释..

Answer 1

假设你有这个字段

<input type="file" onchange="showImage(this)"/>

您可以创建一个脚本来获取二进制数据并显示它

function showImage(input){
    var reader = new FileReader();

    // validating...
    var fileType = input.files[0].type;
    var filesize = input.files[0].size;

    // filetype (this will validate mimetype, only png, jpeg, jpg allowed)
    var fileTypes = ["image/png", "image/jpeg", "image/gif"];
    if (fileTypes.indexOf(fileType) < 0){
        // return error, invalid mimetype
        return false;
    }

    // file cannot be more than 500kb
    if (filesize > 5000000) {
        // return error, image too big
        return false;
    }

    reader.onload = function (e) {
        // e will contain the image info
        jQuery('#myimagetopreview').attr('src', e.target.result)
    }

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

这应该可以，如果你有问题告诉我

编辑：并非所有浏览器都支持 FileReader，请查看文档以获取更多信息https://developer.mozilla.org/en/docs/Web/API/FileReader

Answer 2

JS 中的 FileReader 状态为“Working Draft”，不是官方 JS API 的一部分。我认为你必须等到浏览器支持这个 ne API 或者你必须在浏览器中激活实验性 JS API。