文章模块——文章添加上传图片

1.文章添加上传图片表单

      //上传图片按钮
      <button type="button" class="layui-btn" id="test1">
         <i class="layui-icon">&#xe67c;</i>上传图片
      </button>

      //上传图片选择框，type="file"，empty="multipart/form-data"
      <input type="file" name="photo" id="photo_upload" empty="multipart/form-data" style="display:none"/>

      //显示上传以后的图片
      <img src="" alt="" id="art_thumb_img" style="width: 100px;height:100px">

2.创建文章上传图片路由

    //文章图片上传路由
    Route::post('article/upload', 'ArticleController@upload');   

3.编写文章上传表单提交事件

    <script>
        layui.use(['form', 'layer'], function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            var upload = layui.upload;
            //选中上传按钮test1时触发的click单击事件
            $('#test1').on('click',function() {
                //选中上传图片选择框photo_upload的click单击事件：
                $('#photo_upload').trigger('click');
                //选中上传图片选择框photo_upload的change改变内容事件：
                $('#photo_upload').on('change',function() {
                    var obj = this;
                    //设置一个空对象formData，用来保存id为art_form的异步提交数据表单
                    var formData = new FormData($('#art_form')[0]);
                    $.ajax({
                        //提交的路由
                        url: '/admin/article/upload',
                        //提交方式
                        type: 'post',
                        //提交的数据(因为data值是FormData对象，不需要对数据做处理)
                        data: formData,
                        //处理数据：不需要
                        processData:false,
                        //发送数据的格式:关闭
                        contentType:false,
                        //请求成功返回的数据
                        success:function(data){
                            //如果返回的data数组的键ServerNo等于200
                            if (data['ServerNo']=='200') {
                                //选中id为art_thumb_img的元素，追加元素的src属性，和值'/uploads/'+data['ResultData']
                                $('#art_thumb_img').attr('src','/uploads/'+data['ResultData']);
                                //将返回的data数据的值给名为art_thumb的输入框input
                                $('input[name=art_thumb]').val(data);
                                //当obj内容改变后，关闭
                                $(obj).off('change');                                
                            }else{
                                //如果失败，弹出返回的data数组的键ResultData的值
                                alert(data['ResultData']);
                            }
                        },
                        //出现错误
                        error:function(XMLHttpRequest,textStatus,errorThrown){
                            var number = XMLHttpRequest.status;
                            var info = "错误号"+number+"文件上传失败！";
                            //将菊花换成原图
                            //$('#pic').attr('src','file.png');
                            alert(info);
                        },
                        //$.ajax执行后，会继续执行ajax后面的脚本
                        async:true
                    });                   
                });               
            });

4.编写文章上传图片的控制器方法

    //文章图片上传
    public function upload(Request $request)
    {
        //获取上传文件
        $file = $request->file('photo');
        //判断上传文件是否成功
        if (!$file->isValid()) {
            return response()->json(['ServerNo'=>'400','ResultData'=>'无效的上传文件']);
        }

        //获取原文件的扩展名
        $ext = $file->getClientOriginalExtension();    //文件拓展名
        //新文件名
        $newfile = md5(time().rand(1000,9999)).'.'.$ext;

        //文件上传的指定路径
        $path = public_path('uploads');


        //将文件从临时目录移动到制定目录

        if (! $file->move($path,$newfile)) {
            return response()->json(['ServerNo'=>'400','ResultData'=>'保存文件失败']);
        }
        //如果上传文件成功
        return response()->json(['ServerNo'=>'200','ResultData'=>$newfile]);

    }