ajax实现文件上传

最新推荐文章于 2024-07-28 20:27:10 发布

背包编程

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量457

点赞数

文章标签： javascript ajax jquery

本文链接：https://blog.csdn.net/m0_50865651/article/details/117932021

版权

核心两点

核心：上传文件最主要的两个核心：

post: 可以上传文文本和二进制数据（图片、视频、音频、）

设置请求头Content-type:

Content-type','application/x-www-form-urlencoded : 会把数据编码之后当做文本传输
Content-type','multipart/form-data : 可以传递文本和二进制数据(实现文件的上传)
Content-type: "text/plain"

传统方式上传(页面跳转)

使用node的第三方包实现文件上传，

multer

基本使用：

服务端server.js：

const express = require('express');
const path = require('path')
const fs = require('fs');
const multer = require('multer');
const app = express();

// 定义上传的目录
var upload = multer({
    dest: 'uploads/' })


// 托管静态资源
app.use('/uploads',express.static(path.join(__dirname,'uploads')))



app.get('/form',(req,res)=>{
   
    res.sendFile(path.join(__dirname,'form.html'))
})

app.get('/formajax',(req,res)=>{
   
    res.sendFile(path.join(__dirname,'form-ajax.html'))
})

app.get('/ajax',(req,res)=>{
   
    res.sendFile(path.join(__dirname,'ajax.html'))
})

app.get('/formjqueryajax',(req,res)=>{
   
    res.sendFile(path.join(__dirname,'form-jquery-ajax.html'))
})

//实现文件上传
app.post('/upload',upload.single('avatar'),(req,res)=>{
   
    console.log(req.body); //接收文本 text
    console.log(req.file); //接收文件上传成功后的信息
    if(req.file){
   
        // 进行文件的重命名即可 fs.rename
        let {
   originalname,destination,filename} = req.file;
        let dotIndex = originalname.lastIndexOf('.');
        let ext = originalname.substring(dotIndex);
        let oldPath = `${
     destination}${
     filename}`;
        let newPath = `${
     destination}${
     filename}${
     ext}`;
        fs.rename(oldPath,newPath,err=>{
   
            if(err){
    throw err; }
            res.json({
   message:'上传文件成功','path':newPath})
        })
    }else{
   
        res.json({
   message:'没有上传文件'})
    }
    
    
})

app.listen(4000,_=>console.log('服务器已经启动port4000'))

form.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=

最低0.47元/天解锁文章

背包编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax实现文件上传

核心两点核心：上传文件最主要的两个核心：post: 可以上传文文本和二进制数据（图片、视频、音频、）设置请求头Content-type:Content-type','application/x-www-form-urlencoded : 会把数据编码之后当做文本传输Content-type','multipart/form-data : 可以传递文本和二进制数据(实现文件的上传)Content-type: "text/plain"传统方式上传(页面跳转)使用node的第三方包
复制链接

扫一扫