由于传统 b/s 开发出于安全性的考虑，浏览器对于本地文件的操作权限几乎没有，用户想要操作一个文件基本都是采用先上传到服务器，
再回显给浏览器供用户编辑，裁剪等的方法，这种方式虽然可行，但其对于服务器，对于用户体验，都不是很友好
下面笔者就给出 H5 JS 最新在本地操作文件的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件操作</title> </head> <body> <div id="main"> <img id="img" src="" /> <input id="file" type="file" accept="image/*" /> </div> <script type="text/javascript"> /** * 将本地图片件转化为 img 标签可以识别的 src * @param file 从 input[type=file] 表单中获取的文件对象 * @returns 可以直接作为 img 标签的 src 属性值的对象 */ var fileToImgSrc = function (file) { if (window.URL) return window.URL.createObjectURL(file); if (window.windcreateObjectURL) return window.createObjectURL(file); if (window.webkitURL) return window.webkitURL.createObjectURL(file); }; /** * 将本地文件转化为 base64 编码字符串 * @param file 从 input[type=file] 表单中获取的文件对象 * @param fn 回调方法，读取完成后执行 */ var fileToBase64 = function (file, fn) { var reader = new FileReader(); reader.onload = function () { fn(reader.result); }; reader.readAsDataURL(file); } /** * 将 base64 编码的字符串 转化为 blob 对象 * @param base64Str base64 编码的字符串 * @returns {Blob} 文件对象 */ var base64ToBlob = function (base64Str) { var base64StrArr = base64Str.split(","); var byteArr = atob(base64StrArr[1]); var lengths = byteArr.length; var utf8Arr = new Uint8Array(lengths); while (lengths--) utf8Arr[lengths] = byteArr.charCodeAt(lengths); return new Blob([utf8Arr], { type: base64StrArr[0].split(/;|:/)[1] }); }; /** * 由于使用了比较新的 API， 旧版浏览器可能会存在一定兼容性的问题，建议将浏览器更新到较为新的版本 * @type {HTMLElement} */ var inpout = document.getElementById("file"); var img = document.getElementById('img'); inpout.addEventListener("change", function (ev) { var file = this.files[0]; // 获取 input 表单的文件对象 // img.src = fileToImgSrc(file); // 将图片回显 fileToBase64(file, function (base64Str) { console.log(base64Str); // 读取文件为 base64 字符串 var blob = base64ToBlob(base64Str); // 再次转化为文件 img.src = fileToImgSrc(blob); // 再次回显 }) }); </script> </body> </html>
