HTML5+APP 拍照压缩上传 原
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<script type="text/javascript">
var server = "http://192.168.1.199/uploaddemo/uploadmore.php";
var files = [];
// 上传文件
function upload() {
if(files.length <= 0) {
plus.nativeUI.alert("没有添加上传文件！");
return;
}
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload(server, {
method: "POST"
},
function(t, status) { //上传完成
if(status == 200) {
alert("上传成功")
console.log(t.url) //http://192.168.1.199/uploaddemo/uploadmore.php
wt.close();
} else {
alert("fail")
wt.close();
}
}
);
task.addData("client", "HelloH5+");
task.addData("uid", getUid());
for(var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.path, {
key: f.name
});
}
task.start();
};
// 拍照添加文件
function appendByCamera() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
alert(p)//p:_doc/1519.jpg
compress(p);
appendFile(p);
});
}
// 从相册添加文件
function appendByGallery() {
plus.gallery.pick(function(p) {
compress(p);
appendFile(p);
});
}
//压缩图片
function compress(p) {
console.log(p)
plus.zip.compressImage({
src: p,
dst: p,
width: "50%", // 缩小到原来的一半
overwrite: true
},
function() {
alert("Compress success!");
},
function(error) {
console.log("Compress error!" + error);
});
}
// 添加文件
var index = 1;
function appendFile(p) {
var fe = document.getElementById("files");
var li = document.createElement("li");
var n = p.substr(p.lastIndexOf('/') + 1);
li.innerText = n;
fe.appendChild(li);
files.push({
name: "uploadkey" + index,
path: p
});
index++;
empty.style.display = "none";
}
// 产生一个随机数
function getUid() {
return Math.floor(Math.random() * 100000000 + 10000000).toString();
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
</head>
<body>
<header id="header">
<div class="nvbt iback" onclick="back()"></div>
<div class="nvtt">Uploader</div>
<div class="nvbt idoc" onclick="openDoc('Uploader Document','/doc/uploader.html')"></div>
</header>
<div id="dcontent" class="dcontent">
<br/>
<p class="heading">上传文件列表：</p>
<ul id="files" style="text-align:left;">
<p id="empty" style="font-size:12px;color:#C6C6C6;">无上传文件</p>
</ul>
<table style="width:100%;">
<tbody>
<tr>
<td style="width:40%">
<div class="button button-select" onclick="appendByCamera()">拍照</div>
</td>
<td style="width:40%">
<div class="button button-select" onclick="appendByGallery()">相册选取</div>
</td>
</tr>
</tbody>
</table>
<br/>
<div class="button" onclick="upload()">上 传</div>
<br/>
</div>
</body>
</html>后台php代码uploadmore.php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$ret=array('strings'=>$_POST,'error'=>'0');
$fs=array();
foreach ( $_FILES as $name=>$file ) {
$fn=$file['name'];
$ft=strrpos($fn,'.',0);
$fm=substr($fn,0,$ft);
$fe=substr($fn,$ft);
$fp='upload/'.$fn;
$fi=1;
while( file_exists($fp) ) {
$fn=$fm.'['.$fi.']'.$fe;
$fp='files/'.$fn;
$fi++;
}
move_uploaded_file($file['tmp_name'],$fp);
$fs[$name]=array('name'=>$fn,'url'=>$fp,'type'=>$file['type'],'size'=>$file['size']);
}
$ret['files']=$fs;
echo json_encode($ret);
}else{
echo "{'error':'Unsupport GET request!'}";
}
?>主要用到html5+拍照与压缩插件
在拍照成功后会返回图片保存的路径，如上面的p参数，在压缩图片时要用到p，overwrite: true不能省略。
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/02/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读