PHP简单实现异步多文件上传并使用Postman测试提交图片
2020-01-15 00:08
435 查看
虽然现在很多都是使用大平台的对象存储存放应用中的文件,但有时小项目还是可以使用以前的方式上传到和程序一起的服务器上,强调一下这里是小众需求,大众可以使用阿里云的OSS,腾讯的COS,七牛的巴拉巴拉xxxxxx……
Postman使用
1. 打开后,选择"body"->"form-data",key悬浮的时候选择“File”, 然后value会出现一个文件按钮。
2. 本地的上传方法测试一下打印一下。
3. 以上使用Postman测试文件上传接口就通了,下面就写一个异步上传的效果。
多文件异步上传
1. 前端
<!--图片上传--> <div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span> 图片:</label> <div class="formControls col-xs-8 col-sm-3"> <input id="img" type="file" multiple="true" οnchange="uploadImgs(this,event)"/> <div id="img_box"> <foreach name="img_upload.img_arr" item="data"> <div class="img_item"> <img id="ImgPr" class="hid" src="{$data.url}"/> <span class="del hid" οnclick="closeImg(this)">X</span> </div> </foreach> </div> <input id="hid_img" type="hidden" name="img" value="{$img_upload['img_str']}"/> </div> </div> <!--图片上传--> // 多图片上传触发事件 function uploadImgs(_this,event) { // 实例FormData var data = new FormData(); for (var i = 0; i < event.target.files.length; i++) { var files = event.target.files[i]; // 批量添加文件 data.append('file[]', files); } // 异步提交 ajaxUpload(data); } function ajaxUpload(data) { $.ajax({ url: '{$ajax_upload_url}', type: "POST", data: data, dataType: 'json', processData: false,// *重要,确认为false contentType: false, // beforeSend: function () { // console.log(11111); // }, success: function (res) { if(res.error == 1) { alert(res.msg); return; }else { console.log(res); var imgArr = $("#hid_img").val(); $.each(res.data,function(index,data) { // 追加显示 $("#img_box").append( '<div class="img_item">'+ '<img id="ImgPr" class="hid" src="'+data.path+'"/>'+ '<span class="del hid" οnclick="closeImg(this)">X</span>'+ '</div>' ); if(!imgArr) { imgArr = data.path; }else { imgArr += ","+data.path; } // 追加提交数据 //$(".formControls").append('<input id="hid_img" type="hidden" name="img[]" value="'+data.path+'"/>'); }) $("#hid_img").val(imgArr); } }, error: function (res) { alert('异步上传图片接口出错'); return; } }); }
2. PHP部分就是和同步方式一样。
/* * 图片上传 * */ public function ajaxUpload() { $upload = new \Think\Upload();// 实例化上传类 $upload->maxSize = 3145728 ;// 设置附件上传大小 3145728 $upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型 $upload->rootPath = './Uploads/'; // 设置附件上传根目录 $upload->savePath = 'repair/'; // 设置附件上传(子)目录 // 上传文件 $info = $upload->upload(); if(!$info) {// 上传错误提示错误信息 $this->ajaxReturn(array("error"=>1,"msg"=>$upload->getError(),"data"=>array())); }else{// 上传成功 $uploadFile = array(); foreach($info as $key=>$value) { $uploadFile[] = array( "path" => ltrim($upload->rootPath,'.').$value['savepath'].$value['savename'], "ext" => $value['ext'], ); } $this->ajaxReturn(array("error"=>0,"msg"=>"上传成功","data"=>$uploadFile)); } }
公众号
转载于:https://my.oschina.net/u/2456768/blog/3068780
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
- 使用jQuery.form插件实现表单异步提交+上传文件
- 使用PHP实现七牛云存储图片(文件)上传
- javascript 使用FormData实现图片/文件异步上传
- 使用ajax异步上传文件或图片(配合php)
- 使用PhpMysql实现图片文件上传下载
- php+ajax实现异步上传文件或图片功能
- 使用jQuery.form插件实现表单异步提交+上传文件
- PHP使用curl请求实现post方式上传图片文件功能示例
- 简单实现的自定义圆环进度条,可使用于文件的上传下载图片加载等地方.
- php 实现简单的图片上传
- Asp.net + js 异步上传文件的例子 - 使用iframe实现
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 一个简单实现了PHP图片上传功能
- php+html5使用FormData对象提交表单及上传图片的方法
- 一次提交实现注册或修改信息并上传图片文件
- 简单快速PHP上传文件使用方法总结
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- php+ajax实现图片文件上传实例代码