localResizeIMG圖片壓縮上傳

時間 2019-12-06

標籤 localresizeimg 圖片壓縮上傳简体版

原文原文鏈接

完整的先後端圖片壓縮上傳，後臺語言php javascript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>文件api</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
    #previewImgDiv {
        width: 200px;
        height: 200px;
        display: table-cell;
        background: #f2f2f2;
        border: 1px solid #ccc;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
        margin-bottom: 20px;
    }

    #previewImgDiv img {
        max-width: 100%;
        max-height: 100%;
    }
    </style>
</head>

<body style="padding:20px;">
    <div id="test-file-info"></div>
    <div id="previewImgDiv">圖片預覽</div>
    <div class="file-input" style="margin-top:20px;">
        <label for="xFile" class="btn btn-primary">選擇圖片</label>
        <button id="upload" class="btn btn-success">上傳圖片</button>
        <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">
        <!-- clip 是對絕對定位進行裁剪，其他的地方默認隱藏rect(top,right,bottom,left),rect的參數都是距離左邊或者上邊的距離，如top遇bottom是距離位裁剪前上面的距離，left與right距離左邊的距離 -->
    </div>
    <div></div>
</body>
<script src="../jQuery/jQuery-2.1.4.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="dist/lrz.bundle.js"></script>
<script type="text/javascript">
var data;
document.querySelector('input').addEventListener('change', function() {
    // this.files[0] 是用戶選擇的文件
    lrz(this.files[0], { width: 500 })
        .then(function(rst) {

            // 把處理的好的圖片給用戶看看唄（可選）
            var imgDiv = document.getElementById('previewImgDiv');
            var img = new Image();
            img.src = rst.base64; //base64字符串
            imgDiv.innerHTML = "";
            imgDiv.appendChild(img);
            data = rst.formData
        })
        .catch(function(err) {
            // 萬一出錯了，這裏能夠捕捉到錯誤信息
            // 並且以上的then都不會執行
            alert(err);
        });
});

$("#upload").on("click", function() {
    $.ajax({
        url: 'upload.php',
        data: data,
        processData: false,
        contentType: false,
        type: 'POST',
        error: function(err) {
            console.log("上傳失敗" + err)
        },
        success: function(result) {
            alert("上傳成功");

        },
    })
})
</script>

</html>

後臺php

<?php
// 容許上傳的圖片後綴
header("Content-type: text/html; charset=utf-8");
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
//獲取文件對象，鍵名爲name屬性或者key
//Array ( [file] => Array ( [name] => 居中.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\php8C86.tmp [error] => 0 [size] => 9742 ) )
print_r($_FILES);

$extension = end($temp);     // 獲取文件後綴名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 204800)   // 小於 200 kb
&& in_array($extension, $allowedExts))
{
  if ($_FILES["file"]["error"] > 0)
  {
    echo "錯誤：: " . $_FILES["file"]["error"] . "<br>";
  }
  else
  {
    echo "上傳文件名: " . $_FILES["file"]["name"] . "<br>";
    echo "文件類型: " . $_FILES["file"]["type"] . "<br>";
    echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "文件臨時存儲的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
    
    // 判斷當期目錄下的 upload 目錄是否存在該文件
    // 若是沒有 upload 目錄，你須要建立它，upload 目錄權限爲 777
    if (file_exists("upload/" . $_FILES["file"]["name"]))
    {
      echo $_FILES["file"]["name"] . " 文件已經存在。 ";
    }
    else
    {
      // 若是 upload 目錄不存在該文件則將文件上傳到 upload 目錄下
	  $name=iconv("UTF-8", "gbk",$_FILES["file"]["name"]);
      move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . "lily".".".$extension);
      echo "文件存儲在: " . "upload/" . $_FILES["file"]["name"];
    }
  }
}
else
{
  echo "非法的文件格式";
}
//在使用move_uploaded_file時，路徑upload/，必定要先創建upload的文件夾，不然出錯
?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。