laravel图片和文件的上传 - 简书

获取表单传来的图片有两种方式

    $file = $request::file('picfile');
    或者
    $request = $request::all(); //注意先先取全，得到的是数组 
    $file = $request['picfile'];

1.前端页面

  {{--<form action="upload" method="POST" enctype="multipart/form-data" >--}}
    <input type="text" size="50" name="art_thumb">
    <input id="file_upload" name="file_upload" type="file" multiple="true">
        {{ csrf_field() }}
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="{{asset('uploadify/jquery.uploadify.min.js')}}" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="{{asset('uploadify/uploadify.css')}}">
    <script type="text/javascript">
        <?php $timestamp = time();?>
        $(function() {
            $('#file_upload').uploadify({
                'buttonText' : '12图片上传',
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    '_token'     : "{{csrf_token()}}"
                },
                'swf'      : "{{asset('uploadify/uploadify.swf')}}",
                'uploader' : "{{url('/addpic')}}",   //这个是提交图片处理的地址
                'onUploadSuccess' : function(file, data, response) {
                    $('input[name=art_thumb]').val(data);
                    $('#art_thumb_img').attr('src',data);
    //                                    alert(data);
                }
            });
        });
    </script>
    <style>
        .uploadify{display:inline-block;}
        .uploadify-button{border:none; border-radius:5px; margin-top:8px;}
        table.add_tab tr td span.uploadify-button-text{color: #FFF; margin:0;}
    </style>
    <button>ok</button>
    {{--</form>--}}
    <img src="" alt="" id="art_thumb_img" style="max-width: 350px; max-height:100px;">

2.上传成功之后获取到地址，把地址赋值给input表单里面图片的名字，另外再给img的src属性复制刚才上传的地址，在页面上吧图片读出来

    'onUploadSuccess' : function(file, data, response) {
                    $('input[name=art_thumb]').val(data);
                    $('#art_thumb_img').attr('src',data);
    //                                    alert(data);
                }

3.如果你用的是bootstrap轮播图，第一个图片要设置成class=active

  <script>
    $(function(){
        $(".item:first").addClass('active');
        //或者 $(".item").first().addClass('active');
    })
</script>

4.我自己封装了一个图片上传方法

//    上传图片
public function uploadpic( $filename, $filepath)
{
    //        1.首先检查文件是否存在
    if ($request::hasFile($filename)){
        //          2.获取文件
        $file = $request::file($filename);
        //          3.其次检查图片手否合法
        if ($file->isValid()){
//                先得到文件后缀,然后将后缀转换成小写,然后看是否在否和图片的数组内
            if(in_array( strtolower($file->extension()),['jpeg','jpg','gif','gpeg','png'])){
                //          4.将文件取一个新的名字
                $newName = 'img'.time().rand(100000, 999999).$file->getClientOriginalName();
                //           5.移动文件,并修改名字
                if($file->move($filepath,$newName)){
                    return $filepath.'/'.$newName;   //返回一个地址
                }else{
                    return 4;
                }
            }else{
                return 3;
            }
                        
        }else{
            return 2;
        }
    }else{
        return 1;
    }
}
// $realPath = $file->getRealPath(); //这个表示的是缓存在tmp文件夹下的文件的绝对路径;
// $tmpName = $file -> getFileName();   //缓存在tmp文件中的文件名
// $clientName = $file -> getClientOriginalName(); //获取文件名称
//$extension = $file->getClientOriginalExtension();   //上传文件的后缀

 //不封装，直接使用处理方法
public function store( )
{
    if ($request::hasFile('picfile')){
//          2.其次检查图片手否合法
        if ($request::file('picfile')->isValid()){
            $file = $request::file('picfile');
//                先得到文件后缀,然后将后缀转换成小写,然后看是否在否和图片的数组内
            if(in_array( strtolower($file->extension()),['pdf','txt','doc','md','html'])){
//          3.获取文件

//          4.将文件取一个新的名字
                $newName = 'join'.time().rand(100000, 999999).$file->getClientOriginalName();
//           5.移动文件,并修改名字
                $file->move('uploads/join',$newName);
                $input['card_profile'] = 'uploads/join'.'/'.$newName;
                $input['created_at'] = date('Y-m-d H:i:s');
                $res = $this->recruitment->add($input);
                if ($res){
                    return back()->with('message','简历投递成功');
                }else{
                    return back()->with('errors','简历投递失败');
                }
            }else{
                return back()->with('errors','后缀不符合');
            }

        }else{
            return back()->with('errors', '简历格式不合法');
        }
    }else{
        return back()->with('errors','没有上传简历');
    }

    }
// $realPath = $file->getRealPath(); //这个表示的是缓存在tmp文件夹下的文件的绝对路径;
// $tmpName = $file -> getFileName();   //缓存在tmp文件中的文件名
// $clientName = $file -> getClientOriginalName(); //获取文件名称
//$extension = $file->getClientOriginalExtension();   //上传文件的后缀

5.调用上传图片的方法

//    保存内容
public function store(\\Request $request )
{

    $input = Input::except('_token','picfile');
    $res = $this->uploadpic('picfile','uploads/images');
    switch ($res){
        case 1: return back()->with('errors','图片上传失败')->withInput();
        case 2: return back()->with('errors','图片不合法')->withInput();
        case 3: return back()->with('errors','图片后缀不对')->withInput();
        case 4: return back()->with('errors','图片储存失败')->withInput();
        default :
            $input['us_img'] = $res; //把得到的地址给picname存到数据库
            if($this->about->add($input)){
                return redirect('about')->with('message', '发布成功');
            }else{
                return back()->with('errors','数据填充失败')->withInput();
            }
    }
}

6.上传表单的打印

我们来打印表单，
$request = $request::all();
dd($request);

会看到这个结果

Paste_Image.png

我们来执行

$request = $request::all();
dd($request['picfile']);

Paste_Image.png

接着，我们可以取对象里面的东西

$request = $request::all(); //注意先先取全，得到的是数组
$file = $request['picfile'];
$extension = $file->extension();   //"jpeg
$path = $file->path();   //"/private/var/tmp/phpAF4CTc"

或者直接去file的值
$file = $request::file('picfile');
$extension = $file->extension();   //"jpeg
$path = $file->path();   //"/private/var/tmp/phpAF4CTc"

另外，在其他视频中看到了一种上传图片方式

Paste_Image.png

    • *
图片拖动上传
搭建博客必备：图片拖动文本框自动上传

推荐一个上传图片的组件

github-blueimp/jQuery-File-Upload

API手册
Basic plugin

  • 使用
<!DOCTYPE HTML>
<html lang="en">
<head>
    <!-- Force latest IE rendering engine or ChromeFrame if installed -->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <meta charset="utf-8">
    <title>jQuery File Upload Demo - Basic version</title>
    <meta name="description"
          content="File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap styles -->
    <script src="js/jquery.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Generic page styles -->
    <style>
        body {
            padding-top: 60px;
        }

    </style>
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="css/jquery.fileupload.css">
</head>
<body>

<div class="container">
    <!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>请选择图片...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <!-- The global progress bar -->
    {{-- 上传进度条 --}}
    {{--<div id="progress" class="progress">--}}
        {{--<div class="progress-bar progress-bar-success"></div>--}}
    {{--</div>--}}
    <!-- The container for the uploaded files -->
    <div id="files" class="files"></div>
    <div class="commodity-media" id="commodity_img"></div>



</div>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script>
    /*jslint unparam: true */
    /*global window, $ */
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        $('#fileupload').fileupload({
            url: 'http://localhost/upload/upload',
            dataType: 'json',
            done: function (e, data) {
                // console.log(data.result);
                // $('<p/>').text(data.result.data.file.name).appendTo('#files');
                // if ('commodity_img' == 'commodity_img') {
                console.log(data.result.data);
                if (1) {
                    var uploadObj = data.result.data;
                    console.log(uploadObj);
                    var newImgItem = "<div class='draggable'>";

                    newImgItem += "<img src='" + uploadObj.preview_url + "' with=100/>";
                    newImgItem += '<div class="radio_btn">';
                    newImgItem += "<input type='hidden' name='upload_ids[]' value='"+uploadObj.upload_id+"'/>";
                    newImgItem += "<input type='radio' name='first_show_img' value='"+uploadObj.file_url+"'/>";
                    newImgItem += '</div>';
                    newImgItem += '<div class="radio_btn">';
                    newImgItem += '<span><a href="javascript:;" onclick="delImage(this,' +uploadObj.upload_id+ ', \'temp\')"><b>删除</b></a></span>';
                    newImgItem += '</div>';
                    $('#commodity_img').append(newImgItem);
                }

            },
            // 上传完毕进度条，但是下次上传的时候不知道怎么关闭上次的，先不开启
            // progressall: function (e, data) {
            //     var progress = parseInt(data.loaded / data.total * 100, 10);
            //     $('#progress .progress-bar').css(
            //         'width',
            //         progress + '%'
            //     );
            // }
        });
    });

</script>
</body>
</html>

Original url: Access

Created at: 2018-09-27 21:19:16

Category: default

Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论