php + layui 上传获取进度条，异步自行上传
前端
<div class="layui-form"> <div class="layui-form-item layui-col-lg6"> <div class="layui-input-block"> <div class="layui-upload-list"> <!-- 文件选择框 --> <div class="layui-upload-drag UploadBusi"> <div lay-filter="UploadToolsOne"> <i class="layui-icon" style="font-size: 50px !important;"></i> <p>点击上传，或将文件拖拽到此处</p> </div> <span id="demo2" class="layui-form-label layui-hide" style="width: auto;"></span> <img id="demo1" class="layui-upload-img layui-hide" style="height: 107px; width: 196px;" /> </div> <br><br> <!-- 进度条样式 --> <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo"> <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div> </div> <br> <p id='d1' style="display: none;">视频地址：<span id="dz"></span></p> <p id='d2' style="display: none;">上传失败：<span id="dz2">请重新上传</span></p> </div> <div class="layui-inline"> <a href="{:url('network.img/imglog')}"> <input id="uploadjl" type="button" style="color: #fff;background-color: #40AAF0 !important;border: 1px solid #40AAF0 !important; " class="layui-btn" value="查看上传记录" /> </a> <input id="uploadPicOne" type="button" class="layui-btn layui-hide" value="点击开始上传" /> </div> </div> </div> </div>
js代码
layui.use(['form', 'upload', 'element', 'layer', 'jquery'], function () { var upload = layui.upload, $ = layui.jquery, element = layui.element, layer = layui.layer,myMsg,lodnum = '{$lodnum}'; //创建监听函数 var xhrOnProgress = function (fun) { xhrOnProgress.onprogress = fun; //绑定监听 //使用闭包实现监听绑 return function () { //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); //判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } } //执行实例 var uploadInit = upload.render({ elem: '.UploadBusi' //绑定元素 , method: 'post' , url: '填你自己的' //上传接口 , accept: 'file' , auto: false //选择文件后不自动上传 , bindAction: '#uploadPicOne' //指向一个按钮触发上传 , xhr: xhrOnProgress //传入监听函数！important , progress: function (value) { console.log("进度：" + value + '%'); if(value >= 100) { layer.close(myMsg); layer.msg('视频上传进度以及结果可以在记录里查看', { shade: [0.1,'#000'], icon: 16, time:3000 //取消自动关闭 }, function () { // window.location = "{:url('network.img/imglog')}"; $('#demo2').text(''); $('#demo2').addClass("layui-hide"); $('#uploadPicOne').addClass("layui-hide"); $('div[lay-filter="UploadToolsOne"]').removeClass("layui-hide"); }); } element.progress('demo', value + '%'); } , choose: function (obj) { $('#d2').hide(); $('#d1').hide(); $('#dz').html(''); element.progress('demo', '0%'); //预读本地文件示例，不支持ie8 var uploadFileInput = $(".layui-upload-file").val(); var uploadFileName = uploadFileInput.split("\\"); $('#demo2').text(uploadFileName[uploadFileName.length - 1]); $('#demo2').removeClass("layui-hide"); $('div[lay-filter="UploadToolsOne"]').addClass("layui-hide"); $('#uploadPicOne').removeClass("layui-hide"); } , before: function (obj) { //判断同时上传的个数，不同上传太多 $.ajax({ url: '{:url("network.img/lodnum")}', type: "post", dataType: "json", data: {}, success: function(res) { if(res == 1) { lodnum = 1; } } }); if(lodnum == 1) { myMsg = layer.msg('同时上传的文件过多，请先等待其他文件上传完毕再上传，详情可查看上传记录', { shade: [0.1,'#000'], time:4000 //取消自动关闭 }, function () { history.go(0); }); return false; }else{ myMsg = layer.msg('视频正在上传中，请耐心等待...', { shade: [0.1,'#000'], icon: 16, time:false //取消自动关闭 }); } } , done: function (res, index, upload) { //上传完毕回调 console.log(res); if (res.code == "0") { $('#dz2').html(res.msg); $('#d2').show(); }else{ $('#d1').show(); $('#dz').html(res.data[0]); } element.progress('demo','100%'); // layer.closeAll('loading'); //关闭loading layer.close(myMsg); } , error: function (res) { //请求异常回调 //layer.msg("系统异常错误！", { icon: 5, time: 2000, shift: 6 }); $('#d2').show(); element.progress('demo', '0%'); // layer.closeAll('loading'); //关闭loading layer.close(myMsg); } }); });
php接收代码，这个你们自己写接收后好了，不过有一点要做成一部的就必须添加任务列表，表你们自己创建就好，下面仅作为参考
/** * # +======================================================================== * # | - @name 七牛云上传文件 * # | - @author cq <just_leaf@foxmail.com> * # | ----------------------------------------------------------------------- * # | - code * # +======================================================================== */ public function qiniuUplodeFile2() { ignore_user_abort(); set_time_limit(0); // 七牛参数 $accessKey = env("QINIU.ak",""); $secretKey = env("QINIU.sk",""); $uid = 'admin'; $token_id = I('token'); // 需要填写你的 Access Key 和 Secret Key $obj = $this -> request -> file('file'); if($obj && $obj != NULL && $obj != 'NULL' ) { $bucket = 'cyxf-jz'; // 构建鉴权对象 $auth = new Auth($accessKey, $secretKey); // 生成上传 Token $token = $auth -> uploadToken($bucket); $status = false; if(is_array($obj)) { foreach($obj as $file) { // 要上传文件的本地路径 $filePath = $file -> getRealPath(); // 上传到七牛后保存的文件名 $key = substr(md5($file -> getOriginalName()),0,6) . rand(00000,99999) . '.' .$file -> getOriginalExtension(); // 初始化 UploadManager 对象并进行文件的上传。 $uploadMgr = new UploadManager(); // 调用 UploadManager 的 putFile 方法进行文件的上传。 list($ret , $err) = $uploadMgr -> putFile($token, $uid.'_'.$key, $filePath); if($err !== null){ continue; }else{ // 图片上传成功 $status = true; $data[] = 'https://xxx.xxx.com/'.$uid.'_'. $key; } } }else{ $file = $obj; // 要上传文件的本地路径 $filePath = $file -> getRealPath(); if($token_id) { // pf($filePath);die; $uplode_data = [ 'name' => $file -> getOriginalName(), 'create_time' => date('Y-m-d H:i:s'), 'admin_id' => $token_id , 'status' => 1 ,//上传中 ]; $id = db::name('ims_cjdc_uplode_log') -> insertGetId($uplode_data); } // 上传到七牛后保存的文件名 $key = substr(md5($file -> getOriginalName()),0,6) . rand(00000,99999) . '.' .$file -> getOriginalExtension(); // 初始化 UploadManager 对象并进行文件的上传。 $uploadMgr = new UploadManager(); // 调用 UploadManager 的 putFile 方法进行文件的上传。 list($ret , $err) = $uploadMgr -> putFile($token, $uid.'_'.$key, $filePath); if($err !== null){ if($token_id) { db::name('ims_cjdc_uplode_log') -> where(['id' => $id]) -> update(['status' => 3,'end_time' => date('Y-m-d H:i:s')]); } $this -> oyer('上传失败:' . $err); }else{ if($token_id) { db::name('ims_cjdc_uplode_log') -> where(['id' => $id]) -> update(['status' => 2,'end_time' => date('Y-m-d H:i:s'),'url' => 'https://cyxf.xfyh4k5.com/'.$uid.'_'. $key]); } // 图片上传成功 $status = true; $data[] = 'https://xxx.xxx.com/'.$uid.'_'. $key; } } $this -> oysu('上传成功',$data); }else{ Log::write('==上传失败==',$uid); $this -> oyer('未检测到上传的文件'); } }
最后就是上传完毕之后，在列表查看即可
