前端代码

<!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. 0-1背包问题-DP

    中文理解: 0-1背包问题:有一个贼在偷窃一家商店时,发现有n件物品,第i件物品价值vi元,重wi磅,此处vi与wi都是整数.他希望带走的东西越值钱越好,但他的背包中至多只能装下W磅的东西,W为一整数 ...

  2. 阿里巴巴-德鲁伊druid连接池配置

    阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好,Druid与其他数据库连接池使用方法基本一样(与DBCP非常相似),将数据库的连接信息全部配置给Data ...

  3. IDEA工具java.io.IOException: Could not find resource SqlMapConfig.xml

    IDEA工具java.io.IOException: Could not find resource SqlMapConfig.xml 解决办法: 1.删掉pom.xml文件的这行代码 <pac ...

  4. django Highcharts制作图表--显示CPU使用率

    Highcharts 是一个用纯JavaScript编写的一个图表库. Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highcharts 免费提供给个人学习 ...

  5. 吴裕雄--天生自然 PYTHON数据分析：威斯康星乳腺癌(诊断)数据分析（续一）

    drop_list1 = ['perimeter_mean','radius_mean','compactness_mean','concave points_mean','radius_se','p ...

  6. find_in_set 函数的语法

    find_in_set 函数的语法: FIND_IN_SET(str,strList) str 要查询的字符串 strList 字段名,参数以“,”分隔,如(1,2,6,8) 查询字段(strList ...

  7. WiFi曝出安全漏洞几近“裸奔”：运营商能借机收割一波红利吗？

    ​    作为大众生活中不可或缺的基础架构,也是智能生活普及的推动性力量,运营商的重要性毋庸置疑.但无奈的是,一直以来运营商都似乎是站在了大众的"对立面".看似光鲜亮丽,但在壮观的 ...

  8. 从VR泛滥到倒闭看热门投机的山寨创业心态

    相对国外来说,国人的从众心理非常严重.无数的段子和"名人名言"都在反复向我们传递出一个信息:国人在做事的时候,总是随大流,趋向热点.而从行业角度来看,结果就会造成行业中良莠不齐.鱼 ...

  9. CSS——NO.7（布局模型）

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  10. 压力测试（二）-Jmeter基本介绍

    1.Jmeter基本介绍和使用场景 简介 1.压测不同的协议和应用 1) Web - HTTP, HTTPS (Java, NodeJS, PHP, ASP.NET, …) 2) SOAP / RES ...