jquery file upload是一款实用的上传文件插件
一：准备相关js文件
jquery file upload 下载地址：https://github.com/blueimp/jQuery-File-Upload
二、导入js文件
注意：js文件引入的先后顺序不可以乱
|
1 2 3 4 5 6 7 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- jquery file upload相关js --> <script src="js/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script src="js/jquery.fileupload-process.js"></script> <script src="js/jquery.fileupload-validate.js"></script> |
三、涛哥项目中使用的例子
1、前端代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="form-group"> <label class="col-sm-2 control-label">模板缩略图</label> <div class="col-sm-6"> <input name="thumbnail" disabled id="thumbnail" type="text" class="form-control"> </div> <div class="col-sm-4"> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>上传模板缩略图</span> <input id="upload_thumbnail" type="file" name="files[]"> </span> </div> </div> <div class="form-group"> <div id="progress" class="progress col-sm-offset-2 col-sm-5"> <div class="progress-bar progress-bar-success"></div> </div> <div id="message" class="col-sm-5" style="color:#FF0000;font-size:16px"></div> </div> <div class="hr-line-dashed" style="margin-top:30px"></div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <a class="btn btn-primary" id="save">保存模板信息</a> </div> </div> |
js部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
//上传缩略图 $('#upload_thumbnail').fileupload({ url: '/bannermaker/upload', dataType: 'json', maxNumberOfFiles : 1, add: function (e, data) { var acceptFileTypes = /(jpe?g|png)$/i; var name = data.originalFiles[0]["name"]; var index = name.lastIndexOf(".")+1; var fileType = name.substring(index,name.length); if(!acceptFileTypes.test(fileType)){ alert("上传文件类型不对！"); return false; } var size = data.originalFiles[0]["size"]; //缩略图不能大于2MB if(size > (2*1024*1024)){ alert("上传文件超过最大限制！"); return false; } //验证缩略图是否是正方形并且宽大于160px var reader = new FileReader(); var baseImg = data.originalFiles[0] reader.onload = function (e) { //加载图片获取图片宽度和高度 var image = new Image(); image.onload = function () { var width = image.width; var height = image.height; if(width!=height){ alert("上传的缩略图必须是正方形！"); data.abort(); } if(width<160){ alert("上传的缩略图宽度不能小于160px！"); data.abort(); } } image.src = e.target.result; }; reader.readAsDataURL(baseImg); data.submit(); }, done: function (e, data) { $('.progress .progress-bar').css('width','0%'); $('#message').addClass('col-sm-offset-2'); $('#message').show(); if(data.result.status){ $('#thumbnail').val(data.result.url); $('#message').text('上传缩略图成功！'); }else{ $('#message').text('上传缩略图失败！'); } }, progressall: function (e, data) { $('#message').hide(); var progress = parseInt(data.loaded / data.total * 100, 10); $('.progress .progress-bar').css( 'width', progress + '%' ); }, fail: function (e, data) { $('.progress .progress-bar').css('width','0%'); $('#message').text('上传缩略图失败！'); } }); |
后端php部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * 上传缩略图及svg到oss * @param Request $request * @return bool|string * https://www.phpnote.cc */ public function upload(Request $request) { $file = $request->file('files')[0]; if($request->hasFile('files') && $file->isValid()){ $path = pathinfo($file->getClientOriginalName(), PATHINFO_EXTENSION); $filename = md5(time().$file->getClientOriginalName()).'.'.$path; try{ //将图片上传至OSS $oss_filename = 'bannermaker/'.date('Ymd', time()).$filename; Oss::uploadImg2Oss($file->getPathname(), $oss_filename); $oss_path = config('cdn.url').$oss_filename; return response()->json(['status'=>true, 'url'=>$oss_path]); }catch (FileException $e){ return response()->json(['status'=>false]); } }else{ return response()->json(['status'=>false]); } } |
更多待涛哥实践总结分享…
转载请注明：PHP笔记 » jQuery file upload文件上传插件示例
