jQuery-File-Upload

jQuery-File-Upload是一个jquery下的ajax文件上传插件，支持批量上传，github地址：https://github.com/blueimp/jQuery-File-Upload。

官方有个基本的使用教程，如果没有特别需求可以参考这个简单使用

https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

官方的demo地址，感兴趣可以对照源码分析下，demo分别对应源码basic-plus.html，basic.html等文件
https://blueimp.github.io/jQuery-File-Upload/

批量上传图片

需要引入的css和js文件

<link rel="stylesheet" href="{{asset('js/jquery-fileupload/css/jquery.fileupload.css')}}"><link rel="stylesheet" href="{{asset('js/jquery-fileupload/css/jquery.fileupload-ui.css')}}">

<script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.ui.widget.js')}}"></script><script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.fileupload.js')}}"></script><script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.iframe-transport.js')}}"></script>

下载地址 https://github.com/blueimp/jQuery-File-Upload/releases ，下载后解压，将上面需要的文件放入项目相应目录。

html代码

<meta name="csrf-token" content="{{ csrf_token() }}"> ?

<form id="submit_form" action="{{route('work.store')}}" method="post"> ???{{csrf_field()}} ???<table class="add_tab"> ???????<tbody> ???????<tr> ???????????<th>图片：<a id="start"></a></th> ???????????<td> ???????????????<input id="fileupload" type="file" name="files[]" data-url="{{route('batch-upload', ['works'])}}" multiple> ???????????????<input id="file_path" type="hidden" name="file_path"> ???????????</td> ???????</tr> ???????<tr> ???????????<th></th> ???????????<td> ???????????????<div> ???????????????????<div id="progress" style="width:50%;float:left"> ???????????????????????<div class="bar" style="width: 0%;height:18px;background:green;"></div> ???????????????????</div> ???????????????????<div id="upload_finish" style="display:none;float:left;margin-left:15px;height:18px;line-height:18px;">上传完成</div> ???????????????</div> ???????????????<div style="clear:both"></div> ???????????????<div id = "upload_list"> ???????????????</div> ???????????</td> ???????</tr> ???????<tr> ???????????<th></th> ???????????<td> ???????????????<input type="submit" value="提交"> ???????????????<input type="button" class="back" onclick="history.go(-1)" value="返回"> ???????????</td> ???????</tr> ???????</tbody> ???</table></form>

实现的js代码

 ???????$(function () { ???????????$('#fileupload').fileupload({ ???????????????dataType: 'json', ???????????????singleFileUploads: false, ???????????????beforeSend: function(xhr) { ???????????????????$('#upload_finish').hide(); ???????????????????$('#progress .bar').css( ???????????????????????'width', ???????????????????????'0%' ???????????????????); ???????????????????xhr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content')); ???????????????}, ???????????????progressall: function (e, data) { ???????????????????var progress = parseInt(data.loaded / data.total * 100, 10); ???????????????????$('#progress .bar').css( ???????????????????????'width', ???????????????????????progress + '%' ???????????????????); ???????????????????if (progress == 100) { ???????????????????????$('#upload_finish').show(); ???????????????????} ???????????????}, ???????????????done: function (e, data) { ???????????????????var files = data.result.data ???????????????????for (i in files) { ???????????????????????$('#upload_list').append('<img src="' + files[i]+ '" alt="" style="max-width: 350px; max-height:100px;margin:5px;">'); ???????????????????} ???????????????????$('#file_path').val(files); ???????????????} ???????????}); ???????});

laravel后台处理

Route::post('batch-upload/{dir_name}', 'CommonController@batchUpload')->name('batch-upload');

 ???public function batchUpload(Request $request, $dir_name) ???{ ??????????try{ ???????????$file_path = []; ????????????if($request->hasFile('files')){ ???????????????$files = $request->file('files'); ???????????????foreach ($files as $file) { ???????????????????$entension = $file->getClientOriginalExtension(); ???????????????????$new_name = date('YmdHis').mt_rand(10000,99999).'.'.$entension; ???????????????????$file_dir = public_path().'/uploads/'.$dir_name; ???????????????????$file->move($file_dir,$new_name); ???????????????????$file_path[] = '/uploads/'.$dir_name.'/'.$new_name; ???????????????} ??????????????} ??????????????return $this->success($file_path);; ???????}catch(\Exception $e){ ???????????return $this->error('文件上传失败,请刷新后重试'); ???????} ??????}

注意：

• 1、ajax调用的时候需要考虑csrf问题，

html中加入头信息

<meta name="csrf-token" content="{{ csrf_token() }}"> ???

beforeSend: function(xhr) { ???xhr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));},

• 2、一次上传多个文件，而不是循环调用

singleFileUploads: false,

上面配置是为了一次上传多个文件，否则的话是当你传入多个文件的时候会循环调用你的后台上传api。并且我在跑官方文档的时候发现，一次上传n个图片，会触发n次add回调，并且每次回掉获取data.files对象都是所有的n个文件，想要单独处理每个文件很麻烦，所以我直接每次自动上传，并且都是上传所有选中的文件。

上传完成后效果

批量上传图片(jQuery-File-Upload使用)

原文地址：https://www.cnblogs.com/redirect/p/10066548.html