手机端调用系统相册并上传图片
时间:2022-05-08
本文章向大家介绍手机端调用系统相册并上传图片,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
css:
1 .upload-img{
2 width:80%;
3 position:fixed;
4 top:50%;
5 left:50%;
6 margin-left:-40%;
7 #fff;
8 border-radius: 10px;
9 z-index:1000;
10 display:none;
11 }
12 .upload-img>p:first-child{
13 height:50px;
14 line-height: 50px;
15 border-bottom:2px solid #ccc;
16 padding:0 20px;
17 font-size: 2.2rem;
18 }
19 #open-picture,#open-camera{
20 height:40px;
21 line-height: 40px;
22 padding:0 20px;
23 font-size: 2rem;
24 cursor: pointer;
25 }
26 #open-picture{
27 border-bottom:1px solid #ccc;
28 }
29 .mask{
30 background:#000;
31 opacity: 0.8;
32 width:100%;
33 height:100%;
34 z-index:999;
35 position: fixed;
36 top:0;
37 left:0;
38 display: none;
39 }
40
41 #picture,#camera{
42 position:absolute;
43 top:0px;
44 left:0px;
45 width:100%;
46 height:100%;
47 margin:0px;
48 opacity: 0;
49 filter: "alpha(opacity=0)";
50 filter: alpha(opacity=0);
51 -moz-opacity: 0;
52 }
html:
1 <p><img src="默认显示图片的路径地址" id="img"></p>
2 <form action="" id="upload-img" runat="server" method="post" enctype="multipart/form-data">
3 <div class="upload-img">
4 <p>上传照片</p>
5 <div style="position:relative;">
6 <p id="open-picture"><span class="glyphicon glyphicon-picture rMar10"></span>相册</p>
7 <input type="file" name="picture" capture="camera" id="picture"/>
8 </div>
9 <div style="position:relative;">
10 <p id="open-camera"><span class="glyphicon glyphicon-camera rMar10"></span>拍照</p>
11 <input type="file" name="camera" accept="image/*" id="camera"/>
12 </div>
13 </div>
14 </form>
js:
1 $("#img").click(function(){
2 $(".upload-img").show();
3 $(".mask").show();
4 });
5 $(".mask").click(function(){
6 $(".mask").hide();
7 $(".upload-img").hide();
8 });
- 2017广东工业大学程序设计竞赛初赛 题解&源码(A,水 B,数学 C,二分 D,枚举 E,dp F,思维题 G,字符串处理 H,枚举)
- python接口自动化7-参数关联
- 深度学习GPU环境Ubuntu16.04+GTX1080+CUDA9+cuDNN7+TensorFlow1.6环境配置
- python接口自动化8-参数化
- HDU 2037 今年暑假不AC(贪心,区间更新,板子题)
- “玲珑杯”ACM比赛 Round #13 题解&源码
- 回溯算法入门及经典案例剖析(初学者必备宝典)
- Selenium2+python自动化66-装饰器之运行失败截图
- 51Nod 1091 线段的重叠(贪心+区间相关,板子题)
- 51Nod 1016 水仙花数 V2(组合数学,枚举打表法)
- Selenium2+python自动化67-用例失败自动截图
- Codeforces Round #404 (Div. 2)(A.水,暴力,B,排序,贪心)
- hihoCoder #1053 : 居民迁移(贪心,二分搜索,google在线技术笔试模拟)
- php开发文章发布示例(正则表达式实例开发)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法