HTML5+APP 拍照壓縮上傳

時間 2019-12-07

原文原文鏈接

<!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.phpjavascript

<?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+拍照與壓縮插件php

在拍照成功後會返回圖片保存的路徑，如上面的p參數，在壓縮圖片時要用到p，overwrite: true不能省略。css