php中图片文件上传，显示缩略图

htm代码块：

<meta charset="utf-8" /><style>img {max-width: 100px;max-height: 100px;}input[type="file"] {display: none;}</style><script>function showImage(file, targetId) {var uploadFile = file.files[0];console.log(uploadFile.name);console.log((uploadFile.size / 1024).toFixed(2) + "K");console.log(/(\.jpg|\.jpeg|\.png|\.gif)$/i.test(uploadFile.name));console.log(/\.jpg$|\.jpeg$|\.png$|\.gif$/i.test(uploadFile.name));document.getElementById(targetId).src = window.URL.createObjectURL(uploadFile);}</script><!--文件上传：1、method="post"2、enctype="multipart/form-data"--><form action="upload.php" method="post" enctype="multipart/form-data">File1: <input type="file" id="file1" name="file1" onchange="showImage(this, 'img1')" accept=".gif, .jpg, .jpeg, .png" /><label for="file1"><img id="img1" src="/images/blank.gif" /></label><br />File2: <input type="file" id="file2" name="file2" onchange="showImage(this, 'img2')" accept=".gif, .jpg, .jpeg, .png" /><label for="file2"><img id="img2" src="/images/blank.gif" /></label><br />File3: <input type="file" id="file3" name="file3" onchange="showImage(this, 'img3')" accept=".gif, .jpg, .jpeg, .png" /><label for="file3"><img id="img3" src="/images/blank.gif" /></label><br /><button>Upload</button></form>

php代码块：

<pre><?php// print_r($_FILES);foreach ($_FILES as $file) {// 判断文件上传组件是否有效if ($file["name"]) {echo "{$file["name"]}<br />";echo "{$file["tmp_name"]}<br />";echo "{$file["type"]}<br />";echo "{$file["size"]}<hr />";// 文件被服务器上传到临时保存目录：$file["tmp_name"]// 这个文件一旦被页面接收，就会自动保存到该路径下，等页面响应完毕，该临时文件就被移除了/*注意：在MacOS中，必须要授予相应目录的操作权限！sudo chmod 777 /private/var/tmpsudo chmod 777 /Users/appleuser/workspace/php/uploads*/move_uploaded_file($file["tmp_name"], "../uploads/{$file["name"]}");}}?></pre>