FileReader和window.url.createobjecturl预览前端JS

FileReader和window.url.createobjecturl预览前端JS图片
/ /预览图片：FileReader模式
document.getelementbyid（'imgfile）。Onchange =功能（e）{ var = 5元document.getelementbyid（'imgfile）。文件{ 0 }；

VaR FR = FileReader（）；
fr.onload =功能（ELE）{

无功pvimg =新的图像（）；
pvimg.src = ele.target.result；
pvimg.setattribute（'id'，'previewimg）；

$（'。preview_wrap）。Html（''）。追加（pvimg）；18 }
Fr.readAsDataURL（元）；
}
/ /预览图片：URL.createObjectURL模式
document.getelementbyid（'imgfile）。Onchange =功能（e）{
无功电= document.getelementbyid（'imgfile）。文件{ 0 }；

无功createobjecturl =功能（BLOB）{
返回窗口{窗口。webkiturl'webkiturl：'url} { 'createobjecturl}（BLOB）；
}；
无功newimgdata = createobjecturl（ELE）；

无功pvimg =新的图像（）；
pvimg.src = newimgdata；
pvimg.setattribute（'id'，'previewimg）；

$（'。preview_wrap）。Html（''）。追加（pvimg）；
}
以上两预览与FileReader和url.createobjecturl。

根据前人的creatobjecturl能有更好的表现，也许对浏览器的界面的原因，它可以处理更快。

最近，我做了一个需要上传图片预览的项目。使用最简单的输入文件上传。想到的第一件事就是用FileReader实现前端预览。这是很简单的看到前面的代码的第一段，我的手机上测试它。但在一些奇异的花，如OPPO的Android 4.3，我们不能预览图片在我们的应用程序的WebView打开相册！但在手机上的微信，就可以在浏览器上传！

下面的代码如下所示。这是因为Base64编码丢失的图片格式，以及图像/ JPG图像显示在手。这是开始，这是一个readasdataurl问题。没有编码是成功的。找了一整晚，不知哪根筋突然想到打印输入文件的样子，发现字体是空的，文件的其他属性都是正常的。
继续百度（眉目传情最近FQ是不稳定的，不可用），原来有人遇到类似的奇怪的问题，但一直没有得到解决。

不经意间，发现图片预览可以用另外的FileReader，以及url.createobjecturl.at 11:26在晚上，首先要赶上最后一班地铁。

=====================

第二天凌晨，晚上的灵感实验，根据输入文件的图片类型判断，如果它不存在到文件手动分配类型中（见下面代码，有点乱）。
事实证明，您的直接赋值不能改变文件的类型，它不起作用！

所以开始练习url.createobjecturl（查看代码的前二部分）

神奇的uff01find预览正常！

看代码发现，createObjectURL在一个HTTP格式获取一个文件，而且即使输入文件的文件类型不存在，它不会是一个代码失败。
以上是关于在JS图片FileReader和window.url.createobjecturl预览，这是萧边分享你的全部内容。我希望能给你一个参考，希望你能支持它。