tp5多文件异步上传+七牛云+预览图
作者:互联网
html 前端页面
<form enctype="multipart/form-data" id="form"> <input type="file" name="file" id="file" multiple="multiple"><br><br> <input type="button" value="提交"> </form> <div class="picDis" style="display:none;"> </div> </body> </html> JS代码 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script> $('#file').change(function(){ var formData = new FormData($('form')[0]); for(var i = 0;i < ($(this)[0].files).length;i++) { formData.append('file[]',$(this)[0].files[i]); } $.ajax({ url:'/test/test/img', type:'POST', data:formData, contentType: false, processData: false, success:function(res) { console.log(res); return false; if(res.code == 200) { var str = ''; $('.picDis').css('display','block'); $.each(res.data,function(k,v){ str += "<a href='"+v+"'><img src='"+v+"' height='200px' width='150px'></a>"; }) $('.picDis').html(str); } } }) }) </script>
php代码
public function img(Request $request) { //接收文件上传的值 $file = $_FILES['file']; /* { name: ['1.jpg', '2.jpg'], type: ['image/jpeg', 'image/jpeg'], tmp_name: ['C:\\....', 'C:\\.....'], error: [0, 0], size: [291730, 259200] } */ //用来处理文件上传值的数组 $arr = []; foreach($file as $key=>$val) { foreach($val as $k=>$v) { $arr[$k][] = $v; } } /* 0 : ["1.jpg", "image/jpeg", "C:\\...", 0, 291730] 1 : ["2.jpg", "image/jpeg", "C:\\...", 0, 259200] */ //之后用来当做键名的数组 $keys = ['name','type','tmp_name','error','size']; //$keys=>$arr 键值对数组 $data = []; foreach($arr as $val) { $data[] = array_combine($keys,$val); } /* 0: {name: "1.jpg", type: "image/jpeg", tmp_name: "C:\\...", error: 0, size: 291730} 1: {name: "2.jpg", type: "image/jpeg", tmp_name: "C:\\...", error: 0, size: 259200} */ //入库数组 $img = []; //返回前端的文件链接数组 $image = []; //上传七牛云业务逻辑 $accessKey = ''; //去控制台的秘钥管理拿AK $secretKey = '';//去控制台的秘钥管理拿SK //七牛云桶名,根据自己实际进行填写 $bucket = '...'; $auth = new Auth($accessKey, $secretKey); // 生成上传Token $token = $auth->uploadToken($bucket); // 构建 UploadManager 对象 $uploadMgr = new UploadManager(); foreach($data as $val) { //本地的文件路径 $localFilePath = $val['tmp_name']; //截取文件后缀名 $suffix = strtolower(substr($val['name'],strpos($val['name'],'.'))); //生成一个唯一的文件名称,重命名 (md5加密原文件名+秒+随机数) $fileName = md5($val['name']) . date('s',time()) . rand(1,9999999); $fileName .= $suffix; $image[] = '....../'.$fileName; // 调用 UploadManager 的 putFile 方法进行文件的上传。 list($ret, $err[]) = $uploadMgr->putFile($token, $fileName, $localFilePath); $img[] = ['img'=>'....../'.$fileName]; } //判断文件上传七牛云是否出错 foreach($err as $val) { if($val != null) { return returnJson(500,'文件上传失败',[]); } } $db = new Img(); $result = $db->saveAll($img); if($result) { return returnJson(200,'文件上传成功',$image); } else { return returnJson(403,'文件上传失败',[]); }
标签:七牛云,name,val,预览,image,img,jpeg,tp5,上传 来源: https://blog.csdn.net/J2778322217/article/details/121490100