手机拍照 录像 上传

    坚持发文章也是件难事，今天快下班了，抽出点时间，再发点东西。利人利己。 主要发前端代码，后端比较好写。                js代码：     

 // 扩展API加载完毕后调用onPlusReady回调函数 

document.addEventListener("plusready", onPlusReady, false);
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() {
console.log("plusready");
}
var cmr = null;
var dataURL = null;
var resourcess = null;
function upup(filepath) {
var task = plus.uploader.createUpload(
url, {},
function(t, status) {
// 上传完成
if (status == 200) {
resourcess += ","+t.ress;
alert(JSON.stringify(t.ress));
alert("视频上传成功！");
} else {
alert("视频上传失败！");
}
});

task.addFile(filepath, {
key : 'fileUpload'
});
task.start();
}

function fileChange2(that) {
var file_path = that.files[0];
upup(file_path);
}
// 录像
function videoCapture() {
cmr = new plus.camera.getCamera();
var res = cmr.supportedVideoResolutions[0];
var fmt = cmr.supportedVideoFormats[0];
var filepath = "";
console.log("Resolution: " + res + ", Format: " + fmt);
cmr.startVideoCapture(function(path) {
new plus.io.resolveLocalFileSystemURL(path,
function(entry) {
filepath = entry.toLocalURL();
upup(filepath);
}, function(e) {
outLine("读取视频文件错误：" + e.message);
});


}, function(error) {
alert("录像失败信息: " + error.message);
}, {
resolution : res,
format : fmt
});
// 拍摄10s后自动关闭 
setTimeout(stopCapture, 10000);
}
// 停止录像
function stopCapture() {
console.log("stopCapture");
cmr.stopVideoCapture();
}


var imgid = "";
//上传弹窗
function captureImagell(file_path, filepath) {
$("#picture").hide();

if (filepath == "") {
return;
}
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length)
.toUpperCase();
if (".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(
ext.toUpperCase()) == -1) {
alert("只允许上传jpg、png、bmp、jpeg格式的图片");
return false;
}
//以图片宽度为800进行压缩  
lrz(file_path, {
width : 800
}).then(function(rst) {
//imgHead.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + filepath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
//imgHead.src = rst;
//压缩后异步上传  
$.ajax({
url : url ,
type : "POST",
data : {
imgdata : rst.base64

//压缩后的base值  
},
dataType : "json",
cache : false,
async : false,
success : function(data) {
if (data.success) {
alert(JSON.stringify(data));///data.message为上传成功后的文件路径  
imgid = data.data.id;
resourcess +=","+record;
alert(imgid);
$("#imghead").attr('src', rst.base64);


} else {
alert(data.success);///data.message为上传失败原因  
}


},
error : function() {
alert("上传失败");
}
});
});
}
function fileChange(that) {
var filepath = $(that).val();
var file_path = that.files[0];
captureImagell(file_path, filepath);
}
// 拍照
function captureImage() {
var cmr = new plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
var file_path = "";
console.log("Resolution: " + res + ", Format: " + fmt);
var filepath = null;


cmr.captureImage(function(path) {
filepath = path.split("/")[1];
plus.io.resolveLocalFileSystemURL(path, function(entry) {
file_path = entry.toLocalURL();
captureImagell(file_path, filepath);
}, function(e) {
outLine("读取拍照文件错误：" + e.message);
});
}, function(error) {
alert("Capture image failed: " + error.message);
}, {
resolution : res,
format : fmt
});

}

html 主要代码：

                              <div>
对设备拍照上传照片： <img id="imghead" src="img/wo.png"
style="width: 100px; height: 100px;" />
<a href="#picture"
class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
style="padding: 5px 20px;">上传</a>
</div>

                                   <div>
现在录象： <a href="#picture2"
class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
style="padding: 5px 20px;">开始录制</a>
</div>

。。。

<div id="picture"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a οnclick="captureImage()">拍照</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" οnclick="selectFile()">相册</a> <input
class="hidden" type="file" accept="image/*" capture="camera"
οnchange="fileChange(this)" id="payfile" name="myfile"
data-role="none"></input>

</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture2"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a οnclick="videoCapture()">录制</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" οnclick="selectFile2()">从媒体库中选择</a>
<input class="hidden" type="file" accept="video/*"
capture="camcorder" οnchange="fileChange2(this)" id="payfile2"
name="myfile2" data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>

。。。

<div class="footer">
<div id="picture"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a οnclick="captureImage()">拍照</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" οnclick="selectFile()">相册</a> <input
class="hidden" type="file" accept="image/*" capture="camera"
οnchange="fileChange(this)" id="payfile" name="myfile"
data-role="none"></input>

</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture2"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a οnclick="videoCapture()">录制</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" οnclick="selectFile2()">从媒体库中选择</a>
<input class="hidden" type="file" accept="video/*"
capture="camcorder" οnchange="fileChange2(this)" id="payfile2"
name="myfile2" data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
</div>

快下班了，就弄到这里吧！！！