java 移动页面中的图片上传_移动端图片操作——上传
上传我们一般都是用“input[type=file]”控件。当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象。
友情提示在,在Android手机webview中,是不支持上传文件的,网上说是修改Android端的代码,但我没试过,我们这边是使用客户端提供的接口来实现上传的。
下面的示例代码可以在这里查看到。
一、accept属性
该属性表明了服务器端可接受的文件类型,可以限制你手机选择相关的文件,如果限制多个,可以用逗号分割,下面的代码就表示只能选择图片与音频相关的文件:
在移动端,点击后会让你选择拍照或相册,还是蛮高大上的。下图是UC浏览器中:
二、change事件
一般选择文件都会使用“change”事件,下面的代码就是绑定了change事件,弹出文件大小:
var upload = document.getElementById('upload');
upload.addEventListener('change', function() {
var file = upload.files[0];
alert(file.size);
}, false);
1) 有些手机浏览器在点击的时候,会弹出键盘选择,我用οnfοcus="this.blur()",来强制失去焦点。
2) 当选择过一次后,再次选择同一个文件,“change”事件不会触发,因为value没有改变,在网上看到个方法,我还没有在实际项目中使用,兼容性有待考证。
使用“Node.cloneNode”复制上传元素,再用“Node.replaceChild”替换节点。
这里注意下:克隆一个元素节点会拷贝它所有的属性以及属性值,但不会拷贝那些使用addEventListener()方法或者node.onclick = fn用JavaScript动态绑定的事件。
upload.addEventListener('change', function() {
var upload = document.getElementById('upload'); //每次要动态获取
var file = upload.files[0];
console.log(file.size);
//解决上传相同文件不触发onchange事件
var clone = upload.cloneNode(true);
clone.onchange = arguments.callee; //克隆不会复制动态绑定事件
clone.value = '';
upload.parentNode.replaceChild(clone, upload);
}, false);
三、File对象
用户所选择的文件都存储在了一个FileList对象上,其中每个文件都对应了一个File对象
File对象负责处理那些以文件形式存在的二进制数据,也就是操作本地文件。
File对象是Blob【下面会提到】的特殊类型,即大块的二进制数据,File对象的尺寸及类型等属性都继承自Blob。
1)File对象可以通过3种方式获取:
1. 元素上选择文件后返回的FileList对象中的成员
2. 拖放操作【Drag或Drop】生成的 DataTransfer对象内files属性中的成员
3. HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果
document.getElementById('upload').files[0]//选取第一个文件对象
2)File对象有9个属性,这里就只介绍3个:
1. name:当前File对象所引用文件的文件名,不包括路径,只读。
2. size:文件大小,单位为字节,只读的64位整数.
3. type:MIME类型,只读字符串,如果类型未知,则返回null。有些移动端的浏览器明明选择了图片,返回的却是null,非常坑。
还有3个非标准的方法:getAsBinary()、getAsDataURL()和getAsText(in DOMString encoding)。
这3个方法现在已经过时,现在用FileReader对象中的方法来取代。
四、FileReader
web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。
1) readAsArrayBuffer():在返回的result属性中将包含一个ArrayBuffer对象【缓冲数组,是一种用于呈现通用、固定长度的二进制数据的类型】以表示所读取文件的内容
Blob可以“append”,ArrayBuffer数据。ArrayBuffer存在的意义就是作为数据源提前写入在内存中,就是提前钉死在某个区域,长度也固定。
2) readAsBinaryString():result属性中将包含所读取文件的原始二进制数据
3) readAsDataURL():result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容
4) readAsText():result属性中将包含一个字符串以表示所读取的文件内容
下面的代码是获取data:URL,可以将返回的result内容赋值给img的src,用于预览等操作。
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = new Image();
img.src = this.result;
console.log(this.result);
};
console.log(this.result)内容如下:
五、URL对象
URL对象是硬盘上指向文件的URL。上面的例子中获取图片的引用,通过读取data URI,data URI是个一大串的字符。
图片原本就在硬盘上,还要转换成另一个格式再用,有点绕了,完全可以直接引用文件的URL,下面是两个方法:
1) URL.createObjectURL():接收一个文件的引用(File或Blob对象)返回一个URL对象
2) URL.revokeObjectURL():销毁创建的URL
var url = URL.createObjectURL(file);
var img = new Image();
img.src = url;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src); //销毁
}
console.log(url);
console.log(url)内容如下:
在移动端需要做个兼容性判断:
window.URL = window.URL || window.webkitURL;
六、Blob对象
Blob(binary large object)对象代表了一段二进制数据,就是一个包含只读原始数据的类文件对象。
File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。
1)创建Blob对象的4种方法:
1. 调用Blob构造函数
2. 使用一个已有Blob对象上的slice()方法切出另一个Blob对象
3. 调用canvas对象上的toBlob方法
4. 过气的方法,通过BlobBuilder接口创建,但兼容性不好,并且现有的BlobBuilder实现都是带前缀的
2)利用Blob对象,生成可下载文件
var blob = new Blob(["pwstrick"]);//数组中添加DOMString对象
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);//创建URL对象
a.download = "test.txt";//HTML5新属性
a.textContent = "test";
document.getElementsByTagName('body')[0].appendChild(a);
生成一个“a”标签,并且点击这个链接,可以下载一个txt文本,内容是“pwstrick”。
3)通过slice方法,将二进制数据按照字节分块,返回一个新的Blob对象
upload.addEventListener('change', function() {
var upload = document.getElementById('upload'); //每次要动态获取
var file = upload.files[0];
var start = 0;
var chunk = 1024 * 10; //10KB
var end = start + chunk;
var size = file.size;
while (start < size) {
segment(file, start, end);
start = end;
end = start + chunk;
if (end > size) {
end = size;
}
}
}, false);
function segment(file, start, end) {
var reader = new FileReader();
reader.onload = function(evt) {
console.log(['Read bytes: ', start, ' - ', end].join(''));
};
var blob = file.slice(start, end);
reader.readAsBinaryString(blob);
}
七、formData
利用FormData对象,可以使用键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。
使用FormData的最大优点就是我们可以异步上传一个二进制文件。
var formData = new FormData();
formData.append("name", "value");//普通键值对
formData.append("blob", blob); //传递一个blob对象
formData.append("file", file); //传递一个file对象
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://xx.com");
oReq.send(formData);
java 移动页面中的图片上传_移动端图片操作——上传相关推荐
- java muti实现图片上传_使用MultipartFile实现文件上传
项目中会经常实现文件上传功能,比如在前台页面中设置上传文件按钮,后台保存文件至服务器,操作完成后前台展示上传结果,如上传成功或者上传失败信息.使用MultipartFile可以很容易的实现文件上传功能 ...
- Java服务器上显示图片问题_java,_服务器读取图片到jsp显示问题,java - phpStudy
服务器读取图片到jsp显示问题 我要从服务器读个图片显示到jsp jsp页面 后台 @RequestMapping(value = "getPic", method = Reque ...
- Java Ucase_JSP页面中的变量和方法声明(Declaration)、表达式(Expression)和Java程序片(Scriptlet)统称为JSP标记。...
JSP页面中的变量和方法声明(Declaration).表达式(Expression)和Java程序片(Scriptlet)统称为JSP标记. 面中Access2010数据库7个对象中,()是实际存放 ...
- antd upload手动上传_基于MVVCTP5的文件上传
现如今在市面上常见的web开发理念一般是两种,一种是MVC格式的,比较传统,而项目较大的开发,一般由团队完成,而MVC格式就显得有些不够合理 .于是 ,在这种情况下诞生了另外一种开发理念,我们叫MVV ...
- python下载图片的命令_网上的图片不知道怎么批量下载?python教你怎么把网站上面的图片都爬下来...
妹子图网站----前言 从今天开始就要撸起袖子,直接写Python爬虫了,学习语言最好的办法就是有目的的进行,所以,接下来我将用10+篇的博客,写爬图片这一件事情.希望可以做好. 为了写好爬虫,我们需 ...
- formdata多文件上传_如何使用FormData轻松上传单个或多个文件
formdata多文件上传 In this post, we'll learn about the FormData interface available in modern web browser ...
- html画布图片不显示_如何在HTML5画布上显示图像
html画布图片不显示 by Nash Vail 由Nash Vail Ok, so here's a question: "Why do we need an article for th ...
- centos7中ps显示的内容_值得收藏,史上最全Linux ps命令详解
原标题:值得收藏,史上最全Linux ps命令详解 一.程序员的疑惑 大概在十多年前,我当时还是一个产品经理.由于一些工作的原因,需要向运维工程师学习一些linux常用命令. 当使用linux ps这 ...
- 怎样在电脑上上传图片_怎么把手机的照片传到电脑,详细教您电脑上传图片到手机...
有时候,我们会发现身边的用户会使用手机来拍照,利用智能手机拍下美丽的照片,从而留下美好的照片留作纪念.有时我们为了需求,需要将手机里的照片传到电脑里,那么大家知道如何将手机里的照片传到电脑里吗?下面, ...
最新文章
- html5新布局,支持HTML5新布局 酷盘Web版全新升级
- python3中unicode怎么写_详解python3中ascii与Unicode使用
- 左神算法:复制含有随机指针节点的链表 / 复杂链表的复制(Java版本)
- Flink安装及使用
- OC中的字符串常用方法
- 『C#基础』XML文件的读与写
- spring学习笔记(六)
- IEEP-网络实施-项目交付流程
- Ubuntu E: 无法获得锁 /var/lib/dpkg/lock - open (11:
- 纪念 C语言之父 丹尼斯·里奇 逝世11周年:他发明了计算机世界的钢筋水泥!...
- JAVA计算机毕业设计钢材商贸公司网络购销管理系统Mybatis+系统+数据库+调试部署
- Qt--探讨.exe程序加密
- android 换机 备份,Android QQ同步助手3.7:资料备份让换机刷机无忧
- 增加虚拟android内存,SD卡变RAM 增加虚拟内存方法
- Firefox火狐浏览器ca证书(cacert)安装
- cubic算法优化_安卓cpu优化 tcp拥塞算法cubic和reno怎么选择
- vmware 提示该虚拟机正在使用中
- iphone ios 横屏,旋转 无响应
- 服务器上Ubuntu系统安装
- Storm Event Imagery Dataset 数据简介