Question

有没有办法允许用户在他的个人驱动器中查找图像并在当前网页中创建变量？（所有这一切都无需将图像发送到服务器。）

例如，用户从他的驱动器中选择图片。然后他可以在画布上移动它们。

注意：问题是选择图像并将它们放入变量中。我已经知道如何显示它们了。

像<img src="smiley.gif">这样的东西显然不起作用。

我正在使用Jquery。

Answer 1

我相信您正在寻找的是Javascript FileReader。readAsDataURL功能。

您首先要添加一些用户可以点击的上传/选择区域，然后调出文件浏览器来选择一些图像。之后，您将捕获事件并使用fileReader将文件读入数据URI，然后您可以将其放入图像src属性中，以显示图像。以下是MDN的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>  
</head>
<body>       
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
<script type="text/javascript">
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 = "";
  }
}
</script>
</body>
</html>

JS：从个人驱动器加载用户图像

1 个答案: