上传文件（图片）解析

我想上传一个文件（图片，真的）来解析。而我使用以下HTML来实现这一目标：上传文件（图片）解析

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

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

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

来源

2015-09-26 Jae Kim

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

下面是使用香草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);

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

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

来源

2015-09-26 04:22:23

非常感谢你的回应:)从这里我可以上传文件到Parse？ –

根据您正在使用的“Parse”API，随时将这些详细信息添加到您的问题中 - 您可能需要使用不同的FileReader方法，但适用相同的原则。 –

上传文件（图片）解析

回答

相关问题