手机端调用系统相册并上传图片
时间: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 });
- 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 数组属性和方法
- python转化excel数字日期为标准日期操作
- thinkPHP框架通过Redis实现增删改查操作的方法详解
- PHP中引用类型和值类型功能与用法示例
- PHP文件上传小程序 适合初学者学习!
- php的扩展写法总结
- 实例介绍PHP删除数组中的重复元素
- Python迭代器协议及for循环工作机制详解
- PHP CURL中传递cookie的方法步骤
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
- Yii2处理密码加密及验证的方法
- PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
- python如何输出反斜杠
- 在Laravel5中正确设置文件权限的方法
- asp函数split()对应php函数explode()
- php获取目录下所有文件及目录(多种方法)(推荐)