Modal框通过ajaxform上传文件及各种ajax使用方法，初试牛刀

本文链接：https://blog.youkuaiyun.com/yhq1988923/article/details/52805516

本文介绍了如何在 Modal 框中利用 AJAX 和 form 提交实现文件上传，结合 ThinkPHP 框架和 Bootstrap 前端框架。通过分析问题和调试，最终解决了文件上传至不同文件夹的难题，同时也涉及到前端数据传递到数据库的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次写博客，欢迎指点。

开发环境和开发工具是：apache，mysql，php，使用thinkphp框架，和bootstrap前段框架，讲的主要是前段的html和js，jquery相关，然而我是初学阶段，请多包涵。

公司要求开发一个后台管理系统，包括的无非就是增删改查操作，目前大部分逻辑简单的功能已经实现，剩下一个添加计划的功能。

这个添加计划功能要求：

① 每个计划分为不同的天数，天数不固定；

② 每天分为几个不同的步骤，步骤不固定；

主要是以上两点，难点在不固定性，和前端每步一传值得设计上。

因为计划每步都包含图片和视频，而传递大文件和较多文件时，服务器有时会发生超时或者其他一些不可预见的错误，因此我这里不采用集中填写数据，通过hide(),show()方法来更改当前输入栏或用html()方法生成输入栏的方式解决这个问题。

想要达到一步一传值的目的，大概最普遍的就是ajax了，那么好了，引入jquery.js,bootstrap.js,bootstrap.css文件，使用bootstrap的原因是我们需要使用到模态框(Modal)。

想给大家看下我的前段吧！

这个是点击添加之后的modal，如图可以看到需要添加各种数据和两张图片，上方数据用$.ajax()可以直接传递到后台存储，关键是图片怎么办？

上传图片时，我们的方法都是通过读取$_FILES里的name和其他一些参数，使用框架的upload类进行文件的上传工作，那么也就是说，我们只要访问到了upload类就能实现上传了吧？

做一个测试吧，实践是检验真理的唯一标准。

首先我做一个form表单：

 <form id="form" action="../manage/uploadphoto" enctype="multipart/form-data">
                  <div class="upday" style="width:49%;height:200px;border-radius: 5px;border:1px solid #ccc;margin-top:5px;float: left">
                    <input type="text" size="20" name="upfile1" id="upfile1" style="display: none">  
                    <input type="button" value="选择图片" οnclick="path1.click()" style="border:1px solid #ccc;background:#fff;color: #131313">  
                    <input type="file" id="path1" style="display:none" οnchange="upfile1.value=this.value">
                      <p style="margin-left: 46px;margin-top: -30px;color:#999">请上传尺寸为750*426px的图片</p>
                  </div>
                  <div class="upday" style="width:49%;height:200px;border-radius: 5px;border:1px solid #ccc;margin-top:5px;float: left;margin-left: 5px">
                    <div class="upfile">
                      <input type="text" size="20" name="upfile2" id="upfile2" style="display: none">  
                      <input type="button" value="选择图片" οnclick="path2.click()" style="border:1px solid #ccc;background:#fff;color: #131313">  
                      <input type="file" id="path2" style="display:none" οnchange="upfile2.value=this.value">
                    </div>
                      <p style="margin-left: 46px;margin-top: -30px;;color:#999">请上传尺寸为750*260px的图片</p>
                  </div>
                  </form>

以上是我的源代码了，有点CSS在里边请见谅！

可以看到我把图片放在了一个form表单中，通过表单的提交来调用manage控制器的uploadphoto方法，然后来看看uploadphoto方法，这里我直接用的thinkphp的upload类

public function uploadphoto(){

                $upload = new \Think\Upload();// 实例化上传类
                $upload->maxSize   =     $_FILES[