laravel5.5整合webuploader实现多文件上传功能

laravel框架-实现简单的文件上传 第一步:配置路由 找到routes目录下的web.php 配置如下 第二步:配置控制器 找到控制器目录 找到路由中指定的控制器 laravel框架,提供了方便的控制器生成方法通过artisan 打开终端,切换到laravel框架根目录,执行命令 php artisan make:controller Home\IndexContr 阅读详情

在https://github.com/fex-team/webuploader 下载webuploader并解压,
解压后放到public里面。其中我把解压缩后的文件夹改名为webuploader,放到了public/文件夹下。

将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应需要文件上传功能的视图文件夹下面
将其中的css和js文件路径进行替换 laravel5.5中我用{{URL::asset(’’)}}。
下面这里的有点长,如果需要知道哪段是自己添加的 可搜索 ‘重点’两个字,有注释的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="{{URL::asset('webuploader/css/webuploader.css')}}" />
    <link rel="stylesheet" type="text/css" href="{{URL::asset('webuploader/examples/image-upload/style.css')}}" />
</head>
<body>
<!--这段form用于提交路径和其他表单信息 重点-->

<form action="aaa" method="post">
    <input type="text" id="image_url" name="image_url" />
    {{csrf_field()}}
    <input type="submit" value="提交">
</form>
<div id="wrapper">
    <div id="container">
        <!--头部,相册选择和格式选择-->

        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里,单次最多可选300张</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{{URL::asset('webuploader/examples/image-upload/jquery.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('webuploader/dist/webuploader.js')}}"></script>
<script type="text/javascript">//重点,**其实这一段js就是upload.js粘过来的,改成自己的路径**
    var imgurl = new Array();//重点,这个是自己添加的,用于把多张图片的路径放到这个jQuery数组中然后赋值到表单提交
    (function( $ ){
        // 当domReady的时候开始初始化
        $(function() {
            var $wrap = $('#uploader'),

                // 图片容器
                $queue = $( '<ul class="filelist"></ul>' )
                    .appendTo( $wrap.find( '.queueList' ) ),

                // 状态栏,包括进度和控制按钮
                $statusBar = $wrap.find( '.statusBar' ),

                // 文件总体选择信息。
                $info = $statusBar.find( '.info' ),

                // 上传按钮
                $upload = $wrap.find( '.uploadBtn' ),

                // 没选择文件之前的内容。
                $placeHolder = $wrap.find( '.placeholder' ),

                $progress = $statusBar.find( '.progress' ).hide(),

                // 添加的文件数量
                fileCount = 0,

                // 添加的文件总大小
                fileSize = 0,

                // 优化retina, 在retina下这个值是2
                ratio = window.devicePixelRatio || 1,

                // 缩略图大小
                thumbnailWidth = 110 * ratio,
                thumbnailHeight = 110 * ratio,

                // 可能有pedding, ready, uploading, confirm, done.
                state = 'pedding',

                // 所有文件的进度信息,key为file id
                percentages = {},
                // 判断浏览器是否支持图片的base64
                isSupportBase64 = ( function() {
                    var data = new Image();
                    var support = true;
                    data.onload = data.onerror = function() {
                        if( this.width != 1 || this.height != 1 ) {
                            support = false;
                        }
                    }
                    data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                    return support;
                } )(),

                // 检测是否已经安装flash,检测flash的版本
                flashVersion = ( function() {
                    var version;

                    try {
                        version = navigator.plugins[ 'Shockwave Flash' ];
                        version = version.description;
                    } catch ( ex ) {
                        try {
                            version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
                                .GetVariable('$version');
                        } catch ( ex2 ) {
                            version = '0.0';
                        }
                    }
                    version = version.match( /\d+/g );
                    return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
                } )(),

                supportTransition = (function(){
                    var s = document.createElement('p').style,
                        r = 'transition' in s ||
                            'WebkitTransition' in s ||
                            'MozTransition' in s ||
                            'msTransition' in s ||
                            'OTransition' in s;
                    s = null;
                    return r;
                })(),

                // WebUploader实例
                uploader;

            if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {

                // flash 安装了但是版本过低。
                if (flashVersion) {
                    (function(container) {
                        window['expressinstallcallback'] = function( state ) {
                            switch(state) {
                                case 'Download.Cancelled':
                                    alert('您取消了更新!')
                                    break;

                                case 'Download.Failed':
                                    alert('安装失败')
                                    break;

                                default:
                                    alert('安装已成功,请刷新!');
                                    break;
                            }
                            delete window['expressinstallcallback'];
                        };

                        var swf = './expressInstall.swf';
                        // insert flash object
                        var html = '<object type="application/' +
                            'x-shockwave-flash" data="' +  swf + '" ';

                        if (WebUploader.browser.ie) {
                            html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
                        }

                        html += 'width="100%" height="100%" style="outline:0">'  +
                            '<param name="movie" value="' + swf + '" />' +
                            '<param name="wmode" value="transparent" />' +
                            '<param name="allowscriptaccess" value="always" />' +
                            '</object>';

                        container.html(html);

                    })($wrap);

                    // 压根就没有安转。
                } else {
                    $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
                }

                return;
            } else if (!WebUploader.Uploader.support()) {
                alert( 'Web Uploader 不支持您的浏览器!');
                return;
            }

            // 实例化
            uploader = WebUploader.create({
                pick: {
                    id: '#filePicker',
                    label: '点击选择图片'
                },
                formData: {
                    uid: 123,
                    _token:'{{ csrf_token() }}'//重点,别忘了加_token这个参数
                },
                dnd: '#dndArea',
                paste: '#uploader',
                swf: '{{URL::asset('webuploader/dist/Uploader.swf')}}',//重点,自己的路径
                chunked: false,
                chunkSize: 512 * 1024,
                server: 'image_upload',//重点,自己的路径
                // runtimeOrder: 'flash',

                // accept: {
                //     title: 'Images',
                //     extensions: 'gif,jpg,jpeg,bmp,png',
                //     mimeTypes: 'image/*'
                // },

                // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
                disableGlobalDnd: true,
                fileNumLimit: 300,
                fileSizeLimit: 200 * 1024 * 1024,    // 200 M
                fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
            });

            // 拖拽时不接受 js, txt 文件。
            uploader.on( 'dndAccept', function( items ) {
                var denied = false,
                    len = items.length,
                    i = 0,
                    // 修改js类型
                    unAllowed = 'text/plain;application/javascript ';

                for ( ; i < len; i++ ) {
                    // 如果在列表里面
                    if ( ~unAllowed.indexOf( items[ i ].type ) ) {
                        denied = true;
                        break;
                    }
                }

                return !denied;
            });

            uploader.on('dialogOpen', function() {
                console.log('here');
            });

            // uploader.on('filesQueued', function() {
            //     uploader.sort(function( a, b ) {
            //         if ( a.name < b.name )
            //           return -1;
            //         if ( a.name > b.name )
            //           return 1;
            //         return 0;
            //     });
            // });

            // 添加“添加文件”的按钮,
            uploader.addButton({
                id: '#filePicker2',
                label: '继续添加'
            });

            uploader.on('ready', function() {
                window.uploader = uploader;
            });

            /**重点,底下的uploadSuccess也是自己添加的,用来接收控制器返回的图片路径**/
            uploader.on('uploadSuccess',function(file,response){
                imgurl.push(response);//重点,控制器返回多张图片路径追加到刚开始声明的imgurl数组中
                 $("#image_url").val(imgurl);//重点,然后赋给hidden表单
                // alert(imgurl);
                });

            // 当有文件添加进来时执行,负责view的创建
            function addFile( file ) {
                var $li = $( '<li id="' + file.id + '">' +
                    '<p class="title">' + file.name + '</p>' +
                    '<p class="imgWrap"></p>'+
                    '<p class="progress"><span></span></p>' +
                    '</li>' ),

                    $btns = $('<div class="file-panel">' +
                        '<span class="cancel">删除</span>' +
                        '<span class="rotateRight">向右旋转</span>' +
                        '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),
                    $prgress = $li.find('p.progress span'),
                    $wrap = $li.find( 'p.imgWrap' ),
                    $info = $('<p class="error"></p>'),

                    showError = function( code ) {
                        switch( code ) {
                            case 'exceed_size':
                                text = '文件大小超出';
                                break;

                            case 'interrupt':
                                text = '上传暂停';
                                break;

                            default:
                                text = '上传失败,请重试';
                                break;
                        }

                        $info.text( text ).appendTo( $li );
                    };

                if ( file.getStatus() === 'invalid' ) {
                    showError( file.statusText );
                } else {
                    // @todo lazyload
                    $wrap.text( '预览中' );
                    uploader.makeThumb( file, function( error, src ) {
                        var img;

                        if ( error ) {
                            $wrap.text( '不能预览' );
                            return;
                        }

                        if( isSupportBase64 ) {
                            img = $('<img src="'+src+'">');
                            $wrap.empty().append( img );
                        } else {
                            $.ajax('{{URL::asset('webuploader/server/preview.php')}}', {//重点,自己的路径
                                method: 'POST',
                                data: src,
                                dataType:'json'
                            }).done(function( response ) {
                                if (response.result) {
                                    img = $('<img src="'+response.result+'">');
                                    $wrap.empty().append( img );
                                } else {
                                    $wrap.text("预览出错");
                                }
                            });
                        }
                    }, thumbnailWidth, thumbnailHeight );

                    percentages[ file.id ] = [ file.size, 0 ];
                    file.rotation = 0;
                }

                file.on('statuschange', function( cur, prev ) {
                    if ( prev === 'progress' ) {
                        $prgress.hide().width(0);
                    } else if ( prev === 'queued' ) {
                        $li.off( 'mouseenter mouseleave' );
                        $btns.remove();
                    }

                    // 成功
                    if ( cur === 'error' || cur === 'invalid' ) {
                        console.log( file.statusText );
                        showError( file.statusText );
                        percentages[ file.id ][ 1 ] = 1;
                    } else if ( cur === 'interrupt' ) {
                        showError( 'interrupt' );
                    } else if ( cur === 'queued' ) {
                        $info.remove();
                        $prgress.css('display', 'block');
                        percentages[ file.id ][ 1 ] = 0;
                    } else if ( cur === 'progress' ) {
                        $info.remove();
                        $prgress.css('display', 'block');
                    } else if ( cur === 'complete' ) {
                        $prgress.hide().width(0);
                        $li.append( '<span class="success"></span>' );
                    }

                    $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
                });

                $li.on( 'mouseenter', function() {
                    $btns.stop().animate({height: 30});
                });

                $li.on( 'mouseleave', function() {
                    $btns.stop().animate({height: 0});
                });

                $btns.on( 'click', 'span', function() {
                    var index = $(this).index(),
                        deg;

                    switch ( index ) {
                        case 0:
                            uploader.removeFile( file );
                            return;

                        case 1:
                            file.rotation += 90;
                            break;

                        case 2:
                            file.rotation -= 90;
                            break;
                    }

                    if ( supportTransition ) {
                        deg = 'rotate(' + file.rotation + 'deg)';
                        $wrap.css({
                            '-webkit-transform': deg,
                            '-mos-transform': deg,
                            '-o-transform': deg,
                            'transform': deg
                        });
                    } else {
                        $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
                        // use jquery animate to rotation
                        // $({
                        //     rotation: rotation
                        // }).animate({
                        //     rotation: file.rotation
                        // }, {
                        //     easing: 'linear',
                        //     step: function( now ) {
                        //         now = now * Math.PI / 180;

                        //         var cos = Math.cos( now ),
                        //             sin = Math.sin( now );

                        //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                        //     }
                        // });
                    }


                });

                $li.appendTo( $queue );
            }

            // 负责view的销毁
            function removeFile( file ) {
                var $li = $('#'+file.id);

                delete percentages[ file.id ];
                updateTotalProgress();
                $li.off().find('.file-panel').off().end().remove();
            }

            function updateTotalProgress() {
                var loaded = 0,
                    total = 0,
                    spans = $progress.children(),
                    percent;

                $.each( percentages, function( k, v ) {
                    total += v[ 0 ];
                    loaded += v[ 0 ] * v[ 1 ];
                } );

                percent = total ? loaded / total : 0;


                spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
                spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
                updateStatus();
            }

            function updateStatus() {
                var text = '', stats;

                if ( state === 'ready' ) {
                    text = '选中' + fileCount + '张图片,共' +
                        WebUploader.formatSize( fileSize ) + '。';
                } else if ( state === 'confirm' ) {
                    stats = uploader.getStats();
                    if ( stats.uploadFailNum ) {
                        text = '已成功上传' + stats.successNum+ '张照片至XX相册,'+
                            stats.uploadFailNum + '张照片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
                    }

                } else {
                    stats = uploader.getStats();
                    text = '共' + fileCount + '张(' +
                        WebUploader.formatSize( fileSize )  +
                        '),已上传' + stats.successNum + '张';

                    if ( stats.uploadFailNum ) {
                        text += ',失败' + stats.uploadFailNum + '张';
                    }
                }

                $info.html( text );
            }

            function setState( val ) {
                var file, stats;

                if ( val === state ) {
                    return;
                }

                $upload.removeClass( 'state-' + state );
                $upload.addClass( 'state-' + val );
                state = val;

                switch ( state ) {
                    case 'pedding':
                        $placeHolder.removeClass( 'element-invisible' );
                        $queue.hide();
                        $statusBar.addClass( 'element-invisible' );
                        uploader.refresh();
                        break;

                    case 'ready':
                        $placeHolder.addClass( 'element-invisible' );
                        $( '#filePicker2' ).removeClass( 'element-invisible');
                        $queue.show();
                        $statusBar.removeClass('element-invisible');
                        uploader.refresh();
                        break;

                    case 'uploading':
                        $( '#filePicker2' ).addClass( 'element-invisible' );
                        $progress.show();
                        $upload.text( '暂停上传' );
                        break;

                    case 'paused':
                        $progress.show();
                        $upload.text( '继续上传' );
                        break;

                    case 'confirm':
                        $progress.hide();
                        $( '#filePicker2' ).removeClass( 'element-invisible' );
                        $upload.text( '开始上传' );

                        stats = uploader.getStats();
                        if ( stats.successNum && !stats.uploadFailNum ) {
                            setState( 'finish' );
                            return;
                        }
                        break;
                    case 'finish':
                        stats = uploader.getStats();
                        if ( stats.successNum ) {
                            alert( '上传成功' );
                        } else {
                            // 没有成功的图片,重设
                            state = 'done';
                            location.reload();
                        }
                        break;
                }

                updateStatus();
            }

            uploader.onUploadProgress = function( file, percentage ) {
                var $li = $('#'+file.id),
                    $percent = $li.find('.progress span');

                $percent.css( 'width', percentage * 100 + '%' );
                percentages[ file.id ][ 1 ] = percentage;
                updateTotalProgress();
            };

            uploader.onFileQueued = function( file ) {
                fileCount++;
                fileSize += file.size;

                if ( fileCount === 1 ) {
                    $placeHolder.addClass( 'element-invisible' );
                    $statusBar.show();
                }

                addFile( file );
                setState( 'ready' );
                updateTotalProgress();
            };

            uploader.onFileDequeued = function( file ) {
                fileCount--;
                fileSize -= file.size;

                if ( !fileCount ) {
                    setState( 'pedding' );
                }

                removeFile( file );
                updateTotalProgress();

            };

            uploader.on( 'all', function( type ) {
                var stats;
                switch( type ) {
                    case 'uploadFinished':
                        setState( 'confirm' );
                        break;

                    case 'startUpload':
                        setState( 'uploading' );
                        break;

                    case 'stopUpload':
                        setState( 'paused' );
                        break;

                }
            });

            uploader.onError = function( code ) {
                alert( 'Eroor: ' + code );
            };

            $upload.on('click', function() {
                if ( $(this).hasClass( 'disabled' ) ) {
                    return false;
                }

                if ( state === 'ready' ) {
                    uploader.upload();
                } else if ( state === 'paused' ) {
                    uploader.upload();
                } else if ( state === 'uploading' ) {
                    uploader.stop();
                }
            });

            $info.on( 'click', '.retry', function() {
                uploader.retry();
            } );

            $info.on( 'click', '.ignore', function() {
                alert( 'todo' );
            } );

            $upload.addClass( 'state-' + state );
            updateTotalProgress();
        });

    })( jQuery );

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

文件上传的后台方法 将请求的名称改成file。

    public function  image_upload(Request $request)
    {
        if($request->hasFile('file'))
        {
        $file = $request->file('file');
        // 获取后缀名
        $ext = $file->extension();
        // 新文件名
        $saveName =time().rand().".".$ext;
        $path = $file->store(date('Ymd'));
            return json_encode($path);
         }

    }

指定文件名
如果你不喜欢自动生成的文件名,你可以使用 storeAs 方法,它接收的路径、文件名、磁盘(可选的)作为它的参数:

$path = $request->file('file')->storeAs(
    'file', $request->user()->id
);

具体上传到那个文件夹在config/filesystems.php下的 disks 下的 local 的配置,更改 root ,使用了 public_path() 辅助函数、

'disks' => [
        'local' => [
            'driver' => 'local',
            'root' => public_path('uploads'),//设置上传文件目录在public目录下的uploads目录中
        ],
    // 这里省略了其他的配置
]

上传大小类型后缀的验证、文件的命名规则等,根据自己需要进行书写。注意这里虽然是多图上传,但上传时候的循环已经被插件封装好了,不需要我们使用多图上传中的循环方式进行上传。
注意:把图片路径信息发送给后台的form表单中一定要加 {{csrf_field()}},
在upload.js里一定要加 _token:’{{ csrf_token() }}'这个参数,在formData{}里头,具体看我上面贴的upload.js里的代码

Laravel开发-laravel-upload-helper Laravel开发-laravel-upload-helper 为Laravel上载帮助程序库 立即下载

相关推荐

thinkphp3.2 webuploader较大视频文件分段上传方法demo

thinkphp3.2 webuploader较大视频文件分段上传方法demo,大视频分段上传,上传完成后又将分段视频合并成一个视频文件。

laravel8 实现webuploader文件上传,删除,页面展示,上传至七牛云

1.下载webuploader 可到官网下载 2.页面引入webuploader(js和css)文件 <script type="text/javascript" src="/static/lib/webuploader/0.1.5/webuploader.js"></script> <link rel="stylesheet" type="text/css" href="/static/lib/webuploader/0.1.5/webuploader.css"/&gt

daxianyu666的博客 1074

Laravel开发-laravel-tus-upload

Laravel开发-laravel-tus-upload 使用tus.io可恢复上载协议将文件上载到Laravel应用程序。

Laravel实现文件(图片)上传

这里以文章的封面图片上传为例 打开config/filesystems.php文件,定义上传文章图片封面本地路径 uploads/article 'disks' => [ 'local' => [ 'driver' => 'local', 'root' => storage_path('app'), ], // 文章上传封面 'article' => [

a549654065的博客 2398

laravelsimpleuploader让你在Laravel5中轻松实现文件上传功能

laravel-simple-uploader 让你在Laravel5中轻松实现文件上传并储存的功能

laravel-plupload, Laravel plupload支持处理大型文件上传.zip

laravel-plupload, Laravel plupload支持处理大型文件上传 laravel-pluploadLaravel plupload支持。Handeling区块上传。安装使用编辑器安装composer require jildertmiedema/laravel-plupload将提供

Laravel 使用webuploader实现图片异步上传

首先确定是否套用模版 使用模版就无须引用JQ 若单独进行操作 先到菜鸟手册引入JQ view视图 @extends('admin.common.main') @section('css') {{-- webuploader上传样式 --}} <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script type="text/.

SunNang的博客 744

webuploader单文件多文件上传

webuploader单文件多文件上传 可以上传视频 可以上传单选图片 可以上传多选图片

laravel + webupload + 阿里云OSS直传分享

最近在做管理后天时,要上传一些app包文件,这些包大小都在几百兆内,普通上传,对服务器压力不小,而且很耗服务器资源。后来发现阿里云可以做web直传,所以,今天我就来记录下过程。 附: 阿里云web直传OSS文档 阿里云OSS直传示例(php版) 这示例文档已经说得很清楚,你唯一要做的就是下载PHP示例包,继承到自己项目根目录中,测试下示例是否能上传文件到oss,然后再想办法集成到webupload...

Jenny的博客 2290

AD18 PCB模块的Copy

在PCB布局时,时常会将元器件先分模块进行排布,最后才会进行总体的布局,在局部布局的时候,想要移动一个模块的器件总是很麻烦,需要选中全部才能进行移动,有些时候还有选漏的情况,所以会将局部布局的模块把它看做一个整体进行移动,效果如下,元件,布线,铜皮,过孔以及元件编号的位置摆放都和源模块一模一样。4、再选中需要复用的模块内的元件,按照第3步的顺序排序,粘贴刚刚复制的Channel Offset参数。在PCB布局时,有多个模块原理图是一模一样的情况,我们可以只画一个模块,之后灵活应用模块,进行copy。

qq_53859658的博客 3239

蓝牙抓包实战:用nrf52840和Wireshark解析广播包与SCAN_RSP的完整流程

本文提供了一份完整的蓝牙抓包实战指南,详细介绍了如何使用nRF52840 Dongle和Wireshark捕获并解析蓝牙广播包与SCAN_RSP。内容涵盖环境搭建、广播事件分析、数据包结构拆解以及常见连接问题的调试技巧,旨在帮助开发者和物联网工程师深入理解BLE底层通信,提升硬件调试能力。

weixin_29279153的博客 495

laravel本地项目上传服务器,Laravel5.*实现文件本地上传方法

前端界面上传表单,需要解决csrf验证问题:Laravel后端存储数据publicstaticfunctionupload(){$file=Input::file('myfile');if($file->isValid()){//检验一下上传的文件是否有效$clientName=$file->getClientOriginalNam...

weixin_31328141的博客 513

遥感图像处理实战:DOTA数据集旋转框转YOLO格式全流程解析(附代码)

本文详细解析了将DOTA遥感数据集的旋转框标注转换为YOLO格式的全流程。针对遥感图像中物体朝向任意性的特点,文章重点阐述了将旋转框转换为外接水平框的数学原理与代码实现,并提供了批量转换脚本和可视化验证方法,帮助开发者高效处理数据,为基于YOLO的遥感目标检测项目奠定基础。

weixin_29082143的博客 398

6步实现laravel图片上传

$images=Request::file('uploadfile'); //1、使用laravel 自带的request类来获取一下文件         $filedir="upload/article-img/"; //2、定义图片上传路径         $imagesName=$images->getClientOriginalName();

Gump的博客 6863

TouchGFX在STM32上的移植全过程:超详细版指南

深入讲解将TouchGFX集成到STM32开发环境的每一步,涵盖配置、驱动适配与UI调试。无论是初学者还是进阶开发者,都能快速掌握TouchGFX在嵌入式平台的应用技巧。

weixin_42443533的博客 600

自动化专业与嵌入式

在学生时期,我是一个典型的学渣,所以只能选择电气工程、汽修、数控之类的专业。而那些高分的则可以选择计算机,电子商务,通信之类的。这些专业看起来像是蓝领和白领的分界,至今我都觉得这种制度是不人性化的。专业这块根据学生的爱好去选择是最好的,毕竟有兴趣才会”真心”去学习。谁说学渣就学不会编程、学不会金融对吧?不过也罢,在学校能学到东西的毕竟是少数,最近有些大学生发了他们的课程表给我看了下。我感觉学的太广了,什么单片机、c语言、java之类的,导致很多学生学完以后还是很迷茫,不知道自己专业到底是从事什么方向的。所以

m0_71017841的博客 3589

laravel 关于安装七牛云后,删除图片报错问题解决方案

laravel 关于安装七牛后,删除图片报错问题解决方案 用laravel框架安装七牛云安装包的,再删除图片时多少会遇到删除图片报错的问题,我也是通过同事的经验将此方法分享给大家,希望能够帮助到你们。 解决方法: ①打开项目根目录的/vendor/qiniu/php-sdk/src/Qiniu/Storage/BucketManager.php这个BucketManager.php文件,大约590行 ②把delete($bucket, $key)防范里面的内容改变下 //原来的 public

qq_38681017的博客 653

9.27华为OD机试真题 新系统 - 均衡调度 (Java/Py/C/C++/Js/Go)

9.26华为OD机试真题 新系统 - 均衡调度 (Java/Py/C/C++/Js/Go)

算法大师! 503

laravel图片和文件的上传

https://www.jianshu.com/p/51c290b56b0f $file = $request::file('picfile'); 或者 $request = $request::all(); //注意先先取全,得到的是数组 $file = $request['picfile']; 1.前端页面 {{--<form a...

陌潇 8748

【图论】系列(七)图论的中心性度量方法及重要性评价指标

图论中的中心性度量方法是用来衡量图中各个节点(或顶点)相对重要性的指标。

qq_30066733的博客 1077

【数据集】中国陆地生态系统通量观测网 ChinaFLUX

【数据集】中国陆地生态系统通量观测网 ChinaFLUX

WW、forever的博客 193

laravel7中的webupload单文件上传

基本配置去手册看 <div id="uploader-demo"> <div id="filePicker">选择图片</div> <input type="hidden" name="pic" id="pic"> <img id="img" src="#" style="width: 50px"> </div> js代码 // 初始化Web Uploader var uploader = WebUpl

that_were_you的博客 218

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

laravel框架使用webuploader token问题

在使用像webuploader 上传组件 后端需要token 验证的问题 如 laravel 可以在创建web uploade实例的时候这样写: var uploader = WebUploader.create({ auto: true, // 选完文件后,是否自动上传 formData: { // 这里的token是外部生成的长

一个入门程序猿的博客 2369

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Laravel 5.2 利用 Uploadify 插件实现上传图片

一.HTML部分 <!-- 引入CSS、JS --> link rel="stylesheet" type="text/css" href="{{asset('org/uploadify/uploadify.css')}}"> script type="text/javascript" src="{{asset('admin/js/jquery.js')}}">s

mr_legeek的博客 2610

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

laravel 实现WebUploader 异步上传

将你放到public下的webuploader文件夹中的examples/imageupload/index.html复制到在对应需要文件上传功能的视图文件夹下面 第一步 先创建表单 <div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋图片:</label>

lh25946的博客 423
上一篇: 油猴脚本的使用和安装
下一篇: laravel5.5通过yansongda/pay组件实现支付宝电脑网站支付
苦艾酒丶
博客等级 码龄9年 41粉丝 99原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值