我爱模板网 > 建站教程 > PHP框架 >  thinkphp 6.0+jQuery图片上传正文

thinkphp 6.0+jQuery图片上传

thinkPHP 6.0+jQuery实现图片上传到public的upload目录,并且上传两张图片。

一、修改上传路径
找到根目录/config/filesystem.php,修改root的值如下:
'local'  => [
    // 'root' => app()->getRuntimePath() . 'storage',
    'root' => app()->getRootPath() . 'public',
],
'public' => [
    // 磁盘路径
    // 'root'       => app()->getRootPath() . 'public/storage',
    'root'       => app()->getRootPath() . 'public',
],
二、上传的html
<form method="post">
    <input type="hidden" name="id" value="{$siteInfo.id}" id="id">
    <div>
        <label for="username">名称</label>
        <input id="sitename" value="{$siteInfo.sitename}" name="sitename" type="text">
    </div>
    <div>
        <label for="username">banner1</label>
        <input id="banner1" name="banner1" type="file">
    </div>
    <div>
        <label for="username">banner1</label>
        <input id="banner2" name="banner2" type="file">
    </div>
    <div>
        <button type="button" onclick="onSubmit()">保存</button>
    </div>
</form>
三、上传的jQuery ajax:
function onSubmit() {
    var formData = new FormData($('#form')[0]); //获取表单数据
    $.ajax({
        type: 'post',
        url: "{:url('article/edit')}",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: (res) => {
            if (res.code === 200) {
                location.href = "{:url('article/index')}"
            }
            alert(res.msg)
        }
    })
}
或者
function onSubmit() {
    var sitename = $('#sitename').val();
    var id = $('#id').val();
    var formData = new FormData();
    formData.append('sitename', sitename);
    formData.append('en_sitename', en_sitename);
    formData.append('id', id);
    formData.append("banner1",$("#banner1")[0].files[0]);
    formData.append("banner2",$("#banner2")[0].files[0]);
    $.ajax({
        url: "{:url('article/edit')}",
        method: 'post',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: (res) => {
            if (res.code === 200) {
                location.href = "{:url('article/index')}"
            }
            alert(res.msg)
        }
    })
}
ajax的相关参数解释:
cache
    cache设为false可以禁止浏览器对该URL(以及对应的HTTP方法)的缓存。 jQuery通过为URL添加一个冗余参数来实现。
    该方法只对GET和HEAD起作用,然而IE8会缓存之前的GET结果来响应POST请求。 这里设置cache: false是为了兼容IE8。

contentType
    jQuery中content-type默认值为application/x-www-form-urlencoded, 因此传给data参数的对象会默认被转换为query string(见HTTP 表单编码 enctype)。
    我们不需要jQuery做这个转换,否则会破坏掉multipart/form-data的编码格式。 因此设置contentType: false来禁止jQuery的转换操作。

processData
    jQuery会将data对象转换为字符串来发送HTTP请求,默认情况下会用 application/x-www-form-urlencoded编码来进行转换。 我们设置contentType: false后该转换会失败,因此设置processData: false来禁止该转换过程。
    我们给的data就是已经用FormData编码好的数据,不需要jQuery进行字符串转换。

四、thinkphp代码
public function edit()
{
    $id = input('id',0,'intval');
    $data = $this->_handleInput();
    $data['id'] = $id;
    if(isset($_FILES['banner1'])){
        if($_FILES['banner1']['tmp_name']){
            $data['banner1'] = $this->upload('banner1');
        }
    }
    if(isset($_FILES['banner2'])){
        if($_FILES['banner2']['tmp_name']){
            $data['banner2'] = $this->upload('banner2');
        }
    }
    $res = Db::table('site_info')->save($data);
    if($res>=0){
        return json(['code'=>200,'msg'=>'修改成功!']);
    }else{
        return json(['code'=>301,'msg'=>'修改失败!']);
    }
}

private function _handleInput(){
    $data = array();
    $data['sitename'] = input('sitename','','trim');
    $data['en_sitename'] = input('en_sitename','','trim');
    return $data;
}

public function upload($tempName){
    $file = request()->file($tempName);
    //上传并获取地址
    $savename = \think\facade\Filesystem::putFile( 'uploads', $file);
    //将斜杠替换
    $savename = str_replace('\\', '/', $savename);
    return $savename;
}



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:ThinkPHP5跨控制器调用的三种方法 下一篇:thinkPHP模板输出富文本
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢