前后端交互——上传文件与FormData

最新推荐文章于 2024-05-05 17:04:41 发布
最新推荐文章于 2024-05-05 17:04:41 发布
阅读量809 收藏 1
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CS_DGD/article/details/105234934
版权

上传文件与FormData

static内部静态文件（应该在views内，但为了演示方便，放在了static内部，实际使用时应该放在views内）

<!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>
    <input type="file" class="myfile">
    <button>点我上传</button>
    <script>
        document.querySelector("button").onclick = function(){
            // 获取到上传的文件
            let file = document.querySelector(".myfile").files[0];
            // console.log(files);

            // 创建FormData对象
            let form = new FormData();

            // 添加你想上传的内容
            form.append("img",file);    //将需要上传的文件信息，添加到form
            /* 
                使用form的好处
                    1. 不需要设置文件头
                    2. 可以把你的数据可以以键值对的方式存起来
                    3. 可以添加描述，可以是字符串或者对象
             */

            let xhr = new XMLHttpRequest();
            
            // get 无法上传文件，因为他上传都是在头部位置
            // 而文件需要通过正文的方式
            xhr.open("post","/upload",true);
            
            xhr.onload = function(){
                console.log(xhr.responseText);
            };
            
            xhr.send(form);
        }
    </script>

</body>
</html>

服务器文件

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
const fs = require("fs");
const mysql2 = require("mysql2");

const connection = mysql2.createConnection({
    host: "localhost",
    user: "root",
    password: "123321",
    database: "js01",
    charset: "utf8"
});

let app = new Koa();
let router = new Router();

app.use(koaBody({
    multipart: true
}));
app.use(static(__dirname + "/static"));

router.get("/", ctx => {
    ctx.body = "hello world"
});

router.post("/upload", async ctx => {
    // 将传递过来的文件，读取
    let fileData = fs.readFileSync(ctx.request.files.img.path);

    // 将读取的文件写入到指定的目录中
    fs.writeFileSync("static/imgss/" + ctx.request.files.img.name, fileData);

	// 渲染页面
    ctx.body = "接收成功";
});

app.use(router.routes());
app.listen(8080);

上传到服务器并渲染到页面

服务器文件

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
const fs = require("fs");
let app = new Koa();
let router = new Router();

app.use(koaBody({
    multipart: true
}));
app.use(static(__dirname + "/static"));

router.get("/", ctx => {
    ctx.body = "hello world"
});
router.post("/fileUpload", ctx => {
    let fileData = fs.readFileSync(ctx.request.files.myfile.path);
    fs.writeFileSync("static/imgss/" + ctx.request.files.myfile.name, fileData);

    ctx.body = ctx.request.files.myfile.name;
})

app.use(router.routes());
app.listen(8080);

静态文件

<!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>
    <input type="file" class="myfile">

    <button>点击上传</button>
    <img src="" alt="" style="width: 100px; height: 100px;">

    <script>
        // ajax从点击事件外创建，防止点击一下新建一个ajax
        xhr = new XMLHttpRequest();

        let btn = document.querySelector("button");
        btn.onclick = function(){
            
            // 获取到上传的文件
            let file = document.querySelector(".myfile").files[0];
            
            // 实例化FormData；
            let form = new FormData();

            // 将上传的文件添加到form
            form.append("myfile",file);

            // 上传   1.上传方式  2.路径    3.是否异步
            xhr.open("post","fileUpload",true);

            // 接收返回值
            xhr.onload = function(){
                document.querySelector("img").src = `./imgss/${xhr.responseText}`
            };

            // 发送服务器
            xhr.send(form);

        }
    </script>
</body>
</html>

上传到数据库并渲染到页面

服务器文件

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const userData = require("./data/users.json");
const koaBody = require("koa-body");
const fs = require("fs");
const mysql2 = require("mysql2");

const connection = mysql2.createConnection({
    host: "localhost",
    user: "root",
    password: "123321",
    database: "js01",
    charset: "utf8"
});

let app = new Koa();
let router = new Router();

app.use(koaBody({
    multipart: true
}));
app.use(static(__dirname + "/static"));

router.get("/", ctx => {
    ctx.body = "hello world"
});

router.post("/upload", async ctx => {
    // 将传递过来的文件，读取
    let fileData = fs.readFileSync(ctx.request.files.img.path);
    let imgUrl = "/imgss/" + ctx.request.files.img.name;
    console.log(imgUrl)

    let sql = "INSERT INTO imgdata (imgUrl) VALUES(?)"
    await connection.promise().query(sql, [imgUrl]);

    // 将读取的文件写入到指定的目录中
    fs.writeFileSync("static/imgss/" + ctx.request.files.img.name, fileData);

    // 将文件传入到数据库


    ctx.body = "接收成功";
});

router.get("/new", async ctx => {
    let mysql = "SELECT * FROM imgData";
    let [rows] = await connection.promise().query(mysql);
    let data = rows;

    ctx.body = {
        info: data
    }
})

app.use(router.routes());
app.listen(8080);

上传文件页面

<!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>
    <input type="file" class="myfile">
    <button>点我上传</button>
    <script>
        document.querySelector("button").onclick = function(){
            // 获取到上传的文件
            let file = document.querySelector(".myfile").files[0];
            // console.log(files);

            // 创建FormData对象
            let form = new FormData();

            // 添加你想上传的内容
            form.append("img",file);    //将需要上传的文件信息，添加到form
            form.append("name","张三");
            /* 
                使用form的好处
                    1. 不需要设置文件头
                    2. 可以把你的数据可以以键值对的方式存起来
                    3. 可以添加描述，可以是字符串或者对象
             */

            let xhr = new XMLHttpRequest();
            
            // get 无法上传文件，因为他上传都是在头部位置
            // 而文件需要通过正文的方式
            xhr.open("post","/upload",true);
            
            xhr.onload = function(){
                console.log(xhr.responseText);
            };
            
            xhr.send(form);
        }
    </script>

</body>
</html>

查看文件页面

<!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>
    <div class="img">
        <img src="" alt="">
    </div>
    <button>点击看图</button>
    <script>
        let xhr = new XMLHttpRequest();
        let i = 0;
        document.querySelector('button').onclick = function(){
            xhr.open("get","new",true);

            xhr.onload = function(){
                let imgObj = JSON.parse(xhr.responseText).info;
                console.log(imgObj);
                let imgUrl = imgObj[i >= imgObj.length ? 0 : i++];

                document.querySelector(".img").innerHTML = `<img src = "${imgUrl.imgUrl}">`;
                if(i >= imgObj.length){
                    i = 0;
                }
            }
            xhr.send();
        }
    </script>
</body>
</html>

upload事件对象

  • onloadstart 上传开始
  • onprogress 数据传输进行中
    • evt.total ：需要传输的总大小；
    • evt.loaded :当前上传的文件大小；
  • onabort 上传操作终止(取消上传)
  • onerror 上传失败
  • onload 上传成功
  • onloadend 上传完成（不论成功与否）

代码示例：

			xhr.upload.onloadstart = function(){
				console.log('开始上传')
			};
            xhr.upload.onprogress = function(evt){
                console.log('上传中');
                // 当前文件上传的大小 ： evt.loaded
                // 需要传输的总大小 ： evt.total
                let percent = ((evt.loaded / evt.total) * 100).toFixed(0);
                document.querySelector("progress").value = percent;
            };
            xhr.upload.onload = function(){
                console.log("上传成功");
            };
            xhr.upload.onerror = function(){
                console.log("上传失败");
            };
            xhr.upload.onloadend = function(){
                console.log("上传完成");
            }

上述代码文件夹结构

在这里插入图片描述

X可乐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
同时上传文件和相应的数据，实现前后台交互
11-15
同时上传文件和相应的数据，实现前后台交互，同时上传文件和相应的数据，实现前后台交互同时上传文件和相应的数据，实现前后台交互
前后端交互——文件上传速度与取消上传、XML
CS_DGD的博客
04-01 530
上传速度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume...
【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】
最新发布
CaraYQ的博客
05-05 1776
/ 进度条可以用axios的onUploadProgress方法，且发送切片时可以并行发送请求，后续可以自行优化。// 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象。// multiple的多文件上传其实很不友好，需要用户在选择文件时按住ctrl多选，否则就会变成单选。// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图。//切片上传，在上传的时候进行切片，文件改变时只赋值。// 使用blob的slice方法可以切割文件。
前后台数据传递和文件上传
weixin_33860737的博客
05-02 224
$_GET['name']用于GET请求获取参数 $_REQUEST['name']用于GET或POST请求获取参数 $_FILES用于接收文件 特殊表单的提交 对于复选框，在设置html时，需要在name属性值的后面加[]，name="color[]"，在php中会自动转为数组 文件上传 form表单： action属性应该指向一个php文件 method属性必须设置为post $tmp =...
表单及上传文件一起传输，前端与后台代码实现！
Dou_IP的博客
05-13 3129
表单上传数据及图片一起 <from id="inputForm"> <input name="houseName" value=""/> <input type="file" id="f" name="f" style="display:block"/> <button type="button" class="btn btn-sm btn-pri...
form表单提交没有跨域问题，但ajax提交存在跨域问题
weixin_30468137的博客
11-13 632
浏览器的策略本质是：一个域名下面的JS，没有经过允许是不能读取另外一个域名的内容，但是浏览器不阻止你向另外一个域名发送请求。 所以form表单提交没有跨域问题，提交form表单到另外一个域名，原来页面是无法获取新页面的内容，或者说form提交后不需要返回，但是ajax是需要返回的。 而ajax是想要读取响应内容，浏览器是不允许你这么做的。 世界本无跨域，是浏览器不允许js访问别的域，但是浏览...
vue使用axios上传文件(FormData)的方法
12-08
在此主要介绍 如何使用 formData 对象上传单文件和多文件，FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。 过多介绍不说，过多的...
FormData实现文件上传（前端+后端）
07-12
在本教程中，我们将深入探讨如何使用`FormData`来实现文件上传，包括前端和后端的核心实现。 ### 前端部分 1. **HTML表单**：首先，我们需要一个HTML表单让用户选择文件。`<input type="file">`元素用于选取本地...
jQuery利用FormData上传文件实现批量上传
01-19
在项目中涉及题库的批量上传功能，在此利用formdata进行文件上传，后台读取，进行批量插入。同时还需要带入teacherId和courseId两个参数，所以将文件和两个参数append到formdata中，传到后台。 JQuery 函数的提交...
使用FormData实现上传多个文件
10-17
总的来说，这个例子展示了如何使用`FormData`与XMLHttpRequest配合，实现前端多文件上传，并通过Spring MVC在后端接收并处理这些文件。这种技术对于现代Web应用中的文件上传非常有用，因为它允许异步、无刷新的文件...
通过Ajax方式上传文件使用FormData进行Ajax请求
10-21
主要介绍了通过Ajax方式上传文件使用FormData进行Ajax请求的相关资料,需要的朋友可以参考下
CS架构，简单网络通信
05-12
帮我看看哪不足，ＣＳ架构的简单通信，客户端输入数字１和数字２，点击提交后服务器处理后将结果返回，客户端事件有＋、－、×、／
CS架构，简单网络通信java程序
05-12
帮我看看哪不足，ＣＳ架构的简单通信，客户端输入数字１和数字２，点击提交后服务器处理后将结果返回，客户端事件有＋、－、×、／
前台使用formdata传递表单数据，后端springmvc实体类接收数据出现400错误
雄的博客
08-04 1054
原因：实体类包含Date类型属性，前端formdata对应属性传递的是日期字符串。 解决方法： 1.前端formdata传递data类型数据 2.在实体类中对应Date类型属性使用@DateTimeFormat注解 @DateTimeFormat(pattern="yyyy-MM-dd hh:ss") private Date departureTime; // 出发时间 3.是自定义一个转换器，实现Converter<S,T>接口，S：代表要进行转换的参数的类型，T：代表转换后的类型
前端采用formdata的形式给node后端传输数据时碰到的问题
lomekk的博客
05-27 807
1.前端给node后端发送formdata形式的数据时不需要手动设置响应头 向node后端发送的响应头真实格式为 如果自己设置响应头，如 反而会导致响应头中的boundary丢失，会让node报错 但是如果我们在node后端直接用req.body接受数据的话，我们会发现接受的是一个空的对象 这个时候就需要导入formidable包来帮我们解决问题(可以上npm上看具体操作) 然后我们就可以看到解析出来的数据了 最后：千万不要忘记 在html页面的 form表单中忘记写input 的name属性
XHR发送数据后端接收不到
EstherLty的博客
12-25 1844
XHR发送数据，后端接收不到 post请求，通过XMLHttpRequest.setRequestHeader()设置请求头，服务器通过Content-Type，得到请求数据的类型，然后进行解析 xhr属性值 text/html ： HTML格式 **text/plain ：**纯文本格式 application/json： xhr.send(data) ，data是json格式{“a”：“b”}（需要序列化） application/x-www-form-urlencoded： xhr.send(d
前端上传文件 ajax发送FormData，后端如何接收
热门推荐
weixin_44294593的博客
11-14 1万+
前后端分离且跨域的情况下 form表单提交数据，且数据中包含文件提交上传 解决方法 及 步骤： 1 前端用formdata()的方式提交 let form=document.getElementById('form') var param = new FormData(form); let config = { //添加请求头 headers: { 'Conten...
前后端传参==FormData文本和文件（图片等）同时上传、后端springboot接收CommonsMultipartResolver
hebian1994的博客
12-21 3470
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org...
【推荐】cslc-admin基础权限单体架构，前后端分离项目
cs4380的博客
02-18 449
cslc-admin 开源基础权限系统 cslc-admin基础权限单体架构，前后端分离项目，完成免费开源，主要做交流学习。 后端项目基于Spring Boot、Spring、Spring MVC、MyBatis、Shiro等主流后端技术开发 前端项目基于vue、vuex、element-ui、axios等主流后端技术开发 交流QQ群: 78780245 一.系统说明 1.目录模块说明 admi...
ajax前后端交互上传文件
07-27
在Ajax前后端交互中，可以使用Ajax来上传文件。一种常见的方法是使用FormData对象来传输文件数据。首先，你需要创建一个FormData对象，并将文件添加到该对象中。然后，你可以使用Ajax发送POST请求，将FormData对象作为请求的数据发送到服务器。在服务器端，你可以使用相应的后端语言来处理接收到的文件数据。通过这种方式，你可以实现文件的上传和后端的处理。\[1\]另外，你也可以使用一些第三方库，如axios或jQuery，来简化文件上传的过程。这些库提供了更方便的方法来处理文件上传的细节，使得代码更加简洁和易于维护。\[2\]总之，通过Ajax前后端交互，你可以实现文件的上传和后端的处理，提供了更好的用户体验和数据交互的能力。 #### 引用[.reference_title] - *1* [AJAX前后端交互](https://blog.csdn.net/m0_60280770/article/details/119517580)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Ajax前后端交互利器详解(一)](https://blog.csdn.net/Augenstern_QXL/article/details/120116296)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值