Question

我正在尝试上传文件（图片，真的）到解析。我正在使用以下html来实现这一目标：

<body>
    <form id="uploadPhoto">
        <input type="file" id="profilePhotoFileUpload">
        <input type="submit" id="submitButton"  value="Submit" />
    </form>
</body>

现在，问题是，当我尝试获取profilePhotoFileUpload var image = document.getElementById('profilePhotoFileUpload').value;的值时，我得到一个文件路径的字符串而不是实际的图片。例如，当我alert(image)时，我得到C:fakepath/twitterLogo.png.但我希望实际图像在该变量中。有人知道如何做到这一点吗？

我阅读了大量关于此的其他帖子，它涉及PHP（我不懂PHP）。我想知道我是否可以绕过PHP部分并直接将其上传到Parse ......无论如何，如果你有解决这个问题的话请告诉我！

Answer 1

如果要处理客户端上的文件（即不要将文件上传到服务器），则必须访问元素上的files属性。

这是使用vanilla JS的快速工作示例：http://jsbin.com/woboju/edit?js,output

使用此代码，您可以单击上传按钮并选择图像。这会触发元素上的更改事件 - 注意：不是传统的表单提交。在事件处理程序中，获取并异步读取第一个文件对象。成功加载文件后 - onload - 然后创建一个新的图像元素，将其src属性设置为结果数据URL，并将该元素附加到文档中。

document.getElementById('profilePhotoFileUpload').addEventListener("change", function() {
  var self = this;
  var file = self.files[0];
  var reader = new FileReader();

  reader.onload = function() {
    var img = document.createElement('img');
    img.src = reader.result;

    self.parentNode.appendChild(img);
  };

  reader.readAsDataURL(file);
}, false);

在最终的代码中，您需要添加一些健全性检查，例如确保已选择图像。您还可以添加对一次选择的多个图像的支持。

比照http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

上传文件（图片）以解析

1 个答案: