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/tmp
                sudo chmod 777 /Users/appleuser/workspace/php/uploads
            */

            move_uploaded_file($file["tmp_name"], "../uploads/{$file["name"]}");
        }
    }
?>
</pre>