jQuery+ThinkPHP5.0 无插件上传图片

HTML代码

<div class="box-body">
    <div class="form-group" id="test">
        <label for="background_img">上传海报背景图</label>
        <input type="file" id="background_img">
        <img id="background"  src="" width="67.5" height="120" alt="">
        <input type="text" class="form-control id="background_input" readonly value="">

    </div>
</div>

javascript代码

<script type="text/javascript">
    var background_img=document.querySelector("#background_img");
    $("#background_img").on("change",function() {

        var file=this.value;
        var all_img_ext=".jpg|.jpeg|.gif|.bmp|.png|";
        var ext = file.substring(file.lastIndexOf(".")).toLowerCase();//路径中所有字母全部转为小写
        if(all_img_ext.indexOf(ext+"|")==-1){
            swal("请上传 "+all_img_ext+" 类型的文件，当前文件类型为"+ext);
            return false;
        }

        //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
        var fileObj = background_img.files[0];
        
        //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
        var formData = new FormData();
        formData.append('background_img', fileObj);
        
        $.ajax({
            url: "{:url('admin/agent/uploads')}",
            type: "post",
            dataType: "json",
            data: formData,
            // async: false,
            // cache: false,
            contentType: false,
            processData: false,
            beforeSend:function () {
                /**这里用的sweetalert插件，可自定义遮罩层来提示用户**/
                swal('正在上传');
                $('body .sa-confirm-button-container .confirm').hide();

            },
            success: function (json_data) {

                if(json_data.code==1){
                    $("#background").attr('src',json_data.data)
                    $("#background_input").val(json_data.data)
                    swal("上传成功");
                }
            },
            error:function(XMLHttpRequest,textStatus,errorThrown){
                swal('error...状态文本值：'+textStatus+" 异常信息："+errorThrown)//pop(2,'error...状态文本值：'+textStatus+" 异常信息："+errorThrown,true)
            }
        });
    });
    
</script>

PHP代码上传至阿里云OSS（只是做demo演示，服务端没有做文件类型大小等判断，请开发者自行添加）

public function uploads()
{
    
    $uploadpath = "agent/poster/resource/test/";
    if(isset($_FILES['background_img'])){
        $file=$_FILES['background_img'];$oss_filename='background_img';
    }
    
    if($file['error'] == 0){
        // 服务器路径
        $localpath = $file['tmp_name'];
        $filename = $file['name'];
        $filename = $oss_filename .'.'. getExt($filename);
        // OSS路径
        $uploadpath .= $filename;

        $url= uploadOss($localpath, $uploadpath);

        return get_response($url,1,'上传成功');
    }
}

/*全局返回函数*/
function get_response($data,$code,$message){

    return json(['data'=>$data,'code'=>$code,'message'=>$message]);
}

/**
 * 上传阿里云
 * @param $localpath    本地路径
 * @param $uploadpath   上传路径
 * @return mixed
 */
function uploadOss($localpath, $uploadpath){

    import('.OSS.autoload', '', '.php');

    $accessKeyId        = Config::get('OSS')['ACCESS_KEY_ID'];//去阿里云后台获取秘钥
    $accessKeySecret    = Config::get('OSS')['ACCESS_KEY_SECRET'];//去阿里云后台获取秘钥
    $endpoint           = Config::get('OSS')['ENDPOINT'];//你的阿里云OSS地址
    $ossClient          = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint);
    $bucket             = Config::get('OSS')['BUCKET'];//oss中的文件上传空间

    $oss = $ossClient->uploadFile($bucket, $uploadpath, $localpath, $options = NULL);

    if($oss['info']['http_code'] == 200){
        return $oss['info']['url'];
    } else {
        return $oss['info']['http_code'];
    }

}