第五天,文件/图片的上传的思路

文件的上传一般不用点击事件,点击事件未发生,事件就已经触发,而使用change事件,change事件会在表单发生改变时触发

juquery无法直接把文件上传,需要一个formData对象来配合着上传才可以

发送ajax进行信息的传输,Php后台进行接受,并且从数据库获取数据,

前端页面:

1.找到上传文件的input框

2.script标签,选择上传文件按钮,把文件上传到后台

3.onclick          文件上传按钮会触发,select下拉框会触发,  onchange 值改变 

4.获取要上传的文件 var file=this.files[0]

5. data对象:参数,字符串,3.FormData对象(专门上传文件)var data=new FormData();

data.append('file',file);

6.发送ajax 

$.ajax({

type:"post",   

 url:地址

contentType:false, 文件上传必须写,普通不写

processData:false, //上传文件必须写,普通不写

data:data,

success:function(res){  //如果图片上传成功,返回给我图片的地址//把这个地址写在#showImg里面就显示

$("#showImg")attr("src",res).show()

}

})

7. 富文本编辑器(有格式的文本)丰富的文本类容,类似于word的文档

插件--CKEDITOR     ueditor    

引入富文本js文件 //插入  本质上textarea里面没有内容,我们改的是在div的内容,赋值到textarea里面

初始化渲染出word样式        CKEDITOR.replace(“content”);

//点击保存,把填写的数据发送到后台,后台把他插入到数据库中

本质上textarea里面没有内容,我们改的是在div的内容,赋值到textarea里面

php服务端:

//获取ajax传递过来的数据通过print_r打印出来的是二位数组

1.  获取上传的文件   $file=$_FILES['file'];

2.自己上产一个不重复的名字  $ext=strrchr($file['name'],".")从开始截取到最后jpg

3.$filename=time().rand(10000,99999).$ext;

4.把这个文件存储到你想存储的地方 $bool=move_upload_file($file['tmp_name'])

5.if($bool){  //成功了 返回图片地址

echo '../static/uploads/.$filename';

}else{

echo '文件上传失败';

}

6.富文本编辑器

7.评论管理 前端

1.script标签 -->入口函数-->ajax请求    bootstrap:改变颜色

$(function(){  /

    var currentPage=1;

    $.ajax({

        type:"post";        url:"";     data:{currentpage:}

      data:{ , };  success:function(res){

        if(res.code==1){

        var data=res.data;

        var str="";

         $.each(data,function(i,e){

    str='<tr>....</tr>'

});

}    }     })    })

7.评论管理后台

require_once '../../config.php'     require_once '../../function.php'

$currentPage=$_POST['pageSize'];当前页              $pageSize=$_POST['pageSize'];每页显示的条数

$connect=connect();               $sql="";

$queryResult=query($connect,$sql);//二维数组     $response=["code"=>0,"msg"=>"操作失败"];

if($queryResult){ //如果有 证明有查询到了 //成功

$response["code"]=1;   $response["msg"]="操作成功";   $response["data"]=$queryResult;

}

header("content-type:application/json;charset=utf8");

echo json_encode($response);

猜你喜欢

转载自blog.csdn.net/weixin_42663701/article/details/81060304
今日推荐