js保存json文件到服务器端,使用JSON格式提交数据到服务端的实例代码

准备Hero.java

public class Hero {

private String name;

private int hp;

public String getName() {

return name;

} public void setName(String name) {

this.name = name;

}

public int getHp() {

return hp;

}

public void setHp(int hp) {

this.hp = hp;

}

@Override

public String toString() {

return "Hero [name=" + name + ", hp=" + hp + "]";

}

}

public class Hero {

private String name;

private int hp;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public int getHp() {

return hp;

}

public void setHp(int hp) {

this.hp = hp;

}

@Override

public String toString() {

return "Hero [name=" + name + ", hp=" + hp + "]";

}

}submit.html文件

[html] view plain copy print?

用AJAX以JSON方式提交数据

名称:

血量:

$('#sender').click(function(){

var name=document.getElementById('name').value;

var hp=document.getElementById('hp').value;

var hero={"name":name,"hp":hp};

var url="submitServlet";

$.post(

url,

{"data":JSON.stringify(hero)},

function(data) {

alert("提交成功,请在Tomcat控制台查看服务端接收到的数据");

});

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个基于前后端的多文件上传和大文件分片上传的示例代码: 首先是HTML部分,使用input标签实现多文件选择和上传按钮: ```html <input type="file" multiple id="file-input"> <button onclick="upload()">上传</button> ``` 接下来是JavaScript部分,实现了多文件上传和大文件分片上传功能。其中,upload函数是上传按钮的点击事件处理函数。 ```javascript function upload() { const fileInput = document.getElementById('file-input'); const files = fileInput.files; const chunkSize = 1024 * 1024; // 分片大小为1MB const totalChunks = Math.ceil(files.size / chunkSize); // 计算总块数 const formData = new FormData(); formData.append('totalChunks', totalChunks); // 上传总块数 for (let i = 0; i < files.length; i++) { const file = files[i]; const chunks = Math.ceil(file.size / chunkSize); // 计算当前文件的总块数 formData.append('file', file); // 添加文件数据到FormData对象 for (let j = 0; j < chunks; j++) { const start = j * chunkSize; const end = Math.min(start + chunkSize, file.size); const chunk = file.slice(start, end); formData.append('chunkIndex', j); formData.append('chunkData', chunk); // 使用Fetch API进行上传 fetch('/upload', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); } } } ``` 以上代码中,我们先获取了input标签中选择的所有文件,然后对每个文件进行分片上传。每个分片的大小默认为1MB,可以根据实际情况进行调整。接着使用FormData对象构造包含分片数据的表单数据,然后使用Fetch API进行上传。上传的URL为`/upload`,可以根据实际情况进行调整。 在服务端,我们需要接收上传的分片数据,并在接收完所有分片后进行合并。以下是Node.js的示例代码: ```javascript const express = require('express'); const app = express(); const fs = require('fs'); const path = require('path'); const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/upload', (req, res) => { const totalChunks = req.body.totalChunks; const fileName = req.body.file.name; const chunkIndex = req.body.chunkIndex; const chunkData = req.body.chunkData; const filePath = path.join(__dirname, fileName + '.' + chunkIndex); // 将分片数据写入文件 fs.writeFile(filePath, chunkData, (err) => { if (err) { console.error(err); res.status(500).send('Failed to write chunk data'); return; } // 如果是最后一个分片,则进行合并 if (chunkIndex === totalChunks - 1) { const writeStream = fs.createWriteStream(fileName); for (let i = 0; i < totalChunks; i++) { const chunkPath = path.join(__dirname, fileName + '.' + i); const chunkData = fs.readFileSync(chunkPath); writeStream.write(chunkData); fs.unlinkSync(chunkPath); // 删除已合并的分片文件 } writeStream.end(() => { res.send('Upload success'); }); } else { res.send('Chunk uploaded'); } }); }); app.listen(3000, () => { console.log('Server started at http://localhost:3000'); }); ``` 以上代码中,我们使用Express框架接收POST请求,并从请求体中获取分片数据文件名、当前分片索引、总块数等信息。然后将分片数据写入文件,如果是最后一个分片,则进行合并,最终得到完整的文件。注意,分片文件的命名规则为`文件名.分片索引`,合并完成后需要删除已合并的分片文件。 这就是一个基于前后端的多文件上传和大文件分片上传的实现示例,希望能对你有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值