【发布时间】：2018-08-19 21:43:18
【问题描述】：
我正在尝试在我的 CMS 中为画廊构建一个 Image Uplaoder。 我做了一些研究，找到了构建它所需的东西。 上传者使用三个文件。第一个是选择要上传的图像并显示一些进度的位置。与此相关的是一个 js 文件，用于首先调整所选图像的大小，然后再上传它们。最后但并非最不重要的一个文件，用于通过 php 处理服务器上的图像并将数据写入 sql-database。
优点是：一切都按应有的方式运行。 但是我对图像进行排序有问题。因为他们正在获取一个 md5 生成的文件名，并且上传者一次处理多个图像，所以我在一天结束时拍摄的一些图像首先显示，而当天的第一张照片例如在它们之间的任何位置。
所以我的问题来了：有没有办法保留原始文件名并将上传的图像命名为例如“1234md5randomdigits_ORIGINALFILENAME.jpg”之类的名称？
我尝试了很多 $_FILES 和其他 php 参数，但它们都是空的...
这是我用于选择图像的上传文件：
<!DOCTYPE html>
<html>
<head>
<title>multiple.php</title>
<link rel="stylesheet" href="./style.css" />
<head>
<body>
<h1>Upload Images...</h1>
<form>
<input type="file" multiple />
<div class="photos">
</div>
</form>
<script src="./upload.js"></script>
</body>
</html>
upload.js 文件来了
// Once files have been selected
document.querySelector('form input[type=file]').addEventListener('change', function(event){
// Read files
var files = event.target.files;
// Iterate through files
for (var i = 0; i < files.length; i++) {
// Ensure it's an image
if (files[i].type.match(/image.*/)) {
// Load image
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Add elemnt to page
var imageElement = document.createElement('div');
imageElement.classList.add('uploading');
imageElement.innerHTML = '<span class="progress"><span></span></span>';
var progressElement = imageElement.querySelector('span.progress span');
progressElement.style.width = 0;
document.querySelector('form div.photos').appendChild(imageElement);
// Resize image
var canvas = document.createElement('canvas'),
max_size = 1200,
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);
// Upload image
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// Update progress
xhr.upload.addEventListener('progress', function(event) {
var percent = parseInt(event.loaded / event.total * 100);
progressElement.style.width = percent+'%';
}, false);
// File uploaded / failed
xhr.onreadystatechange = function(event) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
imageElement.classList.remove('uploading');
imageElement.classList.add('uploaded');
imageElement.style.backgroundImage = 'url('+xhr.responseText+')';
console.log('Image uploaded: '+xhr.responseText);
} else {
imageElement.parentNode.removeChild(imageElement);
}
}
}
// Start upload
xhr.open('post', 'process.php', true);
xhr.send(canvas.toDataURL('image/jpeg'));
}
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(files[i]);
}
}
// Clear files
event.target.value = '';
});
这是我的“process.php”来处理上传的数据：
<?php
$save_path="/images";
// Generate filename
$filename = md5(mt_rand()).".jpg";
// Read RAW data
$data = file_get_contents("php://input");
// Read string as an image file
$image = file_get_contents("data://".substr($data, 5));
// Save to disk
if ( ! file_put_contents($save_path.$filename, $image)) {
exit();
}
// Clean up memory
unset($data);
unset($image);
//Includes and SQL go after that
// Return file URL
echo $save_path.$filename;
?>
如果能得到帮助，我会非常高兴！ :)
【问题讨论】：
-
您可以发送带有文件名的自定义标头（通过 ajax 函数）并在 php 中处理该标头
标签： javascript php image filenames uploader