今天來整理一下利用 input 的 type="file" 的功能操作
HTML HEAD (index.html)
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="icon" href="multicore_logo.ico" sizes="32x32">
<!-- keep the line below for OpenProcessing compatibility -->
<script src="https://openprocessing.org/openprocessing_sketch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.3.7/mqtt.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap">
<script src="mySketch.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
HTML BODY(index.html)
<body>
<div id="d1">
<form id="fr1" action="upload_pic.php" method="post" enctype="multipart/form-data" target="ff1">
<input id="file1" type="file" name="file1"><br><br>
<input id="sb1" type="submit" value="圖片上傳" name="submit">
</form>
<div>
<img id="imgx" src="" width="300px">
</div>
<iframe src="" name="ff1" id="ff1"></iframe>
<div id="upx">
<h3>上傳中！</h3>
</div>
<div id="upx_OK">
<div>
<h3>上傳成功!!</h3>
<button id="btn1" onclick="up3()">確定</button>
</div>
</div>
</div>
</body>
CSS (style.css)
#d1 {
margin:10px;
}
#file1 {
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
#imgx {
margin:10px;
}
#ff1 {
border:0px;
display:none;
}
#upx {
display:none;
background: rgba(50, 50, 50, 0.7);
color: white;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
z-index: 10;
height:100vh;
width: 100vw;
}
#upx_OK {
display:none;
background: rgba(50, 50, 50, 0.7);
color: white;
position: fixed;
top: 0px;
left: 0px;
text-align: center;
z-index: 10;
height:100vh;
width: 100vw;
}
JS (mySketch.js)
let can;
function setup() {
noCanvas();
noLoop();
}
function up1(){
let fname = select("#file1");
console.log(fname.value());
if(fname.value().length >= 5){
let upx = select("#upx");
upx.style("display", "flex");
upx.style("justifyContent", "center");
upx.style("alignItems", "center");
} else {
alert("尚未選擇檔案！");
}
}
function up2(n){
let imgx = select("#imgx");
imgx.attribute("src", n);
let upx = select("#upx");
upx.style("display", "none");
let upx1 = select("#upx_OK");
upx1.style("display", "flex");
upx1.style("justifyContent", "center");
upx1.style("alignItems", "center");
}
function up3(){
let upx = select("#upx");
upx.style("display", "none");
let upx1 = select("#upx_OK");
upx1.style("display", "none");
}
PHP (upload_pic.php)
date_default_timezone_set("Asia/Taipei");
if(isset($_FILES['file1'])){
$errors = array();
$file_name = $_FILES['file1']['name'];
$file_size =$_FILES['file1']['size'];
$file_tmp = $_FILES['file1']['tmp_name'];
$file_type = $_FILES['file1']['type'];
$t = time();
$t1 = date("Y-m-d-H-i-s",$t);
$s1 = explode('.', $file_name);
$s2 = end($s1);
$file_ext = strtolower($s2);
$extensions = array("jpeg", "jpg", "png");
if(in_array($file_ext, $extensions)=== false){
$errors[] = "extension not allowed, please choose a JPEG or PNG file.";
}
if($file_size > 10485760){ //--- 10x1024x1024 = 10485760
$errors[] = "File size must be excately 10 MB";
}
if(empty($errors)==true){
echo $file_name." ... ";
if (move_uploaded_file($file_tmp, "pic_original/".$t1.".".$file_ext)) {
echo "move OK <br>";
// specifying the image
$image_filename = "pic_original/".$t1.".".$file_ext;
// get source image size
list($w, $h) = getimagesize($image_filename);
echo $w.", ".$h."<br>";
// specifying the required thumbnail size
//$new_width = 640;
//$new_height = 400;
$new_width = (int)(100);
$new_height = (int)(100*$h/$w);
// creating a black picture
$dst = imagecreatetruecolor($new_width, $new_height);
// saving the image in your current folder
if(strcmp($file_ext,"png")==0){ //-- for png image
// loading the source image
echo $image_filename."<br>";
$src = imagecreatefrompng($image_filename);
if($src!=null){
// copy image from $src to $dst
imagecopyresampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
$save = imagepng($dst, "pic_small/".$t1.".".$file_ext);
}
} else if(strcmp($file_ext,"jpeg")==0 || strcmp($file_ext,"jpg")==0){ //-- for jpg image
// loading the source image
$src = imagecreatefromjpeg($image_filename);
if($src!=null){
// copy image from $src to $dst
imagecopyresampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
$save = imagejpeg($dst, "pic_small/".$t1.".".$file_ext);
}
}
echo $save."<br>";
if($save){
echo "The resized image has been saved!<br>";
} else {
echo "There was an error in saving the resized image.";
}
}
echo "Success<br>";
echo "<script> top.up2('pic_small/".$t1.".".$file_ext."');</script>";
} else {
echo "<script> alert('請選擇圖片檔案！( JPEG 或 PNG 檔案)'); top.up3();</script>";
}
}
/Applications/XAMPP/xamppfiles/etc/php.ini
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;
; Whether to allow HTTP file uploads.
; http://php.net/file-uploads
file_uploads=On
; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
; http://php.net/upload-tmp-dir
upload_tmp_dir="/Applications/XAMPP/xamppfiles/temp/"
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize=40M
; Maximum number of files that can be uploaded via a single request
max_file_uploads=20
需要注意的是，如果是使用XAMPP的話，還要將儲存上傳檔案的目錄(像是 pic_original，pic_small)權限開放，才能將檔案儲存起來。
chmod -R 777 pic_small
chmod -R 777 pic_original
相關發文
D39_網頁Canvas上傳存檔與錄影記錄的操作
https://ithelp.ithome.com.tw/articles/10309218
iThome鐵人賽
看影片追技術