美文网首页
ajax图片异步上传

ajax图片异步上传

作者: 天才在战斗 | 来源:发表于2017-02-17 13:29 被阅读54次
    @extends('admin.layouts.master')
    
    {{-- 标题 --}}
    @section('title', '内容管理')
    
    {{-- CSS样式开始 --}}
    @section('styles')
        <link rel="stylesheet" href="{{ asset('common/css/bootstrap-switch.min.css') }}"> <!-- bootstrap的开关按钮样式 -->
        <link rel="stylesheet" href="{{ asset('common/css/bootstrap-select.min.css') }}"> <!-- bootstrap的下拉选择样式 -->
        <link rel="stylesheet" href="{{ asset('editor.md/css/editormd.min.css') }}"> <!-- MD编辑器的样式 -->
    
        <style type="text/css">
            #cover-placeholder {
                width: 100%;
                height: 300px;
                cursor: pointer;
            }
        </style>
    @endsection {{-- CSS样式结束 --}}
    
    {{-- 主题内容开始 --}}
    @section('content')
    
        {{-- 内容面板开始 --}}
        <div class="panel panel-default">
            {{-- 内容标题开始 --}}
            <div class="panel-heading">
                <h3 class="panel-title">新建内容</h3>
            </div> {{-- 内容标题结束 --}}
    
            {{-- 内容数据开始 --}}
            <div class="panel-body">
                {{-- 栅栏开始 --}}
                <div class="row">
                    {{-- 栅栏内容区开始 --}}
                    <div class="col-md-12">
                        {{-- 盒子开始 --}}
                        <div class="box box-solid">
                            {{-- 表单开始 --}}
                            <form role="form" method="POST" action="{{ url('content') }}" id="page-form">
                                {{ csrf_field() }}
    
                                {{-- 表单提交后, 错误信息返回 --}}
                                @include('admin.public.error')
    
                                {{-- 盒子内容主体开始 --}}
                                <div class="box-body">
    
                                    <div class="form-group">
                                        <label for="title">页面标题</label>
                                        <div class="row">
                                            <div class='col-md-6'>
                                                <input type='text' class='form-control' name="title" id='title' placeholder='标题'>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="keywords">关键字(Keywords)</label>
                                        <div class="row">
                                            <div class='col-md-6'>
                                                <input type='text' class='form-control' name="keywords" id='keywords' placeholder='请输入关键字,以#号分割,利于搜索引擎收录'>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="cover">封面(Cover)</label>
                                        <div class="row">
                                            <div class='col-md-6'>
                                                ![]({{ asset('admin/content/images/placeholder.jpg') }})
                                                <input type="hidden" name="cover" id="cover" value="{{ asset('admin/content/images/placeholder.jpg') }}">
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <label for="content">页面内容</label>
                                        <div id="editormd">
                                            {{-- MD编辑器左侧编辑开始 --}}
                                            <textarea class="editormd-markdown-textarea" style="display:none;" id="content" name="content"></textarea>
                                            {{-- MD编辑器右侧实时显示开始 --}}
                                            <textarea style="display:none;"  name="html_content"></textarea>
                                        </div>
                                    </div>
                                </div> {{-- 盒子内容主体结束 --}}
    
                                {{-- 盒子底部按钮组开始 --}}
                                <div class="box-footer">
                                    <button type="submit" id="submit-page" class="btn btn-primary">创建</button>
                                    <button type="reset" id="reset-btn" class="btn btn-warning">重置</button>
                                </div> {{-- 盒子底部按钮组结束 --}}
                            </form> {{-- 表单结束 --}}
    
                            <!-- 真正的图片上传表单 -->
                            <form id="upload-cover" enctype="multipart/form-data">
                                <input type="file" name="editormd-image-file" id="editormd-image-file" style="display: none;">
                            </form>
                        </div> {{-- 盒子结束 --}}
                    </div> {{-- 栅栏内容区结束 --}}
                </div> {{-- 栅栏结束 --}}
            </div> {{-- 内容数据结束 --}}
        </div> {{-- 内容面板结束 --}}
    
    @endsection {{-- 主题内容结束 --}}
    
    {{-- JS开始 --}}
    @section('scripts')
    
    
        <script src="{{ asset('common/js/bootstrap-switch.min.js') }}"></script> <!-- bootstrap的开关按钮js -->
        <script src="{{ asset('common/js/bootstrap-select.min.js') }}"></script> <!-- bootstrap的下拉选择js -->
        <script src="{{ asset('editor.md/editormd.min.js') }}"></script> <!-- MD的js -->
        <script src="{{ asset('common/js/MyAjax.js') }}"></script> <!-- 自封装的ajax -->
    
        <script>
    
       
    
            /** 封面图片上传 */
            $('#cover-placeholder').click(function () {
                $('#editormd-image-file').trigger('click');
            });
            $('#editormd-image-file').change(function () {
                $.ajaxSetup({
                    headers : {
                        'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '/upload_image',
                    type: 'POST',
                    data: new FormData($('#upload-cover')[0]),
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $('#cover-placeholder').attr('src', data.url);
                        $('#cover').val(data.url);
                    },
                    error: function(XMLHttpRequest) {
                        alert('err');
                        console.log(XMLHttpRequest);
                    }
                });
            });
    
    
        </script>
    @endsection {{-- JS结束 --}}
    

    相关文章

      网友评论

          本文标题:ajax图片异步上传

          本文链接:https://www.haomeiwen.com/subject/ckzkwttx.html