前端代码

<!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. TortoiseSVN配置和使用教程

    2009-04-24 来源:dev.idv.tw 1 安装及下载client 端 2 什么是SVN(Subversion)? 3 为甚么要用SVN? 4 怎么样在Windows下面建立SVN Repo ...

  2. leetCode-nSum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  3. SWUST OJ Gold Nuggets Distribution(0490)

    Gold Nuggets Distribution(0490) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 421 Accepte ...

  4. LG承认手机业务遭到中国厂商碾压！这是输得心服口服的节奏？

    近日,关于LG手机业退出中国市场的消息传的沸沸洋洋.不少相关媒体也对此事向LG北京办事处求证,得到的结果确实是手机业务退出中国市场.并且据韩媒报道,LG还将会逐渐取消高端手机业务,也就是说未来V系列和 ...

  5. python基础实现简单的shell sed 替换功能

    #coding:utf-8 from pygame.draw import lines import sys,os old_file = sys.argv[1] #接受外部设备上的参数 new_fil ...

  6. 使用 KM 处理 HHKB 方向键

    对于上了 HHKB 这条贼船的人来说,刚开始使用起来最大的别扭可能就是没有方向键的问题了. 最早的我使用 Karabiner 来解决,里边有一些内置的组合可以替代方向键,我用 control + hj ...

  7. Windows Server 2012搭建SQL Server Always On踩坑全记录

    Windows Server 2012搭建SQL Server Always On踩坑全记录 环境信息: Windows Server 2012 R2 Sql Server 2012 整个搭建集群的过 ...

  8. 浅谈.NET Framework 与CLR

            承载公共语言运行时 (CLR) 的所有应用程序均需启动(或称“激活”)CLR 以运行托管代码.             通常,.NET Framework 应用程序在生成它的 CLR ...

  9. Sentinel基于Apollo的持久化改造

    Sentinel基于Apollo的持久化改造 sentinel默认是将用户在dashboard中编辑过的流控信息保存在内存中,所以在重启后,所有之前配置过的流控规则也就不见了.但是sentinel给用 ...

  10. 使用HBuilder开发移动APP

    前言 HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写,它基于 ...