html里传输文件到后端,前端js上传文件 到后端接收文件

packagecom.zj.sample;importjava.io.File;importjava.io.IOException;importjava.util.Iterator;importjava.util.List;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importorg.apache.commons.fileupload.FileItem;importorg.apache.commons.fileupload.disk.DiskFileItemFactory;importorg.apache.commons.fileupload.servlet.ServletFileUpload;/*** Servlet implementation class Upload*/@WebServlet("/Upload")public class Upload extendsHttpServlet {private static final long serialVersionUID = 1L;private String uploadPath = "D:\\temp"; //上传文件的目录

private String tempPath = "d:\\temp\\buffer\\"; //临时文件目录

File tempPathFile;/***@seeHttpServlet#HttpServlet()*/

publicUpload() {super();//TODO Auto-generated constructor stub

}/***@seeHttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/

protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {//TODO Auto-generated method stub

}/***@seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/@SuppressWarnings("unchecked")public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsIOException, ServletException {try{//Create a factory for disk-based file items

DiskFileItemFactory factory = newDiskFileItemFactory();//Set factory constraints

factory.setSizeThreshold(4096); //设置缓冲区大小,这里是4kb

factory.setRepository(tempPathFile);//设置缓冲区目录//Create a new file upload handler

ServletFileUpload upload = newServletFileUpload(factory);//Set overall request size constraint

upload.setSizeMax(4194304); //设置最大文件尺寸,这里是4MB

List items = upload.parseRequest(request);//获得全部的文件

Iterator i =items.iterator();while(i.hasNext()) {

FileItem fi=(FileItem) i.next();

String fileName=fi.getName();if (fileName != null) {

File fullFile= newFile(fi.getName());

File savedFile= newFile(uploadPath, fullFile.getName());

fi.write(savedFile);

}

}

System.out.print("upload succeed");

}catch(Exception e) {//能够跳转出错页面

e.printStackTrace();

}

}public void init() throwsServletException {

File uploadFile= newFile(uploadPath);if (!uploadFile.exists()) {

uploadFile.mkdirs();

}

File tempPathFile= newFile(tempPath);if (!tempPathFile.exists()) {

tempPathFile.mkdirs();

}

}

}

前端传输GeoJSON文件可以通过Ajax发送POST请求,将文件作为FormData对象的一个字段上传后端接收文件后可以使用Node.js中的multer中间件进行解析,然后将GeoJSON数据插入数据库。 以下是一个示例代码: 前端代码: ```javascript const fileInput = document.querySelector('input[type="file"]'); fileInput.addEventListener('change', () => { const formData = new FormData(); formData.append('file', fileInput.files[0]); axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); }); ``` 后端代码: ```javascript const express = require('express'); const multer = require('multer'); const { MongoClient } = require('mongodb'); const app = express(); const upload = multer(); app.post('/api/upload', upload.single('file'), async (req, res) => { const client = await MongoClient.connect('mongodb://localhost:27017'); const db = client.db('mydb'); const collection = db.collection('mycollection'); const data = JSON.parse(req.file.buffer.toString()); await collection.insertOne(data); client.close(); res.send('File uploaded successfully'); }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 在这个示例代码中,我们使用了Express框架和MongoDB数据库。首先,我们创建一个Express应用程序并配置multer中间件来解析上传文件。然后,我们连接到MongoDB数据库,将GeoJSON数据插入到一个名为“mycollection”的集合中。最后,我们向客户端发送一个成功消息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值