ArcherWong博客
首页
博客
批量上传图片(jQuery-File-Upload使用)
作者:ArcherWong
分类:javascript
时间:2019-01-03 21:35:07
阅读:357
# 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个文件,想要单独处理每个文件很麻烦,所以我直接每次自动上传,并且都是上传所有选中的文件。 **上传完成后效果** 
标签:
上一篇:
form表单提交和重置小结
下一篇:
letsencrypt证书-管理工具certbot
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
golang笔记---关联数组(map)
letsencrypt证书-管理工具certbot
centos7.3配置guacamole
golang笔记---template模板语法
nginx笔记-proxy_cache缓存详解
友情链接
node文件
laravel-vue
ArcherWong的博客园