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;
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！