html5图片上传时IOS和Android均显示摄像头拍照和图片选择

最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为<input type="file" capture="camera">后,Android可显示相机和文档,但IOS则只有拍照选项了,最后通过判断设备类型使在IOS和Android下均可以显示拍照和图库选择,代码如下:

var u = navigator.userAgent, app = navigator.appVersion; 
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; //android终端或者uc浏览器 
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
//alert(‘是否是Android:‘+isAndroid); 
//alert(‘是否是iOS:‘+isiOS);

if(isAndroid){
          $ ("input[name=‘file‘]").attr(‘capture‘,‘camera‘);
 }

安卓效果

IOS效果

时间: 2024-12-08 08:17:33

html5图片上传时IOS和Android均显示摄像头拍照和图片选择的相关文章

kindeditor更改图片上传时网络图片的路径

当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是服务器上的/kindeditor/attached/image/下面. 如果想要改变这个路径,需要找到/kindeditor/php/file_manager_json.php这个文件,然后可以看到下面几行: //根目录路径,可以指定绝对路径,比如 /var/www/attached/ $root_path = $php_path . '../attached/';

图片上传时获取图片的宽和高

经常会遇到图片上传的问题,这时候我们会传图片的地址,宽和高到服务器,至于图片上传就不说了,这里主要说图片上传时获取图片的原始宽和高的问题. 一般而言,我们把图片上传至服务器时,服务器会返回一个上传地址给我们,这个就是我们图片的url了,但是光有这个还是不够的,因为还要将图片的宽和高传给服务器,这时候就可以这样做了.直接上代码: var img = new Image() img.src = url 然后就可以使用img.width和img.height来获取图片的宽和高了.当然仅仅这样做是不够的

使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法

近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中,要求尽快实现. 我们在项目中使用的在线编辑器是Kindeditor4.1.10,它们的多文件上传插件是使用Flash实现的,原本应该就是能使用的,但为什么老是显示上传失败的,百度了一下前人的经验和教训,出现这种情况,有两种可能:1)上传的目标文件夹没有写权限,导致上传的文件无法进行写操作,所以上传

前端手势控制图片插件书写四(图片上传及Ios图片方向问题)

1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById("file").files[0]; console.log(document.getElementById("file").files); if(!/image\/\w+/.test(file.type)){ console.error("看清楚,这个需要图片

图片上传时遇到的问题

今天在用ssm框架做图片上传的时候遇见一个问题: 后来检查发现是springMVC配置文件中遗漏了关于图片上传的配置文件 把上面的<bean>配置好就可以了: 顺便总结一下: 图片上传只需要记住三件事: 前台页面:(1)要用post请求:(2)别忘了在form表单中加入enctype="multipart/form-data" 后台controller层要这样写: 3.如果上面代码没问题,就检查一下springmvc配置文件;

图片上传时预览插件

html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="uploadView.js" type="text/javascript"></script> <script> window.

关于图片上传时选择图片以后生成图片预览

实现选择图片之后生成预览图 <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews() {        //获取选择图片的对象        var docObj = document.getElementById("filesid");        //后期显示图片区域的对象        var dd = document.getElement

Extjs中用dwr实现文件上传时,fileuploadfield不能正常显示的问题

当使用DWR调用Extjs的fileuploadfield 来做文件上传时,不能实现上传操作,需要修改dwr对应jar包中的engine.js文件 将1808行 var clone =value.cloneNode(true); 1812行  value.parentNode.insertBefore(clone,value); 注释掉 通过  var file = dwr.util.getValue("uploadFile");  获取fileuploadfield 对应的值 版权声

Java Servlet图片上传至指定文件夹并显示图片

在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/image)的图片.主要步骤如下: 步骤一:上传页面uploadphoto.jsp 需要注意两个问题: 1.form 的method必须是post的,get不能上传文件, 还需要加上enctype="multipart/form-data" 表示提交的数据是二进制文件. 2.需要提供type=&