路由
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 );
}