TP3.2批量上传图片,且生成缩略图

本文介绍了如何在基于ThinkPHP 3.2的项目中实现图片的批量上传功能,并详细讲解了如何在上传过程中生成缩略图。通过提供的PHP代码片段和HTML表单,开发者可以了解到具体的实现步骤和关键代码。
摘要由CSDN通过智能技术生成

html部分:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传</title>
</head>
<body>
<form enctype="multipart/form-data" action="__URL__/upload" method="post">
    <input type="file" name="photo[]" multiple>
    <input type="submit" value="提交">
</form>
</body>
</html>

php部分:

<?php
namespace Home\Controller;
use Think\Controller;

class IndexController extends Controller {
    public function upload() {
        $upload = new \Think\UploadFile();// 实例化上传类
        $upload->maxSize = 3000000 ;// 设置附件上传大小  C('UPLOAD_SIZE');
        $upload->savePath = './Uploads/' . 'thumb
为了实现基于AJAX的图片上传,你可以按照以下步骤进行操作: 1. 创建一个包含上传表单的HTML页面,其中包含一个文件输入字段和一个用于提交表单的按钮。例如: ```html <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="imageFile" id="imageFile"> <input type="submit" value="上传图片"> </form> ``` 2. 使用JavaScript编写一个处理表单提交的函数。该函数将使用AJAX将图片文件发送给服务器。例如: ```javascript function uploadImage() { var form = document.getElementById('uploadForm'); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php', true); xhr.onload = function() { if (xhr.status === 200) { // 图片上传成功 console.log(xhr.responseText); } else { // 图片上传失败 console.error('图片上传失败'); } }; xhr.send(formData); } ``` 3. 创建一个服务器端脚本来处理图片上传。在这个例子中,我们使用PHP来处理上传请求。创建一个名为upload.php的文件,并在其中编写以下代码: ```php <?php $targetDir = 'uploads/'; // 指定图片上传目录 if (!empty($_FILES['imageFile'])) { $tempFile = $_FILES['imageFile']['tmp_name']; $targetFile = $targetDir . basename($_FILES['imageFile']['name']); // 将临时文件移动到目标位置 if (move_uploaded_file($tempFile, $targetFile)) { echo '图片上传成功'; } else { echo '图片上传失败'; } } ?> ``` 确保在服务器上创建一个名为uploads的文件夹,用于存储上传的图片。 4. 最后,在JavaScript代码中,将上传表单的提交事件绑定到处理函数上。例如: ```javascript document.getElementById('uploadForm').addEventListener('submit', function(e) { e.preventDefault(); uploadImage(); }); ``` 这样,当用户选择并提交图片文件时,表单将使用AJAX发送请求到服务器,并将图片文件上传到指定的目录中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值