简单HTML5移动端（客户端）图片上传

snifes 发布于2019-08-26 10:45 / 564人阅读

摘要：上传我们一般都是用控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到对象。

上传我们一般都是用“input[type=file]”控件。当你用此控件时，你就授权了网页和服务器访问对应的文件，就可以得到File对象。

1. accept属性

该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割，下面的代码就表示只能选择图片与音频相关的文件

2. change事件

一般选择文件都会使用“change”事件，下面的代码就是绑定了change事件，弹出文件大小

var upload = document.getElementById("upload");
upload.addEventListener("change", function() {
  var file = upload.files[0];
  alert(file.size);
}, false);

有些手机浏览器在点击的时候，会弹出键盘选择，我用onfocus="this.blur()"，来强制失去焦点

3. File对象

用户所选择的文件都存储在了一个FileList对象上，其中每个文件都对应了一个File对象
File对象负责处理那些以文件形式存在的二进制数据，也就是操作本地文件
File对象是Blob的特殊类型，即大块的二进制数据，File对象的尺寸及类型等属性都继承自Blob

File对象可以通过3种方式获取

元素上选择文件后返回的FileList对象中的成员

拖放操作【Drag或Drop】生成的 DataTransfer对象内files属性中的成员

document.getElementById("upload").files[0]//选取第一个文件对象

4. 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);

GPU云服务器云服务器 H5移动端上传图片 html5移动端简单的上传图片js html5移动端案例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106713.html

HTML5 进阶系列：文件上传下载

摘要：前言中提供的文件在前端中有着丰富的应用，上传下载读取内容等在日常的交互中很常见。构造函数中的第一个参数是一个数组，可以存放对象对象对象和字符串。通过构造函数创建一个对象该对象有以下方法中断读取操作。前言 HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本...

learn_shifeng 2019-08-20 17:42 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0
JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

iOS122 2019-08-19 17:16 评论0 收藏0