FormDa对象的使用方法

最新推荐文章于 2022-01-08 22:22:43 发布
最新推荐文章于 2022-01-08 22:22:43 发布
阅读量274 收藏
点赞数
分类专栏： js 文章标签： js ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108565154
版权

FormDa对象的使用方法

1.服务器端代码

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.post('/formData', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        res.send(fields);
    });
});

// 实现文件上传的路由
app.post('/upload', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 设置客户端上传文件的存储路径
    form.uploadDir = path.join(__dirname, 'public', 'uploads');
    // 保留上传文件的后缀名字
    form.keepExtensions = true;
    // 解析客户端传递过来的FormData对象
    form.parse(req, (err, fields, files) => {
        // 将客户端传递过来的文件地址响应到客户端
        res.send({
            path: files.attrName.path.split('public')[1]
        });
    });
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

2.客户端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" value="提交" id="btn">
    </form>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //获取表单
        var form = document.getElementById('form')
            //为按钮添加点击事件
        btn.onclick = function() {
            //将普通的html表单转换为表单对象
            //可以不用一个个去过去表单的数据
            var formData = new FormData(form);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //对ajax进行配置
            xhr.open('post', 'http://localhost:3000/formData');
            //发送ajax请求
        
            xhr.send(formData);
            //监听xhr对象下面的onload事件
            xhr.onload = function() {
                //对http状态码进行判断
                if (xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

</html>

3.Form对象下的实例方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" value="提交" id="btn">
    </form>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //获取表单
        var form = document.getElementById('form')
            //为按钮添加点击事件
        btn.onclick = function() {
            //将普通的html表单转换为表单对象
            var formData = new FormData(form);


            /* 
                get('key') 获取表单对象属性的值
                set('key','value') 设置表单对象属性的值
                delate('key')删除表单对象属性中的值
                formData.append('key','value');
            */
            console.log(formData.get('username'));
            //如果设置的表单属性存在  将会覆盖这个表单属性的值
            formData.set('username', 'itcase');
            formData.append('username', 'heima');
            //如果设置的表单属性不存在  将会创建这个表单属性
            formData.set('age', 100);
            //删除用户输入的密码
            formData.delete('password');

            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //对ajax进行配置
            xhr.open('post', 'http://localhost:3000/formData');
            //发送ajax请求
            xhr.send(formData);
            //监听xhr对象下面的onload事件
            xhr.onload = function() {
                //对http状态码进行判断
                if (xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            };
            // //创建空的表单对象
            // var f = new FormData();
            // f.append('sex', 'man');
            // console.log(f.get('sex'));
        }
    </script>
</body>

</html>

4.二进制文件上传

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
        
        .padding {
            padding: 5px 0 20px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label>请选择文件</label>
            <input type="file" id="file">
            <div class="padding" id="box">
                <!-- <img src="" class="img-rounded img-responsive"> -->
            </div>
            <div class="progress">
                <div class="progress-bar" style="width: 0%;" id="bar"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //获取文件选择控件
        var file = document.getElementById('file');
        var bar = document.getElementById('bar');
        var box = document.getElementById('box');
        //为文件选择空间添加onchange事件
        //在用户选择文件时触发
        file.onchange = function() {
            //创建空的formData表单对象
            var formData = new FormData();
            //将用户选择的文件追加到formData表单对象中
            formData.append('attrName', this.files[0]);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //对ajax对象进行配置
            xhr.open('post', 'http://localhost:3000/upload');
            //在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev) {
                // console.log(ev);
                //ev.loaded 文件以及上传了多少
                //ev.total 上传的文件的总大小
                var result = (ev.loaded / ev.total) * 100 + '%'
                bar.style.width = result;
                bar.innerHTML = result;
            };
            //发送ajax请求
            xhr.send(formData);
            //监听服务端响应给客户端的数据
            xhr.onload = function() {
                //如果服务器端返回的http状态码是200
                //说明请求是成功的
                if (xhr.status == 200) {
                    //将服务器端返回的数据显示在控制台中
                    var result = JSON.parse(xhr.responseText);
                    //动态创建img标签
                    var img = document.createElement('img');
                    //给图片标签设置src属性
                    img.src = result.path;
                    img.onload = function() {
                        //将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebPageInForm：网页说说javascriptözelliklerinikaybetmeden formdaçalışmasınısağlayanuygulama
02-14
因此，当用户提交表单后，页面重新加载，所有JavaScript变量、函数和对象都将丢失，可能导致用户体验下降。 3. **WebPageInForm的核心功能**： - **保存和恢复JavaScript状态**：WebPageInForm通过将JavaScript的...
asp.net使用H5新特性实现异步上传的示例
01-01
###index.html <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> [removed][removed] [removed][removed] <title></title> [removed] $(function(){ ... formDa
Form 表单数据处理
qq_29292819的博客
04-05 683
Form 表单数据处理 formidable的简单的使用 formidable是第三方包，用于处理上传的文件 使用时要用npm下载，然后导入文件中 使用formidable处理上传的文件（post请求） 导入formidable第三方包 var formidable = require('formidable'); 创建form表单 var form = new formidabl...
FormData详解
weixin_46058921的博客
01-08 5万+
FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。 构造函数 FormData()构造函数用于创建一个新的FormData对象。 var formData = new FormData(form)
使用node.js的formidable模块，运行到parse后程序不执行。
weixin_44717047的博客
07-22 951
使用node.js的formidable模块，运行到parse后程序不执行。
FormData使用方法详解
DcTbnk的博客
07-18 218
FormData的主要用途有两个： 1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name","laotie"); //通过get方法对值进行读取 console.log(formdata
深入解析 multipart/form-data
跑够一万公里就结婚
07-18 3万+
一个 HTML 表单中的 enctype 有三种类型 application/x-www-urlencoded multipart/form-data text-plain 默认情况下是 application/x-www-urlencoded，当表单使用 POST 请求时，数据会被以 x-www-urlencoded 方式编码到 Body 中来传送，而如果 GET 请求，则是附在 url 链接...
FavoriteGamer
05-20
最喜欢的玩家任务您的任务是开发一个API，该API将特定的《守望先锋》播放器添加到您的收藏夹中。 为此，请开发以下API方法： 用户...02 -npm install -npm start 描述路线sign_up（发布）注册路线到表单的输入-FormDa
服务器解析form中文件,如何在节点服务器端解析formdata？
weixin_42131633的博客
08-11 533
我正在使用nodejs，REACT，express，axios。我想制作上传功能，但我不能。当我上传文件时，服务器无法解析上传的文件(仅显示{} log)。以下是我的前端代码当用户单击表单元素上的UPLOAD按钮时，调用'handleSubmit'函数，'handleSubmit'调用'fileUploadRequest'函数。在'fileUploadRequest'功能中，一切都很好。我可以看到...
FormData用法详解
热门推荐
前端开发
03-21 8万+
FormData 对象： 一.创建一个formData对象实例的方式 1、创建一个空对象 var formData = new FormData();//通过append方法添加数据 2、使用已有表单来初始化对象 //表单示例 &lt;form id="myForm" action="" method="post"&gt; &lt;input type="text" name...
nodejs 处理表单上传文件时，获取不到表单数据
初见-子非鱼
08-28 7379
from表单上传文件时，为保证文件正确的编码格式，我们会为form设置 enctype="multipart/form-data" 属性，但此时我们又不能获取到input传递的值。 表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用
FormData上传文件同时附带其他参数
weixin_30889885的博客
01-25 2529
前端js代码： function fileSubmit() { var formData = new FormData(); formData.append("file",$("#FileUpload")[0].files[0]); var type = $('#file_type').val...
通过Ajax方式上传文件，使用FormDa…
兜兜里全是糖_博客
10-13 243
postman中 form-data、x-www-form-urlencoded、raw、binary的区别
ccfxue的博客
09-23 882
form-data x-www-form-urlencoded raw binary multipartform-data与x-www-form-urlencoded区别 本文转载自 http://blog.csdn.net/ye1992/article/details/49998511form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，
Django利用Ajax提交文件到后台
douyunqian668的博客
11-16 2753
XMLRequest按钮上传     XMLRequest按钮上传             function UploadFile()         {                  var formDa=new FormData();                 formDa.append("user",document.getElementById("user").
解析form表单数据
weixin_33786077的博客
04-15 580
//解析form表单数据 function parseFormData(params) { var args = new Object(); for(var key in params){ if(!params[key].name) continue; var pos = params[key].name.in...
Ajax 编程
henucm的博客
03-25 283
Ajax 编程 模板引擎 模板引擎概述 作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。 官方地址： https://aui.github.io/art-template/zh-cn/index.html 下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件 使用步骤 <script src="./js/template-web.js"&g...
Http请求数据上传图片到服务器
qq_32961291的博客
12-22 715
初来乍到，请大家多多指教
node学习笔记 上传图片formidable方法
程序员小曲的博客
02-25 312
js代码 <script> var file = document.getElementById("file"); file.onchange = function() { var form = new FormData(); //将用户选择的图片追加到form表单 //attrNa...
FromData文件上传即使预览
weixin_46002223的博客
12-02 97
在图片上传到服务器以后，服务器通常会将图片地址作为响应数据传递到客户端，客户端可以从相应数据中获取图片的地址，然后将图片显示在页面上 页面 // 监听服务器端响应给客户端的数据 xhr.onload = function() { // 如果服务器端返回的http码类型为200 // 说明请求成功 if (xhr.status == 200) { /
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值