本文为原创,转载请注明出处: cnzt  文章:cnzt-p

http://www.cnblogs.com/zt-blog/p/6709037.html 

一. 思路:

 <input type="file" accept="image/*" id="imgUpload" />

二. 原始效果:

 该标签在页面的原始效果如下(选择文件按钮),PC端点击会出现图片选择对话框。这里没有添加任何css代码,很丑。没关系,我们的案例中会做个漂亮一点点的~

  PC chrome(其他效果差不多):

  

  iOS safari:

  

  Android:

  并没有。。。。。。安卓手机

三. 兼容性:

 PC browsers -- 选择本地图片

 iOS -- 可以从图库选择或者拍照

 Android -- 可以选择图库或者文件管理。一句话,安卓之大,无奇不有,各种文件目录啊。。。

 补充20170421:安卓的拍照功能可以通过app端改变接口实现。

四. 用法:

  document.getElementById("imgUpload").onchange = function(e){
   console.log(e);
   var file = e.target.files[0];    console.log(file );
 }

 onchange -- input内容改变是触发,即重新选择新的文件。

 e -- onchange事件的参数,指向change事件,这里我们使用它的target属性。结构如下:

  

 file -- e.target.files[0] -- input标签中的文件对象,包含文件的修改时间,尺寸,类型及文件名,结构如下:

  

五. 上传图片:

 上传图片利用formdata,通过new Formdata(formdom)来获取formdata,结合ajax上传server

 //html代码
<form action="" id="formId">
<input type="file" name="image" accept="images/*" id="CameraUplBtn" capture="camera" />
</form> //js代码
var data = new FormData(document.getElementById("formId"));
$.ajax({
url: url_send,
headers: url_headers,
data: data,
type: "post",
contentType: false,
processData: false,
success: function(data){
//
},
error: function(data){
//
}
});

 注意:contentType: false, processData: false -- 这两个参数规定发送数据不用编码,禁止将data装换为请求字符串格式。

六. 案例(仿微信对话框的图片发送):

  1. 先上效果图,包括图片发送成功和失败的效果:

  

  2. 实现:

  2.1 页面布局

  前面说过了,file input默认样式很丑的,如何做成我们效果图上的样子呢,方法很多,我这里是将input设置宽高和透明度,以及将它定位到“图片”和“相机”的上层,超级简单无bug。

  2.2 事件绑定

  绑定onchange,该拿e拿e,该拿file拿file,见 第四点。

  2.3 图片添加到对话框

  我们采用data url的方式添加要发送的图片。怎么将img图片转成data url形式呢,方法也很多,我们用FileReader。上代码:

  

 var reader = new FileReader();
var imgDom;
var dataUrl;
reader.onload = function(e) {
imgItem = document.createElement('img');
dataUrl= e.target.result; //Android fix
if(isAndroid() && dataUrl.indexOf("data:image/") != 0){
dataUrl= dataUrl.replace("base64,", "image/" + file.type.split("/").pop()+ ";base64,");
} $(imgDom).attr('src',dataUrl); //拼接dom
var appendHTML = '<li class="me">'+
'<div class="c2"><span class="arrow"></span><span class="dialogText">'+
'<i data-id="'+file.name+'" class="uploading fa fa-spin fa-spinner"></i></span></div><div class="c1"></div></li>';
$("#dialogs").append(appendHTML);
imgItem.insertBefore($("i[data-id='"+file.name+"']")); //图片加载完后刷新iscroll
refreshScroll();
};
reader.readAsDataURL(file);

  创建一个FileReader对象,readAsDataURL()以data url方式读取文件,onload事件的参数load事件对象event.target.result即为文件的data url形式。然后在对话列表中增加一行,data url地址赋值给img的src,为了效果好一点,在图片旁边加上loading的圈圈,等图片上上传完成后去掉即可。

  这里对安卓的处理是参考百度反馈页面的fix,抱拳谢过~

  2.4 上传图片大server -- 见 第五点。

  2.5 错误处理

  如果图片上传失败,则在图片旁边添加小圆叹号图标,并给其绑定一个click/tap事件,点击重新上传图片。

本文完!

html页面中拍照和上传照片那些事儿(一)的更多相关文章

  1. html页面中拍照和上传照片那些事儿(二)

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6895352.html 本文主要说下iOS上传的照片在安卓机 ...

  2. 通过链接将JSP页面中一变量传到另一JSP界面中

    A.jsp 发送 <a herf="B.jsp?name=<%=name%>">传递到B页面</a> B.jsp  接收 <%String ...

  3. phonegap 拍照上传照片

    js代码 可以完全从  phonegap 官网扣下来 使用的是2.3版本的phonegap<script type="text/javascript" src="c ...

  4. 获取页面中更新删除传过来的id

    利用uri辅助函数 $id=$this->uri->segment(4); 其中segment(参数)  是表示你要截取获得第几个数据.

  5. 李洪强iOS开发之上传照片时英文改中文

    今天在做项目的时候,有一个功能是上传照片选择系统相册的照片,或者拍照上传照片,但是页面上的文字是英文的, 需求想改成中文的,解决方法是在 info.plist里面添加 Localized resour ...

  6. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

  7. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  8. 用Seam实现:图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中

    上传图片并保存到数据库 seam给我们提供了 s:fileUpload 标签以完成文件上传功能.使用该标签时,要在web.xml中声明一个Seam的过滤器: <filter> <fi ...

  9. 使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项

    首先感谢,http://www.cnblogs.com/2050/p/3913184.html 这篇文章作者. 在使用PLUpload之前个人先封装了一些常用配置,并且将success与error做为 ...

随机推荐

  1. Java三大特性之继承

    二.类的继承 1. 概念:从已有的类中派生出新的类,新的类能吸收已有类的属性和行为,并能扩展新的能力. 2. 一个不由任何类派生出来的类称为基类,一个派生类最近的上层类称为该类的父类,从某一类派生出来 ...

  2. pickle 两个使用小方法

    def pickle_load(file_path): f = open(file_path,'r+') data = pickle.load(f) f.close() return data     ...

  3. Hystrix 断路器

    断路器: 当客户端访问服务端,发现服务端有异常不能进行访问时,就会执行一个fallback 方法.

  4. project .mpp 查看当天工作任务 1.选择自己 2.选择起始和终止时间 就显示当天的任务了

    project .mpp 查看当天工作任务 1.选择自己 2.选择起始和终止时间 就显示当天的任务了

  5. 中位数II

    该题目与思路分析来自九章算法的文章,仅仅是自己做个笔记! 题目:数字是不断进入数组的,在每次添加一个新的数进入数组的同时返回当前新数组的中位数. 解答: 这道题是用堆解决的问题.用两个堆,max he ...

  6. Vickers Vane Pump - How To Choose Vane Pump Parameter Specifications?

    1 rated pressure selection. The rated pressure of the vane pump products is 7MPa, 1OMPa, 16MPa, 2lMP ...

  7. HNOI2006 花仙子的魔法

    题目描述 题解: 考试的时候手画打表,然后半个小时磨了个式子:$$f[i][j]=f[i-1][j-1]+f[i][j-1]$$ 交上去$A$的时候都蒙了. 考后才知道原因. 考虑$n$维空间内原来有 ...

  8. spoj-TSUM Triple Sums

    题目描述 题解: 很吊的容斥+$FFT$,但是并不难. 首先,由于有重复,我们要容斥. 怎么办? 记录三个多项式, 只取一个:$w1$; 相同物体拿两个:$w2$; 相同物体拿三个:$w3$; 然后答 ...

  9. MySQL丨03丨基本语句

    MySQL语句都是以 ; 号结尾的 看库(刘大婶直接面对的是各种档案袋) show databases; 建库(新弄了一个档案袋) create database database_name; 删库( ...

  10. 【JDBC-MVC模式】开发实例

    JDBC - 开发实例-MVC模式  1. 在web.xml中配置连接数据库的信息 web.xml: <context-param> <param-name>server< ...