ThinkPHP+JQuery实现文件的异步上传

栏目: PHP · 发布时间: 6年前

前端代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ThinkPHP+JQuery实现文件的异步上传</title>
</head>
<body>

<form id="ajax-upload-demo" enctype="multipart/form-data">
    <label>选择文件：</label>
    <input type="file" name="image"><br><br>
    <a href="javascript:uploadFile();">上传</a>
</form>
<br><p id="tips"></p>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>

    var isUploading = false;

    // 上传文件
    function uploadFile(){
        var form = document.getElementById('ajax-upload-demo');
        if(isUploading) {
            alert('文件正在上传...');
            return false;
        }
        $.ajax({
            url: '/index/index/uploadApi',
            type: 'POST',
            cache: false,
            data: new FormData(form),
            processData: false,
            contentType: false,
            dataType: 'json',
            beforeSend: function () {
                isUploading = true;
            },
            success: function (json) {
                var arr = JSON.parse(json);
                if(arr.errcode == 10000){
                    // 上传成功
                    alert('上传成功');
                    var url = arr.data.url;
                    var tips = "<a href='" + url + "' target='_blank'>点击查看</a>";
                    $("#tips").empty().append(tips);

                }else{
                    // 上传失败
                    alert('上传失败');
                }
                isUploading = false;
            }
        });
    }
</script>
</body>
</html>

效果图：

PHP代码

<?php
namespace app\index\controller;

use think\Controller;

class Index extends Controller
{
    // 上传表单页面
    public function index()
    {
        return $this->fetch();
    }

    // 上传文件接口
    public function uploadApi(){
        // 获取文件
        $file = request()->file('image');
        if($file){
            // 校验数组
            $validateArr = [ 'ext' => 'jpg,jpeg,gif,png,bmp' ];
            // 文件的本地存储路径
            $path = ROOT_PATH . 'public' . DS . 'upload';
            // 校验并移动
            $info = $file->validate($validateArr)->move($path);
            // 检查移动结果
            if($info){
                // 上传成功

                // 输出 jpg
                #echo $info->getExtension();

                // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
                #echo $info->getSaveName();

                // 输出 42a79759f284b767dfcb2a0197904287.jpg
                #echo $info->getFilename();

                // 文件的原文件名
                $sourceInfo = $info->getInfo();
                $sourceName = $sourceInfo['name'];

                // 拼装url
                $url = '/upload/'.$info->getSaveName();
                $url = str_replace('\\', '/', $url); // Windows下替换路径分隔符

                // other some operations ...

                // 返回json，告知客户端上传结果
                $json = json_encode([
                    'errcode'   => '10000',
                    'errmsg'    => 'Upload success',
                    'data'      => [ 'url' => $url ]
                ]);
            }else{
                // 上传失败，返回json，告知客户端
                $json = json_encode([
                    'errcode'   => '20002',
                    'errmsg'    => 'Upload failed',
                ]);
            }
        }else{
            // 未上传文件
            $json = json_encode([
                'errcode'   => '20001',
                'errmsg'    => 'File not uploaded',
            ]);
        }
        return $json;
    }
}

上传测试

1. 上传一张图片

ThinkPHP+JQuery实现文件的异步上传

2. 上传成功

ThinkPHP+JQuery实现文件的异步上传

3. 点击查看

ThinkPHP+JQuery实现文件的异步上传

4. 查看图片

ThinkPHP+JQuery实现文件的异步上传

5. 查看上传目录

ThinkPHP+JQuery实现文件的异步上传

可能出现的错误

1. PHP的上传限制

解决方法

打开 PHP 的配置文件 php.ini

查找 max_execution_time ，修改其值为 60 或更大
查找 post_max_zise ，修改其值为 128M 或更大
查找 upload_max_filesize ，修改其值为 128M 或更大

原因

max_execution_time
post_max_size
upload_max_filesize

本文链接：https://www.cnblogs.com/connect/p/thinkphp-ajax-upload.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Head First Python

Paul Barry / O'Reilly Media / 2010-11-30 / USD 49.99

Are you keen to add Python to your programming skills? Learn quickly and have some fun at the same time with Head First Python. This book takes you beyond typical how-to manuals with engaging images, ......一起来看看《Head First Python》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具

RGB CMYK 互转工具