ajax + Laravel 多文件上传

路由

C:\L\2017.11.15 MAMP\root\tagMoon\routes\web.php

Route::post('/multiUploadImg','UploadCtrl@multiUploadImg');
Route::get('/upload', function(){
   return view('upload.main');
});

前端

C:\L\2017.11.15 MAMP\root\tagMoon\resources\views\upload\main.blade.php

截屏

before :

（极简风格 :）

after :

html

    <form id="form_uploadImg" method="post" enctype="multipart/form-data">
        <div class="file-field">
            <div class="btn btn-primary btn-sm">
                <span>Choose files</span>
                <input name="filesToUpload[]" id="input_multifileSelect" type="file" multiple>
            </div>
        </div>
    </form>
    <br><br><br>
    <div id="div_uploadedImgs"></div>

!!! 注意下面这一句，必须要有一对方括号：[]

<input name="filesToUpload[]"

js

        $(document).ready(function() {
            $('#input_multifileSelect').on('change', function(){
                var ajax_option= {
                    url: "multiUploadImg", 
                    // type : 'post', 默认是 form action
                    success: function ( data ) {
                        console.log( data );
                        showUploadedImgs( data.uploadedFiles );
                    }
                }
                $('#form_uploadImg').ajaxSubmit( ajax_option );
            });
        });
        // 显示上传的图片
        function showUploadedImgs( imgs ){
            $.each( imgs, function(index, img ) {
                var pic = '<p><img src="{0}"  alt="" /><br>{0} （ {1} - {2} ）</p>';
                pic = pic.format( baseUrl + 'public/' + img.savedFile, img.name, img.size );
                $('#div_uploadedImgs').prepend( pic );
            }