悠悠楠杉
网站页面
ThinkPHP5通过ajax插入图片并实时显示(完整代码)
06/23
为了通过ThinkPHP5框架实现一个功能：通过AJAX上传图片并实时显示在页面上，同时基于上传的图片生成一篇包含标题、关键词、描述和正文的文章（约1000字），我将为你提供一个基本的实现方法。这里将涵盖前端HTML和JavaScript（使用AJAX）、后端ThinkPHP5的控制器与模型代码，以及如何生成文章内容的逻辑。
1. 前端HTML和JavaScript（使用AJAX）
首先，创建一个简单的HTML页面来允许用户上传图片并显示。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Upload and Display</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>Upload an Image</h2>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="image" accept="image/*">
<button type="button" id="uploadBtn">Upload</button>
</form>
<div id="preview"></div>
<h2>Generated Article</h2>
<div id="article"></div>
<script>
$(document).ready(function() {
$('#uploadBtn').on('click', function() {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'POST',
url: '/upload', // 修改为你的上传处理URL
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#preview').html('<img src="' + response.url + '" />');
generateArticle(response.url);
},
error: function() {
alert('Upload failed.');
}
});
});
});
function generateArticle(imageUrl) {
const title = "Uploaded Image as Article"; // 固定标题或可动态生成标题
const keywords = "image, upload, preview"; // 固定关键词或可动态生成关键词（基于图片信息）
const description = "This is a description based on the uploaded image."; // 固定描述或可动态提取图片元信息作为描述
const content = "This is a sample content with a link to the uploaded image: " + imageUrl; // 生成内容并插入图片链接
$('#article').html(`<h3>${title}</h3><p>Keywords: ${keywords}</p><p>Description: ${description}</p><p>${content}</p>`);
}
</script>
</body>
</html>
2. ThinkPHP5 后端控制器与模型代码
接下来是后端部分，使用ThinkPHP5来处理图片上传并返回图片的URL。我们假设你已经有一个Upload控制器：
php
<?php
namespace app\controller;
use think\Controller;
use think\Request;
use think\Response;
use think\File;
class Upload extends Controller
{
public function upload(Request $request)
{
$file = request()->file('image');
if (!$file) {
return json(['error' => 'No file uploaded']);
}
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
$response = [
'url' => $info->getSaveName() // 获取保存后的文件名并生成完整URL路径（这里假设你已经知道如何生成适合你的项目的URL）
];
return json($response);
} else {
return json(['error' => $file->getError()]);
}
}
}
?>
