javascript - 使用 HTML5 上传图像并在用户端降低质量-6ren

javascript - 使用 HTML5 上传图像并在用户端降低质量

转载作者：行者123 更新时间：2023-11-30 14:48:59

我希望用户上传到我的网站的图片能够减小文件大小。我有以下脚本，但我找不到为什么我的图像没有出现在我的“上传”文件夹中。

当我上传图片时，我会转到“upload.php”页面。

我犯了什么错误，或者我忘记了什么？

这是我的 HTML 代码:

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/code.js"></script>
</head>

<form enctype="multipart/form-data" method="post" action="upload.php">
    <div class="row">
      <label for="fileToUpload">Select Files to Upload</label><br />
      <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
      <output id="filesInfo"></output>
    </div>
    <div class="row">
      <input type="submit" value="Upload" />
    </div>
  </form>

<script>
function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filesToUpload').onchange = function(){
        var files = document.getElementById('filesToUpload').files;
        for(var i = 0; i < files.length; i++) {
            resizeAndUpload(files[i]);
        }
    };
} else {
    alert('The File APIs are not fully supported in this browser.');
}

function resizeAndUpload(file) {
var reader = new FileReader();
    reader.onloadend = function() {

    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {

        var MAX_WIDTH = 600;
        var MAX_HEIGHT = 450;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        var dataURL = canvas.toDataURL("image/jpeg");

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(ev){
            document.getElementById('filesInfo').innerHTML = 'Done!';
        };

        xhr.open('POST', 'upload.php', true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var data = 'image=' + dataURL;
        xhr.send(data);
      }

   }
   reader.readAsDataURL(file);
}

document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);
</script>

这是我使用的 PHP 代码:

<?php
if ($_POST) {
    define('UPLOAD_DIR', 'uploads/');
    $img = $_POST['image'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.jpg';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
}

最佳答案

阅读你的问题，你的问题看起来是你没有在服务器端接收文件，你应该使用 $_FILES['image'] 而不是 $_POST['image'] 因为你正在上传文件，它们在 $_FILES 数组中。

可以与 javascript 一起使用的最简单的 PHP 脚本是

if (isset($_FILES['image'])) {
    // Example:
    move_uploaded_file($_FILES['image']['tmp_name'], UPLOAD_DIR  . $_FILES['image']['name']);
    exit;
}

当您使用 file_put_contents 时，它也可以工作，但它需要从 $_FILES 数组而不是 $_POST 中获取文件。

可以看教程HERE在 Asynchronously handling the file upload process 标题下，甚至添加拖放功能。

关于javascript - 使用 HTML5 上传图像并在用户端降低质量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48453085/