HTML 页面内容包含以下标签即可:

                   <input id="btn_select" type="button"  value="从相册选择" />
<input id="btn_takephoto" type="button" value="拍照" />
<img id="imgViewer" src="" alt="暂无图片" width="100" height="100"/>
<input id="btn_save" type="button" value="确认上传" />

JS实现部分:

(function() {
var url = "XXXXXXXXXX上传的文件地址"; var file;
var w = null;
// H5 plus事件处理
function plusReady() { //w=plus.nativeUI.showWaiting();
//H5 准备好的时候 绑定拍照事件 //拍照单机事件
$("#btn_takephoto").bind("click", function() {
//拍照
plus.camera.getCamera().captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
console.log(entry.toLocalURL());
$("#imgViewer").attr("src", entry.toLocalURL());
}, function(e) {
outLine("读取拍照文件错误:" + e.message);
}); });
}); //从相册选择
$("#btn_select").bind("click", function() {
plus.gallery.pick(function(p) {
console.log(p);
$("#imgViewer").attr("src", p);
});
}); //上传文件
$("#btn_save").bind("click", function() {
var wt = plus.nativeUI.showWaiting();
//根据路径读取到文件
plus.io.resolveLocalFileSystemURL($("#imgViewer").attr("src"),function(entry){
entry.file( function(file){
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file); fileReader.onloadend = function(e) {
var f = $("#imgViewer").attr("src");
var filename = f.replace(f.substring(0, f.lastIndexOf('/') + 1), '');
var param = {
fileName: filename
dataInput: e.target.result.toString()
};
//自定义的ajax方法
ToolHelper.AsyncAjax(url, param, function(data, para) {
wt.close();
if (data[0].responseCode != undefined && data[0].responseCode != "") {
$.dialog.alert(data[0].responseMessage);
} else {
$.dialog.alert("上传成功");
}
});
} });
}); });
}
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
} return BaseObj = {
save: saveEdit
};
})();

JavaScript

以上两个部分 用到了 dcloud html+中的  相机相关事件和方法,以及IO 根据地址 获取文件流的方法,上传到服务器的图片为base64,因此如果服务器需要保存图片 需要解码。

HTML5+ 拍照上传 和选择文件上传的更多相关文章

  1. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  2. 《如何将windows上的软件包或文件上传到linux服务上》

    昨天晚上朋友让我帮他简单的搭建个环境,他公司让他做款软件测试温度的,他自己搞的是嵌入式,在公司担任的是软件工程师,应届毕业生.也可能他们搞嵌入式的对这个linux系统不太熟,不会把windows上的软 ...

  3. SpringMVC单文件上传、多文件上传、文件列表显示、文件下载(转)

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 本文工程 ...

  4. SpringBoot - 实现文件上传1(单文件上传、常用上传参数配置)

    Spring Boot 对文件上传做了简化,基本做到了零配置,我们只需要在项目中添加 spring-boot-starter-web 依赖即可. 一.单文件上传 1,代码编写 (1)首先在 stati ...

  5. 基于SqlSugar的开发框架循序渐进介绍(7)-- 在文件上传模块中采用选项模式【Options】处理常规上传和FTP文件上传

    在基于SqlSugar的开发框架的服务层中处理文件上传的时候,我们一般有两种处理方式,一种是常规的把文件存储在本地文件系统中,一种是通过FTP方式存储到指定的FTP服务器上.这种处理应该由程序进行配置 ...

  6. skymvc文件上传支持多文件上传

    skymvc文件上传支持多文件上传 支持单文件.多文件上传 可以设定 文件大小.存储目录.文件类型 //上传的文件目录 $this->upload->uploaddir="att ...

  7. yii2.0单文件上传和多文件上传

    yii2文件上传使用到yii2自带的文件上传类UploadFIle,以及对应的模型规则,这里分别介绍单文件上传和多文件上传: yii2单个文件上传: 上传步奏,先创建上传表单模型model(包含验证规 ...

  8. 使用PHP实现文件上传和多文件上传

    PHP 2013 年 9 月 4 日 暂无评论 在PHP程序开发中,文件上传是一个使用非常普遍的功能,也是PHP程序员的必备技能之一.值得高兴的是,在PHP中实现文件上传功能要比在Java.C#等语言 ...

  9. HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

    这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...

随机推荐

  1. Maven中的DependencyManagement和Dependencies

    Maven 使用dependencyManagement 元素来提供了一种管理依赖版本号的方式.通常会在一个组织或者项目的最顶层的父POM 中看到dependencyManagement 元素.使用p ...

  2. WebService开发

    一.什么是WebService: 简单通俗来说,就是企业之间.网站之间通过Internet来访问并使用在线服务,一些数据,由于安全性问题,不能提供数据库给其他单位使用,这时候可以使   用WebSer ...

  3. C++语法-指针 (1)

    <C++程序设计> 谭浩强  清华大学出版社 2016-08-03 1.P167 一般的C++编译系统为每个指针变量分配4个字节的存储单元,用来存放变量的地址. 2.P169 .cpp文件 ...

  4. JavaScript的面向对象编程(OOP)(二)——原型

    关于JavaScript的原型模式,下面的是学习后的个人理解,若是有偏差,还请指出,谢谢 JavaScript原型模式 1.什么是原型? 原型是一个对象,其他的对象可以通过它实现属性的继承,所有的对象 ...

  5. python中enumerate()的用法

    先出一个题目:1.有一 list= [1, 2, 3, 4, 5, 6]  请打印输出:0, 1 1, 2 2, 3 3, 4 4, 5 5, 6 打印输出, 2.将 list 倒序成 [6, 5, ...

  6. [转载]Bison-Flex 笔记

    FLEX 什么是FLEX?它是一个自动化工具,可以按照定义好的规则自动生成一个C函数yylex(),也成为扫描器(Scanner).这个C函数把文本串作为输入,按照定义好的规则分析文本串中的字符,找到 ...

  7. MySQL5.5绿色版1067

    mysql的绿色安装版,按照很多文章进行配置,会出现 配置文件里面添加了 [client] default-character-set=utf8 [mysqld] default-character- ...

  8. Andriod SDK Manager 安装问题解决方法

    (一)AndriodSDKManager无法自动下载安装包 无法访问dl-ssl-google.com 只需在hosts文件中增加 203.208.49.162       dl-ssl.google ...

  9. 管理分支:git branch

    新建分支的意义: 创建一个单独的工作分支,避免对主分支master造成太多的干扰,也方便与他们交流协作. 进行高风险的工作时,创建一个实验性的分支,扔掉一个烂摊子总比收拾一个烂摊子好得多. 合并别人工 ...

  10. TCP、UDP、RTP(RTCP)异同与区别

    OSI七层模型OSI 中的层            功能                                                        TCP/IP协议族 应 用层   ...