larvael ajax 上传,ajax + Laravel 多文件上传

说明

前端使用了 jQuery.form.js 实现 Ajax 表单提交，后端使用的是著名的 Laravel(5.4)进行接收、存储，支持一次选择多个文件，选择确定后立即上传，并显示上传后的链接。

gif video

路由

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

Choose files

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

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 = '

{0} ( {1} - {2} )

';

pic = pic.format( baseUrl + 'public/' + img.savedFile, img.name, img.size );

$('#div_uploadedImgs').prepend( pic );

});

}

// 为 String 类增加 format 函数

String.prototype.format = function() {

var str = this;

for (var i = 0; i < arguments.length; i++) {

var reg = new RegExp("\\{" + i + "\\}", "gm");

str = str.replace(reg, arguments[i]);

}

return str;

}

控制器(Controller)

C:\L\2017.11.15 MAMP\root\tagMoon\app\Http\Controllers\UploadCtrl.php

/**

* 接收上传文件

* @param Request $request

* @return array

*/

public function multiUploadImg( Request $request ){

// 重组数组，子函数

function reArrayFiles( $file_post ) {

$file_ary = array();

$file_count = count($file_post['name']);

$file_keys = array_keys($file_post);

for ($i=0; $i

foreach ($file_keys as $key) {

$file_ary[$i][$key] = $file_post[$key][$i];

}

}

return $file_ary;

}

$imgFiles = $_FILES['filesToUpload']; // 与前端页面中的 input name=“filesToUpload[]” 相对应

$uploadedFiles = array(); // 返回值

if(!empty($imgFiles))

{

$img_desc = reArrayFiles( $imgFiles );

$destinationPath = 'storage/uploads/'; //public 文件夹下面建 storage/uploads 文件夹

foreach( $img_desc as $img )

{

$savedFile = $destinationPath.date('YmdHis',time()).mt_rand().'.'.pathinfo( $img['name'], PATHINFO_EXTENSION );

move_uploaded_file($img['tmp_name'], $savedFile);

$img['savedFile'] = $savedFile ;

array_push( $uploadedFiles, $img );

}

}

$allowed_extensions = ["png", "jpg", "gif"];

// TODO 判断文件类型

return ['uploadedFiles' => $uploadedFiles ];

}

response

note

php : 7.1.5

Laravel : 5.4

jQuery : 3.3.1

Date : 2018.02.07

download