HTML5 結合手機相機將相片儲存到後台

edited 四月 2016 in Javascript
我的程式如下:
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= \"?\" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST[\"MM_insert\"])) && ($_POST[\"MM_insert\"] == \"form1\")) {

$insertSQL = sprintf(\"INSERT INTO data_set (d_class ,d_name, d_phone, d_email, d_zip, d_city, d_canton, d_address ,d_content, d_date, d_active,d_sort) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)\",
GetSQLValueString($_POST['d_class'], \"text\"),
GetSQLValueString($_POST['d_name'], \"text\"),
GetSQLValueString($_POST['d_phone'], \"text\"),
GetSQLValueString($_POST['d_email'], \"text\"),
GetSQLValueString($_POST['d_zip'], \"text\"),
GetSQLValueString($_POST['d_city'], \"text\"),
GetSQLValueString($_POST['d_canton'], \"text\"),
GetSQLValueString($_POST['d_address'], \"text\"),
GetSQLValueString($_POST['d_content'], \"text\"),
GetSQLValueString($_POST['d_date'], \"date\"),
GetSQLValueString($_POST['d_active'], \"int\"),
GetSQLValueString($_POST['d_sort'], \"int\"));

mysql_select_db($database_connect2data, $connect2data);
$Result1 = mysql_query($insertSQL, $connect2data) or die(mysql_error());
$nid = mysql_insert_id();
$sn = base64_encode($nid);


$upload_dir = \"upload_image/\";
$img = $_POST['okimg'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . $nid . '.png';
file_put_contents($file, $data);


$insertGoTo = \"p01ok.php?d_id=$sn\";

header(sprintf(\"Location: %s\", $insertGoTo));
}
?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>TEST</title>
</head>

<body onload=\"MM_preloadImages('images/n-p02a.jpg','images/n-p01a.jpg')\">
<table width=\"1138\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">
<td><form id=\"form1\" name=\"form1\" method=\"POST\" action=\"<?php echo $editFormAction; ?>\">
<table width=\"1000\" align=\"center\">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><table width=\"70%\" align=\"center\" cellpadding=\"6\" cellspacing=\"6\">
<tr>
<td nowrap colspan=\"2\" align=\"center\"><img src=\"images/n-p02.jpg\" alt=\"\" width=\"179\" height=\"83\" id=\"upfile\" style=\"cursor:pointer\"><input type=\"file\" id=\"image\" name=\"image\" class=\"atxt10\" accept=\"image/*\" capture style=\"display:none\">
<canvas id=\"okimg\"></canvas>
<script>
$(\"#upfile\").click(function () {
$(\"#image\").trigger('click');
});

var input = document.querySelector('input[type=file]'); // see Example 4

input.onchange = function () {
var file = input.files[0];

drawOnCanvas(file); // see Example 6
displayAsImage(file); // see Example 7
};

function drawOnCanvas(file) {

var reader = new FileReader();

reader.onload = function(e) {

var dataURL = e.target.result,

canvas = document.querySelector('canvas'),

ctx = canvas.getContext('2d'),

img = new Image();

img.onload = function() {

var square = 390;

canvas.width = square;

canvas.height = square;

var context = canvas.getContext('2d');

context.clearRect(0, 0, square, square);

var imageWidth;

var imageHeight;

var offsetX = 0;

var offsetY = 0;

if (this.width > this.height) {

imageWidth = Math.round(square * this.width / this.height);

imageHeight = square;

offsetX = -Math.round((imageWidth - square) / 2);

} else {

imageHeight = Math.round(square * this.height / this.width);

imageWidth = square;

offsetY = -Math.round((imageHeight - square) / 2);

}

context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);


};

img.src = dataURL;
alert(dataURL);



};

reader.readAsDataURL(file);

}

</script>
</td>
</tr>
<tr>
<td width=\"11%\" nowrap=\"nowrap\">姓名:</td>
<td width=\"89%\"><input name=\"d_name\" type=\"text\" class=\"atxt28\" id=\"d_name\" value=\"\" size=\"40\" /></td>
</tr>
<tr>
<td nowrap=\"nowrap\">電話:</td>
<td><input name=\"d_phone\" type=\"text\" class=\"atxt28\" id=\"d_phone\" value=\"\" size=\"40\" /></td>
</tr>
<tr>
<td nowrap=\"nowrap\">Email:</td>
<td><input name=\"d_email\" type=\"text\" class=\"atxt28\" id=\"d_email\" value=\"\" size=\"40\" /></td>
</tr>
</table></td>
<input name=\"d_class\" type=\"hidden\" id=\"d_class\" value=\"News\" /><input name=\"d_active\" type=\"hidden\" value=\"0\" /><input name=\"d_date\" type=\"hidden\" value=\"<?php echo date('Y-m-d H:i:s'); ?>\" />
<input type=\"hidden\" name=\"MM_insert\" value=\"form1\" />
</form><!-- InstanceEndEditable --></td>
</table></td>
</tr>
</table>
</body>



$img = $_POST['okimg']; 值為空值...所產生的圖片檔為0
請教各位高手
是那邊有錯嗎?
謝謝
標籤:

評論

  • 圖片是要用上傳的吧?
    去找看看 PHP 上傳檔案的範例吧

    1. 注意 FORM 的enctype="multipart/form-data"
    2. 注意 PHP 的 $_FILES
Sign In or Register to comment.