tp5 ajax实现文件上传

先看效果

 

思路：首先要在点击选择文件时一个改变事件，在点击后发送到后台处理数据，然后取出文件名称，替换给别的标签（为了下一步的ajax上传做铺垫）

HTML代码示例：

<div class="upload-btn">
         <input type="file" name="pic1" id="pic" accept="image/gif,image/jpeg,image/x-png"/>
         <span></span>
 </div>

 

 第二步：jQuery代码示例

 　　//上传图片
    //注意这不是click
    $('#pic').change(function(event) {
        var formData = new FormData();
        formData.append("file", $(this).get(0).files[0]);
        $.ajax({
            url:"{:url('/addDo')}",
            type:'POST',
            dataType:"json",
            data:formData,
            cache: false,
            contentType: false,    //不可缺
            processData: false,    //不可缺
            success:function(data){
                if (data.code == 1){
                    //如果不明白为什么要替换标签 首先可以打印一下 data.phone 可以试试有没有数据
                    //如果有 则替换标签 目的是为了 ajax上传时接值
                    $("#pic").next().html("<font class='gimg'>"+data.photo+"</font>")
                }

            }
        });
    });

第三步：php代码示例

public function addDo()
   {
       $file = $this->request->file('file');
       if (!empty($file)) {
           // 移动到框架应用根目录/public/uploads/ 目录下
           $info = $file->validate(['size' => 1048576, 'ext' => 'jpg,png,gif'])->rule('uniqid')->move(ROOT_PATH . 'public' . DS . 'uploads');
           $error = $file->getError();
           //验证文件后缀后大小
           if (!empty($error)) {
               dump($error);
               exit;
           }
           if ($info) {
               // 成功上传后 获取上传信息
               // 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
               $photo = $info->getSaveName();
           } else {
               // 上传失败获取错误信息
               $file->getError();
           }
       } else {
           $photo = '';
       }
       if($photo !== ''){
           return ['code'=>1,'msg'=>'成功','photo'=>$photo];
       }else{
           return ['code'=>404,'msg'=>'失败'];
       }

   }

到这里 就获取到了文件名称 如果不明白，可以打印一下

 

 第四步：这里就要开始ajax上传的操作了

jquery代码示例

$(".btn").click(function () {
        var gname = $(".gname").val();
        var tid = $("#two").val();
        var gtime = $(".gtime").val();
        var gprice = $(".gprice").val();
        var gstate = $(".gstate").val();
        var gimg = $(".gimg").text();
        $.ajax({
            type:'post',
            url:"{:url('/addDo1')}",
            dataType:'json',
            data:{gname:gname,tid:tid,gtime:gtime,gprice:gprice,gstate:gstate,gimg:gimg},
            success:function (res) {
                if (res.code == 200){
                    alert(res.msg);
                    location.href='http://www.guo.com/index';
                }
                if (res.code == 201){
                    alert(res.msg);
                }
            }
        })
    })

第五步：后台接收ajax传来的值 进行添加

php代码示例

 public function addDo1(){
       $data = input();
       $res = \app\homes\model\Goods::getAdd($data);
       if ($res){
           return json(['code'=>200,'msg'=>'创建成功','data'=>$data]);
       }else{
           return json(['code'=>201,'msg'=>'创建失败']);
       }
   }

这样就添加成功了

如果嫌这一步替换的标签太丑 也可以在css中隐藏掉

 

css代码示例

 <style>
        .gimg{
            display:none;
        }
    </style>

这样就完成了  tp5 jquery+ajax的文件上传 

效果演示：

 

 ajax分页请点击这里看下一篇