利用html5 file api读取本地文件示例(如图片、PDF等)
|
在html4的年月，我们假如要在网页上泛起一张用户当地的图片，必要用户先把图片上传随处事器，再按照处事器提供的图片地点把图片下载下来，才气把图片在网页上泛起出来。这一来二往，最少已经费了两倍于这张图片的流量了，更别说处事器为了存储这张图片所耗费的资源以及用户上传错了图片的冤枉本钱（由于在html4期间，用户选择好图片后，每每只能看到图片的文件名，而无法通过预览图来进一步确认这张图片是否就是本身想要上传的）。 html5提供了新玩法，光靠赏识器，就可以对当地的（着实也可所以长途的）文件（首要是图片）举办泛起、读取、处理赏罚等操纵，而这统统，则是通过html5 file api来实现的。 file工具不光独存在，而是以数组情势，存在一个名为FileList的数组中。那么，怎样拿到这个FileList数组呢？今朝，html5有两个途径可以拿到FileList，一是通过file范例的input，二是通过拖放操纵的drop变乱。 <input id="file-input" type="file" /> 或html5新增的可举办文件多选的multiple属性： <input id="file-input" type="file" multiple /> 一样平常，我们都是给input:file绑上一个onchange变乱，以便在用户选定文件后，马长举办读取文件等下一步操纵： //原生js var inputElement = document.getElementById("file-input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { var fileList = this.files; } //jquery版 $('#file-input').on('change', function() { var fileList = this.files; }); 通过拖放操纵drop变乱 起主要设定一个可供拖放的地区： <div id="dropbox" style="width: 200px;height: 200px;"></div> 其它，为了能触发drop变乱，我们必需阻止dragenter和dragover变乱的默认举动： var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } 然后，我们就可以在drop变乱的callback中，获取到fileList： function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } 怎么读取或操作file工具呢？ html5提供了两个方案：FileReader和ObjectUrl。 行使FileReader读取file工具 起首必要实例化FileReader工具： var reader = new FileReader(); 操作FileReader读取file工具是一个异步的进程，我们必要先为FileReader配置好load变乱的callback，奉告FileReader在读取到file工具的数据后应该举办什么进一步的操纵： reader.onload = function(e) { document.getElementById("image").src = e.target.result; } 上面这段代码的意思是，FileReader读取到图片的数据后，把数据（DataUrl）放到的src属性里。 最后，就是通过FileReader差异的要领，来抉择读取file工具数据后用什么数据名目来存放，并实验读取： readAsArrayBuffer(file) ：读取file工具并存放为ArrayBuffer工具（ArrayBuffer工具是什么我暂且没有搞清，应该是一种为了高效存取数据而发生的数据布局）。 readAsText(file [, 'UTF-8']) ：以一样平常文本模式读取file工具，值得留意的是，操作第二个参数（可选）可指定字符编码。 readAsDataURL(file) ：读取file工具并存放为data: URL名目标字符串。 操作ObjectURL ObjectURL相等于文件的一个姑且路径，此姑且路径可随时天生、随时开释，在当地赏识器行使起来时，与平凡的url无异。 以把一张当舆图片表现在页面上为例： var img = document.createElement("img"); img.src = window.URL.createObjectURL(file); 此时，src形如：blob: 用这个src就能让赏识器从当地读取图片。 这种方案相对用FileReader天生图片的base64编码并放到的src里来说，机能有了很大的晋升。 较量这两种读取File工具的方案，FileReader适实用来上传文件，而ObjectURL则得当直接在赏识器举办操纵，然后操纵后再把处理赏罚后的数据举办上传，譬喻操作canvas截图或举办图片压缩等。虽然，这统统都是要思量兼容性的。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
