前端代码

<!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. Nginx笔记总结六:Nginx location配置

    语法规则:location [= | ~ | ~* | ^~] /uri/ {....} = 表示精确匹配 ^~ 表示uri以某个常规字符串开头 ~ 表示区分大小写的正则表达式 ~* 表示不区分大小写 ...

  2. function_exists (),method_exists()与is_callable()的区别

    is_callable()函数要高级一些,它接受字符串变量形式的方法名作为 第一个参数,如果类方法存在并且可以调用,则返回true.如果要检测类中的方法是否能被调用,可以给函数传递一个数组而不是类的方 ...

  3. DOS命令编译JAVA程序

    上篇文章给大家写了怎么安装JDK配置,现在这篇文章我们就来学习下怎么在DOS命令下编译JAVA程序,以后没编译器都可以直接编译啦(嘻嘻!) 我这里就用永远的 “Hello wrold!”来演示下吧. ...

  4. Java Timer和TimerTask

    Timer是JDK中提供的一个定时器工具,使用的时候会在主线程之外起一个单独的线程执行指定的任务,可以指定一次或多次. TimerTask是一个实现了Runnable接口的抽象类,代表一个可被执行的任 ...

  5. Python---2文本编辑器

    1.介绍 在Python的交互式命令行写程序,好处是一下就能得到结果,坏处是没法保存,下次还想运行的时候,还得再敲一遍. 所以,实际开发的时候,我们总是使用一个文本编辑器来写代码,写完了,保存为一个文 ...

  6. 【深圳·招聘】QQ音乐测试工程师-职位内推

    QQ音乐测试工程师 岗位职责 负责腾讯QQ音乐移动端/后台/web相关特性测试分析和执行,保障发布质量. 岗位要求 专业本科及以上学历,计算机/软件工程/信息管理/数学与应用数学/自动化/通信工程/电 ...

  7. “代码量统计脚本”

    概述 本文从一段统计C/C++程序脚本入手,记录shell脚本常用和重要的知识点. 代码量统计程序 文件名称,count_code_line.sh 12345678910111213141516171 ...

  8. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  9. 关于localStorage面试的那点事

    最近面试的时候关于html5API总会被问到localStorage的问题, 对于一般的问题很简单,无非就是 localStorage.sessionStorage和cookie这三个客户端缓存的区别 ...

  10. 解决微信小程序视频组件层级过高的问题

    本文首发于我的个人博客:http://www.fogcrane.org 前言 在微信小程序的开发中,总有一些"VIP"组件,他们的层级,高得让人抓狂,总是凌驾于很多其他低层级组件之 ...