增加相机插件 cordova plugin add cordova-plugin-camera (如果删除add改为remove )
增加文件上传插件 cordova plugin add cordova-plugin-file-transfer
1<!DOCTYPE html> 2<html> 3 4<head> 5 <title>take Photo</title> 6 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 7 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 8 <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 9 <script type="text/javascript" charset="utf-8"> 10 document.addEventListener("deviceready", onDeviceReady, false); 11 12 //Cordova加载完成会触发 13 function onDeviceReady() { 14 15 document.getElementById("phonebutton").addEventListener("click", function() { 16 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { 17 quality: 80, 18 sourceType: Camera.PictureSourceType.CAMERA, 19 destinationType: Camera.DestinationType.FILE_URI, 20 targetWidth: 520, 21 targetHeight: 520 22 }); 23 }); 24 //拍照成功 25 function onPhotoDataSuccess(imageUri) { 26 var smallImage = document.getElementById('smallImage'); 27 smallImage.style.display = 'block'; 28 smallImage.src = imageUri; 29 upLoadImg(imageUri) 30 } 31 32 //拍照失败 33 function onFail(message) { 34 alert('拍照失败: ' + message); 35 } 36 37 } 38 // file-Transfer插件,上传图片文件 39 function upLoadImg(imageURI){ 40 //alert("ok"); 41 var options = new FileUploadOptions(); 42 //options.chunkedMode = false; 43 options.fileKey = "file"; 44 options.fileName = imageURI.substring(imageURI.lastIndexOf('/')+1); 45 options.mimeType = "image/jpeg"; 46 options.httpMethod = "POST"; 47 // console.log("options======="); 48 // console.log(options); 49 50 var fileTransfer = new FileTransfer(); 51 var successCallback = function(r){ 52 alert("Code = " + r.responseCode); 53 alert("Response = " + r.response); 54 alert("Sent = " + r.bytesSent); 55 } 56 var errorCallback = function (error) { 57 alert("An error has occurred: Code = " + error.code); 58 alert("upload error source " + error.source); 59 alert("upload error target " + error.target); 60 } 61 fileTransfer.upload( 62 imageURI, //本地文件路径 63 encodeURI("http://192.168.1.199/uploaddemo/upload.php"), //服务器上传的路径 64 successCallback, //成功的回调 65 errorCallback, //失败的回调 66 options); //配置项 67 } 68 </script> 69</head> 70 71<body style="padding-top:50px"> 72 <button id="phonebutton" style="font-size:23px;">take a picture13</button> 73 <br> 74 <img style="display:none;width:260px;height:260px;" id="smallImage" src="" /> 75</body> 76<!-- 关于拍摄图片的大小 如果设置targetWidth: 520, targetHeight: 520,最终拍摄的图片依然是长方形,只会把最大的设置为520px,另一个按比例显示,如最终的图片是(390*520px) --> 77</html>
后台使用wamp集成包
1<?php 2// 允许上传的图片后缀 3header("Content-type: text/html; charset=utf-8"); 4$allowedExts = array("gif", "jpeg", "jpg", "png"); 5$temp = explode(".", $_FILES["file"]["name"]); 6echo $_FILES["file"]["size"]; 7$extension = end($temp); // 获取文件后缀名 8if ((($_FILES["file"]["type"] == "image/gif") 9|| ($_FILES["file"]["type"] == "image/jpeg") 10|| ($_FILES["file"]["type"] == "image/jpg") 11|| ($_FILES["file"]["type"] == "image/pjpeg") 12|| ($_FILES["file"]["type"] == "image/x-png") 13|| ($_FILES["file"]["type"] == "image/png")) 14&& ($_FILES["file"]["size"] < 204800) // 小于 200 kb 15&& in_array($extension, $allowedExts)) 16{ 17 if ($_FILES["file"]["error"] > 0) 18 { 19 echo "错误:: " . $_FILES["file"]["error"] . "<br>"; 20 } 21 else 22 { 23 echo "上传文件名: " . $_FILES["file"]["name"] . "<br>"; 24 echo "文件类型: " . $_FILES["file"]["type"] . "<br>"; 25 echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; 26 echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>"; 27 28 // 判断当期目录下的 upload 目录是否存在该文件 29 // 如果没有 upload 目录,你需要创建它,upload 目录权限为 777 30 if (file_exists("upload/" . $_FILES["file"]["name"])) 31 { 32 echo $_FILES["file"]["name"] . " 文件已经存在。 "; 33 } 34 else 35 { 36 // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下 37 $name=iconv("UTF-8", "gbk",$_FILES["file"]["name"]); 38 move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $name); 39 echo "文件存储在: " . "upload/" . $_FILES["file"]["name"]; 40 } 41 } 42} 43else 44{ 45 echo "非法的文件格式"; 46} 47//在使用move_uploaded_file时,路径upload/,一定要先建立upload的文件夹,否则出错 48?>
(1)打包总是出错,按下面解决方法ok
Open plugins/cordova-plugin-barcode-scanner/plugin.xml and delete all records xmlns:android=""
Open platforms/android/android.json and delete all xmlns:android=\"\"
Do the same in platforms/android/AndroidManifest.xml
(2)alert scanning failed:write settings:false,把targetSdkVersion从原来的25改成22
<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="22" />