前端代码

<!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. C++入门级小算法

    反序输出一个整数 #include <iostream> using namespace std; int main() { int n; while (cin >> n)// ...

  2. Ionic3学习笔记（十六）上传头像至图床

    本文为原创文章,转载请标明出处 个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简单易用.其 ...

  3. 将本地的一个项目托管到自己的GitHub仓库

    GitHub作为全球最大的代码托管平台,功能十分强大.我们可以在上面建立一个仓库来托管我们的代码图片等资源.因为使用markdown语法来写博客所以在插入图片时需要一个图片外链地址,起初去网上找了一个 ...

  4. 关于安装了Vue-devtools插件但在浏览器控制台不显示的解决方案

    Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools) 控制台却没有. 错误原因: 没显示调试工具的原因是用了 ...

  5. 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？

    方法1 : for(var i=0; i<oLis.length; i++){ oLis[i].onclick = (function(j){ return function(){ alert( ...

  6. 从零开始实现基于微信JS-SDK的录音与语音评价功能

    最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: ![](reecode/qrcode.pn ...

  7. C++求解N阶幻方

    由一道数学题的联想然后根据网上的做法瞎jb乱打了一下,居然对了代码精心附上了注释,有兴趣的童鞋可以看一看..不说了,上代码!(自认为结构很清晰易懂) 1234567891011121314151617 ...

  8. centos7上Jenkins通过rpm包方式直接安装及使用war包方式升级

    一.通过rpm包方式直接安装jenkins 1.官网下载rpm安装包(前提是安装jdk) wget https://pkg.jenkins.io/redhat-stable/jenkins-2.121 ...

  9. 利用Nginx或koa

    最近在做上传的图片的需求,思考上传之后的图片怎么访问的问题,因为后端是Node,一开始尝试写一个专门的接口通过传入图片的path来查找,试了一下感觉并不理想,因为要为每种类型的文件设置Content- ...

  10. ES插件升级

    #!/bin/bash mkdir -p /home/esuser cd /home/esuser wget http://10.12.xx.xx:8090/search_plugins/sd_wai ...