前端代码

<!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 "失败";

    }

ajax上传文件，通过FromData把数据传给后端的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. springMVC+jsp+ajax上传文件

    工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method ...

  3. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  4. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  5. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  6. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  7. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  8. ajax上传文件及进度显示

    之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...

  9. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  10. Ajax 上传文件（input file FormData）

    FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...

随机推荐

  1. 关于log4j中log4j.properties和log4j.xml的加载顺序

    如果采用log4j输出日志,要对log4j加载配置文件的过程有所了解. log4j启动时,默认会寻找source folder下的log4j.xml配置文件,若没有,会寻找log4j.properti ...

  2. 吴裕雄--天生自然KITTEN编程：滂沱大雨

  3. 导致提前layout的常见情况（通过chrome浏览器自带的控制台可以看到）

    1.通过js获取DOM属性 2.增/删/DOM节点 3.改变浏览器窗口大小 4.改变字体 5.激活css伪类 6.修改DOM的属性,涉及到大小.位置等(该颜色不会激活提前的layout) 7.其他js ...

  4. 阿里云服务器上搭建seafile专业版

    因为官方一键安装教程在阿里云服务器上无法安装,由于水平有限,无法解决,所以选择手动安装 参考资料: 1,.腾讯云搭建seafile服务器 2.How to Install Seafile with N ...

  5. [PyTorch入门之60分钟入门闪击战]之训练分类器

    训练分类器 目前为止,你已经知道如何定义神经网络.计算损失和更新网络的权重.现在你可能在想,那数据呢? What about data? 通常,当你需要处理图像.文本.音频或者视频数据时,你可以使用标 ...

  6. RocketMQ 单机版安装并测试

    一.安装maven 1.下载maven,http://maven.apache.org/download.cgi,并解压: -bin.tar.gz 2.修改系统环境变量,并验证: vim /etc/p ...

  7. http 详解

    HTTP协议中GET.POST和HEAD的介绍 GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 ...

  8. shell 获取字符创长度&&识别当前使用的shell&&检查是否为超级用户

    1.获得字符串长度 可以使用下面的方法获得变量值得长度: length=${#value} 例如: [root@gameserver1 shell]# var=12345678 [root@games ...

  9. PAT-进制转换-B1022 D进制的A+B (20分)

    题目描述: 输入两个非负10进制整数A和B(≤230-1),输出A+B的D(1<D≤10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 样例: 输入:123 456 8 输出: ...

  10. cocoapods iOS类库管理工具的安装与使用

    CocoaPods是一个管理Swift和Objective-C的Cocoa项目的依赖工具.他可以优雅地帮助你扩展你的项目.简单的说,就是替你管理Swift和Objective-C的Cocoa项目的第三 ...