页面引入webuploads

<script type="text/javascript" src="{{ asset('js/webuploader.min.js') }}"></script>

$(function(){
        var up_info = new Array();
        up_info['box'] = 'fileID_front';                                            //图片容器ID
        up_info['image'] = 'front';                                             //图片地址input的ID
        up_info['thumbnailWidth'] = 150;                                        //预览缩略图宽度
        up_info['thumbnailHeight'] = 150;                                       //预览缩略图高度
        up_info['swf'] = "/swf/Uploader.swf";                                   //swf文件地址
        up_info['server'] = "{{ route('upload_file',['folder'=>'head_img']) }}";    //图片上传控制器路由，路由带值为图片存储文件夹名
        up_info['pick'] = 'filePicker_front';                                        // 图片上传按钮ID
        up_info['fileSingleSizeLimit'] = 5 * 1024 * 1024;                      // 图片上传最大大小，单位：b(字节)
        upload(up_info);
        function upload(info) {
            // 初始化Web Uploader
            var $list=$("#"+info['box']+"");   //这几个初始化全局的百度文档上没说明，好蛋疼。
            var $image=$("#"+info['image']+"");   //保存图片的input。
//        var $btn =$("#ctlBtn");   //手动上传需要这个按钮 -- 开始上传
            // 优化retina, 在retina下这个值是2
            var ratio = window.devicePixelRatio || 1;
            // 缩略图大小
            var thumbnailWidth = info['thumbnailWidth'] * ratio;
            var thumbnailHeight = info['thumbnailHeight'] * ratio;
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: info['swf'],
                // 文件接收服务端。
                server: info['server'],
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#'+info['pick']+'',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png,image/bmp'
                },
                fileSingleSizeLimit : info['fileSingleSizeLimit']    // 验证单个文件大小是否超出限制, 超出则不允许加入队列。 5 M
            });
            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item">' +
                                '<img>' +
//                            '<div class="info">' + file.name + '</div>' +
                                '</div>'
                        ),
                        $img = $li.find('img');
                $list.empty();
                // $list为容器jQuery实例
                $list.append( $li );
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }
                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file,response ) {
                $image.val(response['_raw']);
                var face = $($image[0]).attr('value');
                $( '#'+file.id ).addClass('upload-state-done');
            });
            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');
                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }
                $error.text('上传失败');
            });
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });
        }
        //身份证上传
    });