input type file=file 怎么样调取用户手机照相机

用户名:glblong
文章数:210
评论数:40
访问量:481727
注册日期:
阅读量:1297
阅读量:3317
阅读量:445082
阅读量:1130813
51CTO推荐博文
在一个带有input tpye=file标签的Html页面,通过WebView,上传android手机上的图片,发现不工作。(在Ios和微信上完全正常工作)所以,需要研究一下Android的WebView,来支持type=file的标签。重写WebChromeClient中关于文件选择的方法,onShowFileChooser和openFileChooser。(项目中只需要选择图片,所以加上了图片过滤。)public&static&final&int&INPUT_FILE_REQUEST_CODE&=&1;
private&ValueCallback&Uri&&mUploadM
private&final&static&int&FILECHOOSER_RESULTCODE&=&2;
private&ValueCallback&Uri[]&&mFilePathC
private&String&mCameraPhotoP
private&WebChromeClient&mWebChromeClient&=&new&WebChromeClient()&{
&&&//&android&5.0
&&&public&boolean&onShowFileChooser(
&&&&&&&&&WebView&webView,&ValueCallback&Uri[]&&filePathCallback,
&&&&&&&&&WebChromeClient.FileChooserParams&fileChooserParams)&{
&&&&&&if&(mFilePathCallback&!=&null)&{
&&&&&&&&&mFilePathCallback.onReceiveValue(null);
&&&&&&mFilePathCallback&=&filePathC
&&&&&&Intent&takePictureIntent&=&new&Intent(MediaStore.ACTION_IMAGE_CAPTURE);
&&&&&&if&(takePictureIntent.resolveActivity(getPackageManager())&!=&null)&{
&&&&&&&&&//&Create&the&File&where&the&photo&should&go
&&&&&&&&&File&photoFile&=&
&&&&&&&&&try&{
&&&&&&&&&&&&photoFile&=&createImageFile();
&&&&&&&&&&&&takePictureIntent.putExtra("PhotoPath",&mCameraPhotoPath);
&&&&&&&&&}&catch&(IOException&ex)&{
&&&&&&&&&&&&//&Error&occurred&while&creating&the&File
&&&&&&&&&&&&Log.e("WebViewSetting",&"Unable&to&create&Image&File",&ex);
&&&&&&&&&}
&&&&&&&&&//&Continue&only&if&the&File&was&successfully&created
&&&&&&&&&if&(photoFile&!=&null)&{
&&&&&&&&&&&&mCameraPhotoPath&=&"file:"&+&photoFile.getAbsolutePath();
&&&&&&&&&&&&takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT,
&&&&&&&&&&&&&&&&&&Uri.fromFile(photoFile));
&&&&&&&&&}&else&{
&&&&&&&&&&&&takePictureIntent&=&
&&&&&&&&&}
&&&&&&Intent&contentSelectionIntent&=&new&Intent(Intent.ACTION_GET_CONTENT);
&&&&&&contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
&&&&&&contentSelectionIntent.setType("image/*");
&&&&&&Intent[]&intentA
&&&&&&if&(takePictureIntent&!=&null)&{
&&&&&&&&&intentArray&=&new&Intent[]{takePictureIntent};
&&&&&&}&else&{
&&&&&&&&&intentArray&=&new&Intent[0];
&&&&&&Intent&chooserIntent&=&new&Intent(Intent.ACTION_CHOOSER);
&&&&&&chooserIntent.putExtra(Intent.EXTRA_INTENT,&contentSelectionIntent);
&&&&&&chooserIntent.putExtra(Intent.EXTRA_TITLE,&"Image&Chooser");
&&&&&&chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS,&intentArray);
&&&&&&startActivityForResult(chooserIntent,&INPUT_FILE_REQUEST_CODE);
&&&&&&return&
&&&//The&undocumented&magic&method&override
&&&//Eclipse&will&swear&at&you&if&you&try&to&put&@Override&here
&&&//&For&Android&3.0+
&&&public&void&openFileChooser(ValueCallback&Uri&&uploadMsg)&{
&&&&&&mUploadMessage&=&uploadM
&&&&&&Intent&i&=&new&Intent(Intent.ACTION_GET_CONTENT);
&&&&&&i.addCategory(Intent.CATEGORY_OPENABLE);
&&&&&&i.setType("image/*");
&&&&&&WebViewActivity.this.startActivityForResult(Intent.createChooser(i,&"Image&Chooser"),&FILECHOOSER_RESULTCODE);
&&&//&For&Android&3.0+
&&&public&void&openFileChooser(ValueCallback&uploadMsg,&String&acceptType)&{
&&&&&&mUploadMessage&=&uploadM
&&&&&&Intent&i&=&new&Intent(Intent.ACTION_GET_CONTENT);
&&&&&&i.addCategory(Intent.CATEGORY_OPENABLE);
&&&&&&i.setType("image/*");
&&&&&&WebViewActivity.this.startActivityForResult(
&&&&&&&&&&&&Intent.createChooser(i,&"Image&Chooser"),
&&&&&&&&&&&&FILECHOOSER_RESULTCODE);
&&&//For&Android&4.1
&&&public&void&openFileChooser(ValueCallback&Uri&&uploadMsg,&String&acceptType,&String&capture)&{
&&&&&&mUploadMessage&=&uploadM
&&&&&&Intent&i&=&new&Intent(Intent.ACTION_GET_CONTENT);
&&&&&&i.addCategory(Intent.CATEGORY_OPENABLE);
&&&&&&i.setType("image/*");
&&&&&&WebViewActivity.this.startActivityForResult(Intent.createChooser(i,&"Image&Chooser"),&WebViewActivity.FILECHOOSER_RESULTCODE);
};在onActivityResult中获取对应的选取文件的返回结果public&void&onActivityResult(int&requestCode,&int&resultCode,&Intent&data)&{
&&&if&(requestCode&==&FILECHOOSER_RESULTCODE)&{
&&&&&&if&(null&==&mUploadMessage)&
&&&&&&Uri&result&=&data&==&null&||&resultCode&!=&RESULT_OK&?&null
&&&&&&&&&&&&:&data.getData();
&&&&&&if&(result&!=&null)&{
&&&&&&&&&String&imagePath&=&ImageFilePath.getPath(this,&result);
&&&&&&&&&if&(!StrUtils.isEmpty(imagePath))&{
&&&&&&&&&&&&result&=&Uri.parse("file:///"&+&imagePath);
&&&&&&&&&}
&&&&&&mUploadMessage.onReceiveValue(result);
&&&&&&mUploadMessage&=&
&&&}&else&if&(requestCode&==&INPUT_FILE_REQUEST_CODE&&&&mFilePathCallback&!=&null)&{
&&&&&&//&5.0的回调
&&&&&&Uri[]&results&=&
&&&&&&//&Check&that&the&response&is&a&good&one
&&&&&&if&(resultCode&==&Activity.RESULT_OK)&{
&&&&&&&&&if&(data&==&null)&{
&&&&&&&&&&&&//&If&there&is&not&data,&then&we&may&have&taken&a&photo
&&&&&&&&&&&&if&(mCameraPhotoPath&!=&null)&{
&&&&&&&&&&&&&&&Logger.d("camera_photo_path",&mCameraPhotoPath);
&&&&&&&&&&&&&&&results&=&new&Uri[]{Uri.parse(mCameraPhotoPath)};
&&&&&&&&&&&&}
&&&&&&&&&}&else&{
&&&&&&&&&&&&String&dataString&=&data.getDataString();
&&&&&&&&&&&&Logger.d("camera_dataString",&dataString);
&&&&&&&&&&&&if&(dataString&!=&null)&{
&&&&&&&&&&&&&&&results&=&new&Uri[]{Uri.parse(dataString)};
&&&&&&&&&&&&}
&&&&&&&&&}
&&&&&&mFilePathCallback.onReceiveValue(results);
&&&&&&mFilePathCallback&=&
&&&}&else&{
&&&&&&super.onActivityResult(requestCode,&resultCode,&data);
}返回文件的解析,因为html页面需要的是文件,所以客户端需要返回的是对应文件的路径。这样,就会存在一个问题,在Android 4.4上,通过文件选择返回的结果都是对应以content开头格式的对应的路径。这就得需要咱们来进行判断,最终都需要转回成以file开头对应的格式文件。下面,我封装成了一个ImageFilePath的类,通过调用getPath方法来获取最终的结果。这个类的方法如下:/**
&*&Method&for&return&file&path&of&Gallery&image
&*&@param&context
&*&@param&uri
&*&@return&path&of&the&selected&image&file&from&gallery
public&static&String&getPath(final&Context&context,&final&Uri&uri)&{
&&&//&check&here&to&KITKAT&or&new&version
&&&final&boolean&isKitKat&=&Build.VERSION.SDK_INT&&=&Build.VERSION_CODES.KITKAT;
&&&//&DocumentProvider
&&&if&(isKitKat&&&&DocumentsContract.isDocumentUri(context,&uri))&{
&&&&&&//&ExternalStorageProvider
&&&&&&if&(isExternalStorageDocument(uri))&{
&&&&&&&&&final&String&docId&=&DocumentsContract.getDocumentId(uri);
&&&&&&&&&final&String[]&split&=&docId.split(":");
&&&&&&&&&final&String&type&=&split[0];
&&&&&&&&&if&("primary".equalsIgnoreCase(type))&{
&&&&&&&&&&&&return&Environment.getExternalStorageDirectory()&+&"/"
&&&&&&&&&&&&&&&&&&+&split[1];
&&&&&&&&&}
&&&&&&//&DownloadsProvider
&&&&&&else&if&(isDownloadsDocument(uri))&{
&&&&&&&&&final&String&id&=&DocumentsContract.getDocumentId(uri);
&&&&&&&&&final&Uri&contentUri&=&ContentUris.withAppendedId(
&&&&&&&&&&&&&&&Uri.parse("content://downloads/public_downloads"),
&&&&&&&&&&&&&&&Long.valueOf(id));
&&&&&&&&&return&getDataColumn(context,&contentUri,&null,&null);
&&&&&&//&MediaProvider
&&&&&&else&if&(isMediaDocument(uri))&{
&&&&&&&&&final&String&docId&=&DocumentsContract.getDocumentId(uri);
&&&&&&&&&final&String[]&split&=&docId.split(":");
&&&&&&&&&final&String&type&=&split[0];
&&&&&&&&&Uri&contentUri&=&
&&&&&&&&&if&("image".equals(type))&{
&&&&&&&&&&&&contentUri&=&MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
&&&&&&&&&}&else&if&("video".equals(type))&{
&&&&&&&&&&&&contentUri&=&MediaStore.Video.Media.EXTERNAL_CONTENT_URI;
&&&&&&&&&}&else&if&("audio".equals(type))&{
&&&&&&&&&&&&contentUri&=&MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
&&&&&&&&&}
&&&&&&&&&final&String&selection&=&"_id=?";
&&&&&&&&&final&String[]&selectionArgs&=&new&String[]&{&split[1]&};
&&&&&&&&&return&getDataColumn(context,&contentUri,&selection,
&&&&&&&&&&&&&&&selectionArgs);
&&&//&MediaStore&(and&general)
&&&else&if&("content".equalsIgnoreCase(uri.getScheme()))&{
&&&&&&//&Return&the&remote&address
&&&&&&if&(isGooglePhotosUri(uri))
&&&&&&&&&return&uri.getLastPathSegment();
&&&&&&return&getDataColumn(context,&uri,&null,&null);
&&&//&File
&&&else&if&("file".equalsIgnoreCase(uri.getScheme()))&{
&&&&&&return&uri.getPath();
&&&return&
&*&Get&the&value&of&the&data&column&for&this&Uri.&This&is&useful&for
&*&MediaStore&Uris,&and&other&file-based&ContentProviders.
&*&@param&context
&*&&&&&&&&&&&&The&context.
&*&@param&uri
&*&&&&&&&&&&&&The&Uri&to&query.
&*&@param&selection
&*&&&&&&&&&&&&(Optional)&Filter&used&in&the&query.
&*&@param&selectionArgs
&*&&&&&&&&&&&&(Optional)&Selection&arguments&used&in&the&query.
&*&@return&The&value&of&the&_data&column,&which&is&typically&a&file&path.
public&static&String&getDataColumn(Context&context,&Uri&uri,
&&&&&&&&&&&&&&&&&&&&&&&&&&&String&selection,&String[]&selectionArgs)&{
&&&Cursor&cursor&=&
&&&final&String&column&=&"_data";
&&&final&String[]&projection&=&{&column&};
&&&&&&cursor&=&context.getContentResolver().query(uri,&projection,
&&&&&&&&&&&&selection,&selectionArgs,&null);
&&&&&&if&(cursor&!=&null&&&&cursor.moveToFirst())&{
&&&&&&&&&final&int&index&=&cursor.getColumnIndexOrThrow(column);
&&&&&&&&&return&cursor.getString(index);
&&&}&finally&{
&&&&&&if&(cursor&!=&null)
&&&&&&&&&cursor.close();
&&&return&
&*&@param&uri
&*&&&&&&&&&&&&The&Uri&to&check.
&*&@return&Whether&the&Uri&authority&is&ExternalStorageProvider.
public&static&boolean&isExternalStorageDocument(Uri&uri)&{
&&&return&"com.android.externalstorage.documents".equals(uri
&&&&&&&&&.getAuthority());
&*&@param&uri
&*&&&&&&&&&&&&The&Uri&to&check.
&*&@return&Whether&the&Uri&authority&is&DownloadsProvider.
public&static&boolean&isDownloadsDocument(Uri&uri)&{
&&&return&"com.android.providers.downloads.documents".equals(uri
&&&&&&&&&.getAuthority());
&*&@param&uri
&*&&&&&&&&&&&&The&Uri&to&check.
&*&@return&Whether&the&Uri&authority&is&MediaProvider.
public&static&boolean&isMediaDocument(Uri&uri)&{
&&&return&"com.android.providers.media.documents".equals(uri
&&&&&&&&&.getAuthority());
&*&@param&uri
&*&&&&&&&&&&&&The&Uri&to&check.
&*&@return&Whether&the&Uri&authority&is&Google&Photos.
public&static&boolean&isGooglePhotosUri(Uri&uri)&{
&&&return&"com.google.android.apps.photos.content".equals(uri
&&&&&&&&&.getAuthority());
}文章来源:http://david-wei.github.io//Webview-%E6%94%AF%E6%8C%81-input-type-file/参考文章:参考资料:/delight-im/Android-AdvancedWebView/blob/ecff154ef390a0dbdb5337bd5deaf/Source/src/im/delight/android/webview/AdvancedWebView.java#L1011
了这篇文章
类别:┆阅读(0)┆评论(0)当前位置: >
手机如何实现拍照和上传图片?
09:48 来源/作者:懒人模板 分类: 
手机如何实现拍照和上传图片?
&input type=&file&&的accept 属性
&!-- 选择照片 --&
&input type=file accept=&image/*&&
&!-- 选择视频 --&
&input type=file accept=&video/*&&
ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋,可以用样式美化
* 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接!
猜你也喜欢看这些 ??????
这些是最新的 ??????
我们一直在进步
日 懒人模板官网论坛上线!
日 微信贺卡源码频道上线!
日 手机单页专题频道上线!
微信游戏源码频道上线!
05年3月10日 手机单页专题频道上线!
10月18日 懒人模板手机版正式上线!
8月21日 关键词“wap模板”首页排名前一!
8月17日 关键词“手机模板”首页排名前四!
08月12日 关键词“手机wap网站模板”首页排名第一!在手机网站内上传图片,使用inputtype=&file&的问题,不同手机浏览器效果不同。在手机端浏览器,测试opera、QQ、小米原生、安卓原生、iPhone原生、UC。(微信内
在手机网站内上传图片,使用 input type=&file& 的问题,不同手机浏览器效果不同。
在手机端浏览器,测试opera、QQ、小米原生、安卓原生、iPhone原生、UC。(微信内应该是调用默认浏览器内核。)
只有QQ、UC和iPhone的浏览器正常执行,我用的 jQuery-File-Upload ,QQ和iPhone可以多选,UC只能一张张的单选。
其他浏览器再选中文件后,会打开一个新页面,之前父页面会刷新。
之所以没用微信内置调用图片的,因为我要传的图比较多。
Bootstrap的富文本编辑器中的图片选择也是同样针对浏览器不同而使用。
这个有没有解决的办法?
文件选择这个是浏览器的行为,除非你自己设计浏览器,否则没法统一。
【云栖快讯】数据库技术天团集体亮相,分享一线生产实践经验,告诉你踩过的坑、走过的路,都是老司机,靠谱!干货分享,不可错过!&&
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率
稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验
开发者常用软件,超百款实用软件一站式提供Pages: 1/2
主题 : input type=“file”在iOS上调用,弹出的能改成中文吗
级别: 新手上路
可可豆: 40 CB
威望: 40 点
在线时间: 9(时)
发自: Web Page
来源于&&分类
input type=“file”在iOS上调用,弹出的能改成中文吗&&&
上传图片,调用照相机或者本地选图片显示是英文的,能否改成中文显示 
图片:7-4ADC-AB7A-13EEF4D11D9E.png
级别: 新手上路
可可豆: 31 CB
威望: 11 点
在线时间: 207(时)
发自: Web Page
请问能告诉我怎么调用的吗?我现在也在做类似的界面,但是一点调用相册就直接退出到上一级的VC
级别: 新手上路
UID: 521277
可可豆: 39 CB
威望: 30 点
在线时间: 155(时)
发自: Web Page
回 1楼(darkwing) 的帖子
问题解决了吗 我也遇到了类似的问题 能请教一下您吗
级别: 新手上路
可可豆: 31 CB
威望: 11 点
在线时间: 207(时)
发自: Web Page
回 2楼(小磨香油) 的帖子
我忘记了是什么原因造成的,好像是某个属性设置错误了。
级别: 新手上路
可可豆: 4 CB
威望: 4 点
在线时间: 106(时)
发自: Web Page
添加本地化 -& 中文 就可以了
级别: 新手上路
可可豆: 29 CB
威望: 29 点
在线时间: 71(时)
发自: Web Page
回 3楼(darkwing) 的帖子
具体是哪一个属性设置错误了,能说说看吗
级别: 侠客
可可豆: 124 CB
威望: 124 点
在线时间: 299(时)
发自: Web Page
这个地方是因为你的 本地设置是英文。才会弹出来英文的对话框。只要你把主要语言设置成英文就可以了
级别: 新手上路
可可豆: 29 CB
威望: 29 点
在线时间: 71(时)
发自: Web Page
我回答一下自己的提问吧,经过一个上午的调试总算发现了问题了。那是因为系统弹出alertview的时候我们的根控制器不是当前所在的控制器。所以会报如下的错误,UIImagePickerView不在当前视图层级中: 视图层级报错 所以要在登陆跳转时重新指定当前窗口的根控制器为tabBarController 根控制器设置
级别: 新手上路
可可豆: 29 CB
威望: 29 点
在线时间: 71(时)
发自: Web Page
然后如下图所示,就可以正常的进入到系统相册中去了
级别: 新手上路
可可豆: 31 CB
威望: 11 点
在线时间: 207(时)
发自: Web Page
回 5楼(眼中的窗) 的帖子
抱歉,现在才看到,但是时间太久了,我这边没找到代码,也不记得了。
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁?2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
我开始是使用的html5的input标签,我是这样写的:
&input type="file" accept="image/*" "capture=camera"&
坚果手机与魅族都可以掉照相机,小米没反应。而且,坚果上自带的浏览器与qq浏览器都是直接调照相机,不能调相机。
写成如下代码:
&input type="file" accept="image/*"&
在坚果上,无论什么浏览器都可以调用相机与相册了,但是在其他的手机上仍有兼容问题。
请问,这一句input有兼容性非常好的写法吗?
请问使用js如何调用手机的相机与相册?(微信接口的话说不需要再说了)
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
我们都是通过jsbridge原生来实现的
分享到微博?
Hi,欢迎来到 SegmentFault 技术社区!⊙▽⊙ 在这里,你可以提出编程相关的疑惑,关注感兴趣的问题,对认可的回答投赞同票;大家会帮你解决编程的问题,和你探讨技术更新,为你的回答投上赞同票。
明天提醒我
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:

我要回帖

更多关于 input type file 美化 的文章

 

随机推荐