html5选择本地文件手机,HTML5 关于本地操作文件的方法

由于传统 b/s 开发出于安全性的考虑，浏览器对于本地文件的操作权限几乎没有，用户想要操作一个文件基本都是采用先上传到服务器，

再回显给浏览器供用户编辑，裁剪等的方法，这种方式虽然可行，但其对于服务器，对于用户体验，都不是很友好

下面笔者就给出 H5 JS 最新在本地操作文件的方法

文件操作

/**

* 将本地图片件转化为 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); // 再次回显

})

});

easyui 加载本地json 文件的方法

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

HTML5实现本地JSON文件的读写

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

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

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

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

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

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

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

PHP中常用操作文件的方法

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

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

...

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

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

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

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

随机推荐

《一个操作系统的实现》 ubuntu系统环境配置

ubuntu系统环境配置 电脑之前已经安装了gcc. 一.nasm安装:sudo apt-get install nasm或官网下载http://sourcefor ...

Azure 媒体服务可将优质内容传输至 Apple TV

作为内容提供商,如果想要将优质内容传输到Apple TV,需要使用Apple FairPlay Streaming (FPS)技术. 但是这个技术的构建比较繁琐,基于此,Azure提供了FairPla ...

Hive几种数据导出方式

Hive几种数据导出方式 今天我们再谈谈Hive中的几种不同的数据导出方式.可以根据导出的地方不一样,将这些方式分为三种: (1).导出到本地文件系统: (2).导出到HDFS中: (3).导出到Hi ...

js获取页面宽度高度及屏幕分辨率

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

【读书笔记】读《JavaScript设计模式》之适配器模式

一.定义 适配器模式可用来在现有接口和不兼容的类之间进行匹配.使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象.在设计类的时候旺旺会遇到有些接口不能与现有API ...

iOS H5容器的一些探究(二)：iOS 下的黑魔法 NSURLProtocol

来源:景铭巴巴 链接:http://www.jianshu.com/p/03ddcfe5ebd7 iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择 一.前言 ...

Singleton Pattern(单例模式)

1.简介 单例模式,顾名思义,即在整个系统中,类的实例对象只有一个. 单例模式具有以下特点: 单例类只能有一个实例 单例类必须自己创建自己的唯一实例 单例类必须给所有其他对象提供这一实例 2.实现 其 ...

freemarker之list

freemarker之list 1.设置数据源 /** * * @Title:student * @Description: * @param:@param name * @return: void ...

《mysql必知必会》学习_第七章_20180730_欢

第七章:数据过滤 P43 select prod_id,prod_price,prod_name from products where vend_id =1003 and prod_price &l ...

网络解析(一)：LeNet-5详解

https://cuijiahua.com/blog/2018/01/dl_3.html 一.前言 LeNet-5出自论文Gradient-Based Learning Applied to Docu ...