在
PHP 中，处理多张
图片上传以及生成预览图，并考虑到
跨域问题，你需要做以下几个步骤：
前端（HTML + JavaScript + AJAX）:
```html
<!-- 使用HTML5的FormData -->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" multiple name="images[]" accept="image/*" onchange="previewFiles()">
<div id="preview"></div>
<button type="submit">Upload</button>
</form>
<script>
function previewFiles() {
// 预览文件
const input = document.querySelector('#images');
const previewContainer = document.getElementById('preview');
input.files.forEach(file => {
const reader = new FileReader();
reader.onload = (event) => {
previewContainer.innerHTML += `<img src="${event.target.result}" alt="${file.name}">`;
};
reader.readAsDataURL(file);
});
}
//
跨域上传AJAX
$.ajax({
url: 'upload.
php',
type: 'POST',
data: new FormData(document.getElementById('uploadForm')),
processData: false,
contentType: false,
xhr: function() { return new XMLHttpRequest(); },
xhrFields: {
withCredentials: true, // 如果服务器需要的话，设置
跨域发送Cookie
},
success: function(data) {
console.log(data);
}
});
</script>
```
后端（
PHP - 使用
Laravel 或者原生
PHP 示例）:
```
php
// upload.
php (
Laravel)
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;
public function store(Request $request)
{
$files = $request->file('images');
foreach ($files as $file) {
// 文件名保存和存储
$filename = time() . '-' . $file->getClientOriginalName();
$file->move(public_path('uploads'), $filename);
// 图片处理并生成缩略图
$image = Image::make(public_path('/uploads/' . $filename));
$thumbnailPath = public_path('/uploads/thumbnails/' . $filename);
$image->resize(300, null, function ($constraint) {
$constraint->aspectRatio();
})->save($thumbnailPath);
}
// 返回响应，例如JSON
return response()->json(['status' => 'success', 'message' => 'Images uploaded successfully']);
}
// 或者原生
PHP 示例
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$dir = 'uploads/';
if (!is_dir($dir)) {
mkdir($dir, 0777, true);
}
foreach ($_FILES['images']['tmp_name'] as $key => $tmp_name) {
$file_info = pathinfo($_FILES['images']['name'][$key]);
$new_file_name = $file_info['basename'];
move_uploaded_file($tmp_name, $dir . '/' . $new_file_name);
// 缩略图处理
list($width, $height) = getimagesize($dir . '/' . $new_file_name);
imagecreatetruecolor(300, min(300, $height / $width * $width)); // 创建新的图像资源
$source = imagecreatefromjpeg($dir . '/' . $new_file_name); // 加载原始图片
imagecopyresampled($dest, $source, 0, 0, 0, 0, 300, min(300, $height), $width, $height); // 缩放并保存到新位置
imagejpeg($dest, $dir . '/thumbnails/' . $new_file_name);
}
// 返回响应，例如JSON
echo json_encode(['status' => 'success', 'message' => 'Images uploaded successfully']);
}
```
这篇博客探讨了在Laravel中遇到的文件上传接口跨域问题。当前端添加进度条时，会触发两个请求，导致跨域错误。解决方案包括在中间件中设置允许跨域的响应头，允许任何方法（ANY），并将上传文件的路由配置为接受所有请求类型，从而确保POST和OPTIONS请求都能正确处理。通过这些调整，成功解决了Laravel文件上传接口的跨域问题。
扫一扫
814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
