在浏览器中选择一个图像，调整大小并使用JS发送到服务器，然后让PHP将其保存在服务器上

Question

I'm working on this classical feature: choose a file in the browser ("Browse"), let JavaScript resize it (max width / height = 500 pixels) and upload it to server, and then let PHP save it to disk.

Here is what I currently have (based on this other question )

 $("#fileupload").change(function(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function (readerEvent) { var image = new Image(); image.onload = function (imageEvent) { var canvas = document.createElement('canvas'), max_size = 500, width = image.width, height = image.height; if (width > height) { if (width > max_size) { height *= max_size / width; width = max_size; } } else { if (height > max_size) { width *= max_size / height; height = max_size; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); var dataUrl = canvas.toDataURL('image/jpeg'); var resizedImage = dataURLToBlob(dataUrl); $.ajax({type: "POST", url: "index.php", success: function(data, status) { }, data: { content: resizedImage, filename: ?? }}); } image.src = readerEvent.target.result; } reader.readAsDataURL(file); } var dataURLToBlob = function(dataURL) { var BASE64_MARKER = ';base64,'; if (dataURL.indexOf(BASE64_MARKER) == -1) { var parts = dataURL.split(','); var contentType = parts[0].split(':')[1]; var raw = parts[1]; return new Blob([raw], {type: contentType}); } var parts = dataURL.split(BASE64_MARKER); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); } 

 <input id="fileupload" type="file"> 

The PHP part would be:

<?php
if (isset($_POST['content'])) file_put_contents($_POST['filename'], $_POST['content']);
?>

This currently doesn't work, how should I do the AJAX part to make it work (how to send the data + filename)? Should a FormData be used, if so why and how?

Answer 1

You need to use $_FILES array to retrieve the image info:

if (is_uploaded_file($_FILES['new_img']['tmp_name'])) {
    $newimg = $_FILES['new_img']['name'];
    move_uploaded_file($_FILES['new_img']['tmp_name'], "../images/{$newimg}");
}

file_put_contents is a function to write files. When you upload a file it is stored in a temp dir, so you can check with is_uploaded_file that it is uploaded with the $_FILES['new_img']['tmp_name'] .

You can use it's original name with $_FILES['new_img']['name'] or rename it to prevent injections. Then you have to move the image to it's final location with move_uploaded_file .

I almost forgot the form:

<form action="yourpage.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="new_img" id="new_img">
    <input type="submit" value="Upload Image" name="submit">
</form>