我有一个文件输入: (jsbin)
选择文件时,显示所选图像的小图像:
我可以用两种方式做到:
使用FileReader:
function handleFiles(t) //t=this { var fileList = t.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var img = document.createElement("img"); img.style... = ... document.getElementById('body').appendChild(img); var reader = new FileReader(); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } // ... }
使用ObjectURL/BLOB:
function handleFiles(t) { var fileList = t.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var img = document.createElement("img"); img.src = window.URL.createObjectURL(file); img.onload = function (e) { window.URL.revokeObjectURL(this.src); } document.getElementById('body').appendChild(img); } }
如您所见,两者都有效:
但
html结果不同:
题 :
第一个,我已经知道我能做什么,它是纯粹的数据 - uri数据.
但什么时候应该使用第二种方法(blob)?我的意思是 - 我该blob:http%3A//run.jsbin.com/82b29cc5-8452-4ae2-80ca-a949898f4295
怎么办?
ps
mdn解释关于URL.createObjectURL
什么时候我不应该使用每个.
以下是您使用这两种URL的主要区别:
你可以很容易地从中获取数据
您可以将它们发送给其他用户或通过HTTP,数据仍然存在
它们在何处或如何创建无关紧要,如果数据有效,您将在任何浏览器,任何操作系统,任何地方看到内容
数据URL通常过长,因此IE可能无法处理它们,并且在任何浏览器中处理都会很烦人
它们的效率低于BLOB URL(您必须读取文件才能创建它,不使用BLOB等)
它们比数据URL短得多,使得它们更易于管理
您可以访问他们的数据,但由于URL只是对数据的不透明引用,因此必须使用a访问FileReader
数据,并且无法直接从URL中提取数据,如数据URL
因为它们具有合理的长度,它们更容易处理并且具有更好的IE支持
URL本身无法访问数据(URL是不透明的引用),并且它不存储在云中
由于con#1,您无法将URL发送到服务器/其他用户,因为他们将无法访问数据.所以URL只适合你.
您也无法在其他浏览器中访问BLOB URL中的数据(即使在同一台计算机上)
此外,即使在同一浏览器上,您也无法从其他来源访问BLOB URL
这个列表看起来像数据URL是一个明显的优势,但BLOB网址创建速度更快,除非你需要将网址发送给其他用户或服务器,你应该使用它们,因为它们更快,更容易使用IE更易于管理,更好用.但是如果你确实需要向服务器或其他用户发送网址,我建议以某种方式直接使用XHR2传输blob.数据网址并不是那么好.
blob:
URL 的长度始终低于合理限制.
数据URL可以是任意大的.因此,当数据URL太长时,某些浏览器(IE,咳嗽)将不再显示图像.因此,如果要显示非常大的文件,使用blob:
(或filesystem:
URL)可能比数据URL更有意义.
此外,您还可以直接从恢复数据blob:
URL (前提是一滴尚未撤销,例如,由于该文件是卸载,同源策略不被破坏)使用XMLHttpRequest
.例如,以下代码将blob URL的内容作为文本获取:
var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'})); var x = new XMLHttpRequest(); // set x.responseType = 'blob' if you want to get a Blob object: // x.responseType = 'blob'; x.onload = function() { alert(x.responseText); }; x.open('get', blobUrl); x.send();
如果要使用文件将文件的内容提交给服务器XMLHttpRequest
,则使用blob:
或data:
URL 实际上没有意义.只需File
使用该FormData
对象直接提交对象即可.如果您丢失了原始File
引用,并且只有一个blob:
URL,则可以使用上一个代码段Blob
再次获取对象以供使用FormData
.
给定data:
-URL,恢复原始数据并不容易.Firefox和Opera 12-允许使用data:
-URL XMLHttpRequest
.Chrome,Internet Explorer,Safari和Opera 15+拒绝通过XMLHttpRequest加载数据网址.因此,关于恢复数据,blob:
URL也优于data:
-URL.
如果要在同一原点的不同帧中显示文件的结果,请务必使用blob:
URL.如果要操纵Blob
不同帧中的数据(可能位于不同的源),请不要使用blob或数据URL,直接使用发送数据postMessage
.
blob:
-URL通常比data:
-URL 更好地表示(二进制)数据.对于小型数据(最大20KB),data:
网址可能是一个更好的选择,因为较高的范围内支持的浏览器,即比较我可以用一滴的网址与我可以使用数据的URI (不过,如果你正在写一个复杂的HTML5应用程序,赔率是,你不会支持IE9-).