ajax上传文件，通过FromData把数据传给后端

最新推荐文章于 2022-08-09 23:15:05 发布

poki-Q

最新推荐文章于 2022-08-09 23:15:05 发布

阅读量663

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/lycsdn/article/details/105035572

版权

PHP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加商品</title>
</head>
<body>
    <form>
        <!-- <p><label for="">选择分类</label><input type="text" name="typeid" id="typeid" ></p> -->
        <p>
            <select name="typeid" id="">
                <option value="1">手机</option>
                <option value="2">笔记本</option>
            </select>
        </p>
        <p><label for="">商品名称</label><input type="text" name="name"></p>
        <p><label for="">价格</label><input type="text" name="price"></p>
        <p><label for="">库存</label><input type="text" name="stock"></p>
        <p><label for="">图片</label><input type="file" name="img"></p>
        <p><textarea name="desc" id="" cols="30" rows="10"></textarea></p>
        <button>提交</button>
    </form>
</body>
<script src="../../lib/jquery/dist/jquery.min.js"></script>
<script src="../Include/js/add.js"></script>
<script>

$('form').submit(function (e) {
            var formData = new FormData(this);
            $.ajax({
                url:"../Controller/add.php",
                type:"post",
                data:formData,
                processData:false,
                contentType:false,
                success:function(res){
                    console.log(res);
                }
            })
            e.preventDefault();

        })
</script>
</html>

后端代码
var formData = new FormData(this);
把 formData 传给后端，数据和文件都是通过表单标签的 name 属性值获取
1. 接收表单文本数据
$typeid = $_POST[‘typeid’];
2. 接收文件
$_FILES[‘img’]

<?php

    // 数据库连接信息
    header("content-type:text/html; charset=utf-8");
    $servername = "localhost";
    $username = "root";
    $password = "123456";
    $dbname = "emall";
    
    // 1. 获取表单传来的数据
    $typeid = $_POST['typeid'];
    $name = $_POST['name'];
    $price = $_POST['price'];
    $stock = $_POST['stock'];
    $desc = $_POST['desc'];
    

    // 2. 上传图片
    // 文件前缀
    $prefix = 'goods_';

    // 获取文件后缀
    $temp = explode('.', $_FILES['img']['name']);  // 切割字符串
    $suffix = end($temp);  // 返回数组最后一个元素

    // 文件名
    $img = $prefix . uniqid().'.'.$suffix;
    // 移动文件
    move_uploaded_file($_FILES['img']['tmp_name'],'../../public/images/goods/'. $img);

    $arr = ['typeid' => $typeid,'name' => $name, 'price' => $price,'stock' => $stock, 'img' => $img,'desc'=>$desc];
    print_r(json_encode($arr));

    // 3. 把数据上传到数据库

    // 3.1 连接数据库
    $link = mysqli_connect('localhost', 'root', '123456', 'mall');

    // 3.2 操作
    $sqlInsert = "INSERT INTO `goods` VALUES(NULL,$typeid, '$name', $price, $stock, '$img','$desc')";
    // 解决插入数据中文乱码
    mysqli_query($link, "set names utf8");
    $res = mysqli_query($link, $sqlInsert);
    if($res){
        echo "成功";
    } else {
        echo "失败";
    }