javascript FormData的使用

最新推荐文章于 2024-06-10 16:58:43 发布

之乎者也哼哈

最新推荐文章于 2024-06-10 16:58:43 发布

阅读量1.9k

点赞数

文章标签： javascript 前端 php

本文链接：https://blog.csdn.net/qq_43202443/article/details/121866792

版权

一）FormData的定义
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。
要使用的几个基本条件、
1）在html中有form的标签，并且有id="myform"属性，js原生获取其中所有的表单var myformtest= document.getElementById(“myform”);
2）通过var myformdata=new new FormData(myformtest);这里参数是填入获取的form组件的变量，通过这步相当于完成了表单的序列化，表单中的所有元素标签，标签的name和value就是提交表单的key和value:

 <form action="" id="myform">
<input type="text" name="goods_name" id="">
 <input type="button" value="登记" name="" id="doit" >
 </form>

上图中goods_name就是key，他输入的内容就是value；
3）在formdata中，如果要使用按钮触发提交，必须使用input中的button类型，如果使用button标签，将不能触发事件（特别注意）；

二）一个完整案例
前端html及js部分

<html>
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.6.0.min.js"></script>

</head>
 <form action="" id="myform">
<input type="text" name="goods_name" id="">
<input type="file" name="goods_img" id="">
 <input type="button" value="登记" name="" id="doit" >
 </form>
 <script>
       $(document).ready(
            function() {
                var mybtn = $('#doit');
                mybtn.click(
                    function() {
                  	  	//获取form组件
                        var myformtest= document.getElementById("myform");
                        //将组件下的表单通过实例一个formdata对象序列化
                        var myformdata = new FormData(myformtest);
                        //实例一个请求对象
                        var xhr = new XMLHttpRequest();
                        //使用post请求
                        xhr.open('post', 'formtest.php');
                        //将序列化后的表单发送（提交）
                        xhr.send(myformdata);
                        xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                alert(xhr.responseText);
                            }
                        }
                    }
                )
            }
        )
 </script>
 </html>

后端PHP部分，假设已经具备了数据库的配置

<?php

//连接数据库，根据自己的数据库的来填写
<?php
$user_server = "localhost";
$userserver_name = "root";
$userserver_password = "123456789";
$con = mysqli_connect($user_server, $userserver_name, $userserver_password);
//选择数据库，myformtestDB是数据库中的一个库
mysqli_select_db($con, "myformtestDB");
//获取表单提交上来的数据
$goods_name = $_POST['goods_name'];
$goods_img_name = $_FILES['goods_img']['name'];
$my_img = $_FILES['goods_img']['tmp_name'];

//判断文件夹中是否有该名称的图片
if (file_exists("upload/" . $goods_img_name)) {
    echo "已经有这个文件了";
} else {
    //将图片临时文件存储到upload文件夹中
    move_uploaded_file($my_img, "upload/" . $goods_img_name);
    //将$goods_name的值新增到名为infoDB表的goods_name字段中,把图片名称存在goods_img的字段中
    $doresult = mysqli_query($con, "INSERT INTO infoDB(goods_name,goods_img) VALUES('$goods_name','$goods_img_name')");
    if ($doresult) {
        echo "登记成功";
    }
}
?>

这样就把前端提交表单提交至服务器，并且写入了名为infoDB表的字段中；
重点：
1）myformdata提交的数据一般都在$_POST[’’]中，根据对应的表单标签的name属性;
2）myformdata中提交的file类型为二进制文件，则数据在 $_FILES[‘goods_img’]中，其中 $_FILES['goods_img']['name']是图片的名称，$ _FILES[‘goods_img’][‘tmp_name’]是图片在服务器中临时存储为文件，需要通过move_uploaded_file( $my_img，"upload/" .$ goods_img_name )把图片存储在upload的文件夹中（记得要在项目目录下新建名为upload的文件夹）
3）如果用这里代码，请创建名称myformtestDB数据库、infoDB的表，至少包含goods_name、goods_img字段，最好创建id字段，设置索引PRIMARY，勾选自增A_I，项目目录下新建名为upload的文件夹；
4）这个案例是简单的案例，一般来说，图片名称可以通过explode(".", $goods_img_name);截取了，自己再定义名称，这个可以在这个简单案例中不做

之乎者也哼哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript FormData的使用

formdata file
复制链接

扫一扫