Загрузить несколько изображений, отобразить список с именем файла и новым именем файла и выполнить переименование как в ⇐ Php

[Anonymous]

Я работаю над проектом Laravel, в котором мне нужно реализовать функцию загрузки нескольких изображений со следующими требованиями:

• Выбор изображения< /strong>: при выборе нескольких изображений список должен отображаться в виде таблицы. Таблица должна содержать:

• Предварительный просмотр изображения.
• Оригинал имя файла.
• Поле ввода нового имени файла.

• < li>Предварительный просмотр изображения. Когда пользователь дважды щелкает любую строку в таблице, изображение должно отображаться во всплывающем окне для предварительного просмотра.
• Проверка при загрузке: перед отправкой формы через AJAX:

• Если введенное новое имя файла пусто, это изображение следует удалить из таблицы.
• Отправьте оставшиеся изображения с помощью FormData, используя оба исходные и новые имена файлов.

• Общие каталоги:

Исходная папка и папка назначения являются общими сетевыми путями.
После загрузки файлов в папку назначения с новыми именами файлы следует переименовать в исходную папку.
Моя проблема:
Мне удалось:

• Отображение выбранных изображений в таблице.
• Используйте FormData для отправки изображений и имен файлов на сервер.

Однако у меня возникли проблемы с:

• переименованием файлов как в исходном, так и в целевом каталоге.
• Обработка файловых операций на общих сетевых путях.

Image Upload with Rename




Upload and Rename Images





Preview
Original Filename
New Filename
Actions





Upload



Close


${file.name}

Delete
`;
tableBody.append(fileRow);
});
});

// Handle double click to preview image
$(document).on('dblclick', '#imageTable tbody tr', function() {
let imgSrc = $(this).find('img').attr('src');
$('#previewImage').attr('src', imgSrc);
$('#previewModal').show();
});

// Close the image preview modal
$('#closeModal').click(function() {
$('#previewModal').hide();
});

// Handle delete row
$(document).on('click', '.deleteRow', function() {
$(this).closest('tr').remove();
});

// Upload images
$('#uploadImages').click(function() {
let formData = new FormData();
let files = $('#images')[0].files;

// Loop through each file and add to FormData
$('#imageTable tbody tr').each(function(index, row) {
let newFilename = $(row).find('.newFilename').val();
if (newFilename === '') {
// Remove row if new filename is empty
$(row).remove();
} else {
formData.append('images[]', files[index]);
formData.append('newFilenames[]', newFilename);
}
});

// AJAX to upload images and rename
$.ajax({
url: '/upload-images',
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
alert('Images uploaded successfully!');
},
error: function(err) {
alert('Error uploading images.');
}
});
});
});






Route::post('/upload-images', 'ImageController@uploadImages');

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
public function uploadImages(Request $request)
{
$images = $request->file('images');
$newFilenames = $request->input('newFilenames');

$sourcePath = '\\\\172.20.1.201\\source\\';
$destinationPath = '\\\\172.20.1.201\\destination\\';

foreach ($images as $index => $image) {
$originalName = $image->getClientOriginalName();
$newName = $newFilenames[$index] . '.' . $image->getClientOriginalExtension();

// Save to destination directory
$destinationFullPath = $destinationPath . $newName;
Storage::disk('network')->putFileAs($destinationPath, $image, $newName);

// Rename file in source folder
$sourceFullPath = $sourcePath . $originalName;
$newSourcePath = $sourcePath . $newName;

if (file_exists($sourceFullPath)) {
rename($sourceFullPath, $newSourcePath);
}
}

return response()->json(['message' => 'Images uploaded and renamed successfully']);
}
}



Подробнее здесь: https://stackoverflow.com/questions/790 ... -and-handl