由于传统 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>

HTML5 关于本地操作文件的方法的更多相关文章

  1. easyui 加载本地json 文件的方法

    easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...

  2. HTML5实现本地JSON文件的读写

    参考: 使用HTML5来实现本地文件读取和写入  (FileReader读取json文件,FileSaver.js保存json文件) w3school <input>标签 FileRead ...

  3. 【转】Excel-VBA操作文件四大方法之三

    三.利用FileSystemObject对象来处理文件 FileSystemObject对象模型,是微软提供的专门用来访问计算机文件系统的,具有大量的属性.方法和事件.其使用面向对象的“object. ...

  4. Windows编程中各种操作文件的方法

    windows编程中文件操作有以下几种常见方法:1.C语言中文件操作.2.C++语言中的文件操作.3.Win32 API函数文件操作.4.MFC CFile类文件操作.5.MFC CFileDialo ...

  5. springboot访问服务器本地静态文件的方法

    一.继承WebMvcConfigurerAdapter,重写addResourceHandlers,在registry里面配置访问路径和映射到的服务器本地路径. import org.springfr ...

  6. PHP中常用操作文件的方法

    文件夹的创建: mkdir系统函数,第一个参数是路径,第二个参数是权限,第三个参数是是否递归创建,默认权限是0777最大权限,在windows下没有所谓的权限,在linux下可以设置权限,如果目录存在 ...

  7. Html5选择本地视频音频文件播放

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 解决ajax chrome禁止本地浏览时加载本地其他文件的方法

    在chrome快捷键右键--属性 “ --allow-file-access-from-files ”,前面用空格隔开.然后应用--确定.

  9. C#操作文件夹及文件的方法的使用

    本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内容 ...

随机推荐

  1. 关于定时器setTimeout()方法的实践--巧解bug

    _使用开发环境:UAP:_ _框架:JQuery.MX:_ 最近的开发的页面中,有一处需要在提交的 datagrid里启用行编辑,就会发生奇怪的bug,编辑过程中如图所示不移开焦点直接点保存,那么已输 ...

  2. DevExpress Grid使用checkBox选中的方法

    到官网得到消息自13.2版本后的Dev Grid中均内置了CheckBox列多选功能.在寻找答案的过程的成果进行记录. 一.13.2版本以后用法 启用多选列 对Gird中的View进行以下属性设置: ...

  3. Git切换远程分支

         1. 切换git远程分支,使用命令:git checkout -b 分支名称.    注意:切换远程分支一定要带伤-b 参数,只有切换本地分支的时候才不需要 -b参数,-b 的意思是 bas ...

  4. 常用git的命令

    常用git的命令 详解git fetch与git pull的区别 Git放弃本地所有修改,强制更新: git fetch --all git reset --hard origin/master 说明 ...

  5. AR图像识别 AR识别图像 AR摄像头识别 外包开发 AR识别应用开发就找北京动点软件

    当绝大多数手机厂商还在追求后置双摄拍照的时候,已经有人开始潜心研究AR手机了.刚刚结束的美国消费电子展上,华硕发布了全新的ZenFone AR手机,配备5.7英寸2K屏.骁龙821处理器.8GB内存, ...

  6. 关于DDS的基础知识

    关于DDS的基础知识 声明:这篇博客是我抄别人的,为什么想抄呢,因为他把DDS中的核心部件,相位累加器以及正弦ROM查找表寻址讲得明明白白,我真的好想把这篇文章据为己有. DDS是直接数字式频率合成器 ...

  7. JS中冒号的作用

    JS中冒号的作用1.声明对象的成员2.switch语句分支3.三元表达式 1.声明对象的成员 var Book = { Name: '法', Price: 100, Discount : functi ...

  8. 华为PAY公交卡建议开卡免费！

    华为PAY公交卡,大家都知道是华为与当地交通卡通公司合作的,开卡费大概15-29元,最低充值10-30元. 估计大部分开卡费是给了当地交通卡公司,华为也应该有收入分成.这个虚拟公交卡,不同于实体公交卡 ...

  9. @Async异步注解与SpringBoot结合使用

    当你在service层需要启动异步线程去执行某些分支任务,又不希望显式使用Thread等线程相关类,只想专注于实现业务逻辑代码开发,可以使用@Async异步注解. 1. 使用@Async 异步注解 C ...

  10. altera DDR2 ip使用笔记之IP核生成

    IP核生成 Quartus生成DDR2 ip流程如下: 点击菜单栏的Tools->MegaWizard Plug-In Manager,弹出  选择IP类型,保持路径即文件名等,如下图  点击n ...