js-input file 文件上传(照片,视频,音频)
在此做一个笔记
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
accept表示打开的系统文件目录;
capture表示的是系统所捕获的默认设备(camera:照相机;camcorder:摄像机;microphone:录音);
multiple:支持多选,当支持多选时,multiple优先级大于capture;
再我做的一个红包活动中,需要笑脸照片来判断发红包,所以用到了input type="file"的标签属性,本来用的capture="camera"直接拍照,但是在ios上调相机是没有美颜功能的,担心用户不会选择上传,所以之后改变策略了,用了multiple,就是这样;
我的源代码:
<img src="" class="closebtnimg" id="closeimg1" /> //该标签是要放上传的照片的哈
<input type="file" accept="image/*" multiple class="img" onchange="javascript:setImagePreview('addimg1','closeimg1');" id="addimg1" />(错误的,有些手机不支持,底部有更新的正确的写法)
js:
var docObj;
function setImagePreview(btnfile, imgId) {
docObj = document.getElementById(btnfile);
var imgObjPreview = document.getElementById(imgId);
if (docObj.files && docObj.files[0]) {
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100%';
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
imgObjPreview.style.display = 'block';
}
return true;
}
以上是我的代码,很完美的哈,经过测试验证的。
2018-7-11更新调整
本来以上的代码是ok的,但是后期我用了大量的手机测试,有些手机是不成功的,所以上面的Html更新为最新的:
<input type="file" accept="image/*" class="img" onchange="javascript:setImagePreview('addimg1','closeimg1');" id="addimg1" /> (正确的,所有手机支持选择拍照,照片)
js-input file 文件上传(照片,视频,音频)的更多相关文章
- js 实现 input file 文件上传
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...
- input file 文件上传标签的样式美化
input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...
- input file 文件上传,js控制上传文件的大小和格式
文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input fil ...
- 修改input file 文件上传的样式
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- PHP 多input file文件上传
前台html jquery代码 后台PHP处理 前台html <form id="form" method="post" enctype="mu ...
- input file文件上传样式
<style> .file-group { position: relative; width: 200px; height: 80px; ...
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- input实现文件上传
input实现文件上传 input + ajax 实现文件上传,包括文件大小及类型的判断 一.html <input type="file" id="file&qu ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
随机推荐
- mysql中的的按小数位截取
format()函数返回类型是字符串,满三位会加一个逗号. 针对数字类型转换建议使用 convert或者cast函数,用法如下: format(param, 2) (不建议) convert(para ...
- VIM 编辑器 -使用详解记录
1.什么是 vim? Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用.简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但 ...
- LNMP一键安装包开启pathinfo和rewrite模式
此教程适用于集成安装包lnmp,官网是https://lnmp.org/ 一. 开启pathinfo #注释 下面这一行 #include enable-php.conf #载入新的配置文件 incl ...
- centos7.4系统部署nodejs前端项目
1.安装nodejs运行环境 wget命令下载Node.js安装包,该安装包是编译好的文件,解压之后,在bin文件夹中就已存在node和npm,无需重复编译 wget https://nodejs.o ...
- LeetCode之Weekly Contest 90
LeetCode第90场周赛记录 第一题:亲密字符串 问题: 给定两个由小写字母构成的字符串 A 和 B ,只要我们可以通过交换 A 中的两个字母得到与 B 相等的结果,就返回 true :否则返回 ...
- ipvsadm启动报错解决方法
Centos7 yum -y install ipvadm 安装后,启动ipvsadm却报错. Redirecting to /bin/systemctl start ipvsadm.service ...
- IDEA入门学习笔记1:资料收集
IDEA2018软件下载 :https://mp.weixin.qq.com/s?__biz=MzIwMjE1MjMyMw==&mid=2650200056&idx=1&sn= ...
- JFinal 结合Dubbo发生的一些问题
1.java.lang.NoSuchMethodError: org.jboss.resteasy.specimpl.BuiltResponse.getHeaders()Ljavax/ws/rs/co ...
- stm32定时器学习二——PWM设置
/* STM32 嵌入式学习入门(5)——PWM的实现 上一篇博文介绍了定时器和PWM的基本的原理,本篇博文从代码层面来介绍PWM的具体实现.同样,还是以博主所用的开发板——正点原子开发板STM32F ...
- istio的原理和功能介绍
目录 1 什么是Istio 2 架构和原理 2.1 Proxy代理 2.2 Mixer混合器 2.3 Pilot引导 2.4 Citadel堡垒 2.5 Galley 3 功能列表 4 性能评估 1 ...