jquery上传文件和TP6接收流程

72 阅读1分钟

1.HMTL

<form id="jingdian_form">
     <input type="file" placeholder="用于展示的小图片" id="suoluetu" />
     <button id="jingqu_add_submit" class="button1">添加</button>
</form>

2.Jquery

$(document).ready(function () {

  /*1.表单提交*/
  $("#jingdian_form").submit(function (e) {
    e.preventDefault();
    /*获取表单数据*/
    var a = $("#name").val();
    //创建文件对象
    const formData = new FormData();
    // 添加文件(假设存在文件输入框)
    const fileInput = document.getElementById('suoluetu');
    formData.append('file', fileInput.files[0]);

    $.ajax({
      url: 'add_jingdian_post.html',
      type: 'POST',
      data: formData,
      contentType: false,
      //注意processData参数必须设置为false
      processData: false,
      success: function (response) {
        console.log(response);
      },
      error: function (error) {
        const newPageContent = error.responseText;
        const newWindow = window.open('', '_blank');
        if (newWindow) {
          newWindow.document.write(newPageContent);
          newWindow.document.close();
        } else {
          console.error('无法打开新窗口,请检查浏览器设置。');
        }

      }
    });
  })
});

3.TP6路由

设置route/app.php,添加规则:

Route::rule('admin/add_jingdian_post', 'admin0523/add_jingdian_post');

注意:这里没有.html扩展名。

4.TP6后端页面

<?php
namespace app\controller;
class Admin0523 extends BaseController
{

    /*添加景点提交 */
    public function add_jingdian_post()
    {
        session_safe();
        $file = $this->request->file('file');
        dump($file);
    }

}