PHP简单实现异步多文件上传并使用Postman测试提交图片

  虽然现在很多都是使用大平台的对象存储存放应用中的文件,但有时小项目还是可以使用以前的方式上传到和程序一起的服务器上,强调一下这里是小众需求,大众可以使用阿里云的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" onchange="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" onclick="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" onclick="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://www.cnblogs.com/zerofc/p/11123821.html

时间: 2024-11-05 17:25:42

PHP简单实现异步多文件上传并使用Postman测试提交图片的相关文章

简单利用filetype进行文件上传

对于文件上传大家都很熟悉了,毕竟文件上传是获取webshell的一个重要方式之一,理论性的东西参考我的另一篇汇总文章<浅谈文件解析及上传漏洞>,这里主要是实战补充一下理论内容--filetype漏洞! filetype漏洞主要是针对content-type字段,主要有两种利用方式:    1.先上传一个图片,然后将content-type:image/jpeg改为content-type:text/asp,然后对filename进行00截断,将图片内容替换为一句话木马. 2.直接使用burp抓

SpringMVC结合Ajaxfileupload异步多文件上传至远程服务器

<input type="file" id="playeraddress" name="playeraddress" /> <input type="file" id="cover" name="cover" /> //这里就是两个file id自己定义 $.ajaxFileUpload({     url : web_path+'upload/upload.do

通用的js异步ajax文件上传函数

无需表单,直接加点击事件即可, caseimg为input表单,image为图片显示 function upimage() { $('#form-upload').remove(); $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file"

也说文件上传之兼容IE789的进度条---丢掉flash

最近在整理前端常用到的一些组件,像分页(get/post两类).下拉框(下拉单选/下拉多选/省市区联动).模态框等:当然还有文件上传啦,如果只考虑用HTML5的话,前端方面的工作,那家伙老简单了,分分钟搞定,不就是验证,显示文件信息,加个进度条,回调下么:好吧,说得简单而已,自己动手完整的实现一遍试试:对于PC端的前端而言,大多时候可能还得顾及一下IE7+:那么问题就来了,IE789都不支持H5的file API,so,让我们一起BSIE吧! 上传显示文件类型.大小.文件名,这些百度立马出结果,

ASP.NET实战之文件上传

时下比较流行的云盘,比如百度云盘,360云盘,金山快盘等等,相信大家都用过.云盘是互联网存储工具,是互联网云技术的产物,是通过互联网为企业和个人提供数据信息的存储,读取以及下载等服务,其最大的两个特点是安全稳定和海量存储.我的笔记本硬盘只有500G,有一天当我发现我的6个硬盘分区中红了4个,我就开始往我的百度云盘上"搬东西",这个搬东西就是我们今天要谈到的"文件上传". 其实文件上传在互联网应用和网站开发中十分常见,我们在各类社交软件中使用的"照片上传&q

文件上传~Uploadify上传控件~续(多文件上传)

对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下 列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进

selenium+python自动化77-autoit文件上传【转载】

前言 关于非input文件上传,点上传按钮后,这个弹出的windows的控件了,已经跳出三界之外了,不属于selenium的管辖范围(selenium不是万能的,只能操作web上元素).autoit工具处理windows的控件窗口是专业的,所以这个需借助AutoIt来解决了. 一.环境准备 1.可以autoit官网上下载,安装 http://www.autoitscript.com/site/ 2.下载到本地后傻瓜式安装,安装完之后在应用程序找到这个Autoit v3 3.AutoIt里面几个菜

selenium+python自动化77-autoit文件上传

前言 关于非input文件上传,点上传按钮后,这个弹出的windows的控件了,已经跳出三界之外了,不属于selenium的管辖范围(selenium不是万能的,只能操作web上元素).autoit工具处理windows的控件窗口是专业的,所以这个需借助AutoIt来解决了. 一.环境准备 1.可以autoit官网上下载,安装 http://www.autoitscript.com/site/ 2.下载到本地后傻瓜式安装,安装完之后在应用程序找到这个Autoit v3 3.AutoIt里面几个菜

开源项目OkHttpPlus——支持GET、POST、UI线程回调、JSON格式解析、链式调用、文件上传下载

OkHttpPlus介绍 项目地址:https://github.com/ZhaoKaiQiang/OkHttpPlus 主要功能:OkHttp封装,支持GET.POST.UI线程回调.JSON格式解析.链式调用.小文件上传下载及进度监听等功能 为什么要写这么一个库呢? 首先,是因为OkHttp在4.4之后已经作为底层的Http实现了,所以OkHttp这个库很强大,值得我们学习. 其次,在我看来,OkHttp使用起来不如Volley方便,OkHttp的回调都是在工作线程,所以如果在回调里面操作V