thinkphp+Ajax文件上传/图片上传

thinkphp+Ajax文件上传/图片上传

使用 type=“file” 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上。

<div class="col-sm-2">上传商品图片</div>
<div class="col-sm-10">
     <input type="file" id="addfile" data-image="">
</div>

监听文件上传事件，利用Ajax提交上传的文件到服务器

var addfile = $('#addfile');
$('#addfile').change(function(){
    var formdata = new FormData();
    formdata.append('goodsimg',addfile[0].files[0]);  
    $.ajax({
         type: 'POST',  // post请求发送数据
         url: "{:url('admin/upload/image')}",   // 请求地址
         async: false,
         dataType: 'json',
         processData: false,	//不需要将传输的数据序列化
         contentType: false,	
         data: formdata,
         success: function(res) {
             // 文件路径拼接
             var str = res.root+'/upload/'+res.date+'/'+res.fliename;
             addfile.data('image',str);
         },
         error: function(res) {
             alert(JSON.stringify(res))
         }
      })
})

服务器接收处理并返回数据，将图片文件存放在根目录下upload文件夹下面

<?php
namespace app\admin\controller;
class Upload
{
    public function image()
    {
        $file = request()->file('goodsimg');	// 解析Ajax传过来的FormData
        if($file) {
            $info = $file->move(ROOT_PATH.'public'.DS.'upload');
            if($info) {
                return json([
                    'code' => 1,
                    'msg' => 'success',
                    'filename' => $info->getFilename(),
                    'root' => request()->root(),
                    'date' => date('Ymd')
                ]);
            } else {
                return json([
                    'code' => 0,
                    'msg' => '上传失败'
                ]);
            } 
        } else {
            return json([
                'code' => 0,
                'msg' => '找不到文件'
            ]);
        }
    }
}