默认form上传图片/AJAX上传

左手的ㄟ右手 2023-05-21 07:12 9阅读 0赞

**默认form上传**\---------------------------------------------------------

index.html

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>文件上传</title>
        </head>
        <body>
            <form action="/upload" enctype="multipart/form-data" method="post">
                <label for="avastar">头像</label>
                <input type="file" name="avatar">
                <input type="submit" value="上传头像">
            </form>
        </body>
    </html>

server.js

let express = require("express");
    let path = require("path");
    let formidable = require("formidable");
    let fs = require("fs");
    let util = require("util");
    let app = new express();
    
    app.get("/",(req,resp)=>{
        let filename = path.join(__dirname,"index.html");
        resp.sendFile(filename);
    });
    
    app.post("/upload",(req,resp)=>{
        let form = new formidable.IncomingForm();
        let uploadDir = path.normalize(__dirname+'/'+"uploads");
        form.uploadDir = uploadDir;
        console.log(uploadDir);
        form.parse(req, function(err, fields, files) {
            for(item in files){
                (function(){
                    let oldname = files[item].path;
                    let newname = files[item].name === 'blob' ? oldname+'.xml' : oldname+"."+files[item].name.split('.')[1];
                    fs.rename(oldname,newname,function(err){
                        if(err) console.log(err);
                        console.log('修改成功');
                    })
                })(item);
            }
            console.log(util.inspect({fields: fields, files: files}));
            resp.send('上传文件成功');
        });
    });
    
    app.listen(8080,()=>{
        console.log("127.0.0.1:8080");
    });

AJAX上传---------------------------------------------------------

index.html

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>文件上传</title>
        </head>
        <body>
            <div>
                <input type="file" id="ava">
                <button id="upload">上传文件</button>
                <h2>预览</h2>
                <img class="preview" src="timg.jfif">
            </div>
            <script src="jquery.js"></script>
            <script>
                $(function(){
                    $('#ava').change(function(){
                        console.log('change');
                        let fielreader = new FileReader();
                        fielreader.readAsDataURL($('#ava')[0].files[0]);
                        const filename = $('#ava')[0].files[0].name;
                        fielreader.onload = function(){
                            console.log(this.result);
                            $('.preview').attr('src', this.result);
                            $('.preview').attr('data-name', filename);
                        }
                    })
                    $('#upload').click(function(){
                        let formdata = new FormData();
                        formdata.append('avatar', $('#ava')[0].files[0]);
                        $.ajax({
                            url:'/upload',
                            type:'post',
                            processData: false,
                            contentType: false,
                            data: formdata,
                            dataType: 'json',
                            success: function(res){
                                console.log(res.msg);
                            },
                            error: function(error){
                                console.log("上传失败");
                                alert("上传文件失败");
                            }
                        })
                    })
                })
            </script>
        </body>
    </html>

server.js

let express = require("express");
    let path = require("path");
    let formidable = require("formidable");
    let fs = require("fs");
    let app = new express();
    
    // 放开静态文件
    app.use(express.static(__dirname));
    
    app.get("/",(req,resp)=>{
        let filename = path.join(__dirname,"index.html");
        resp.sendFile(filename);
    });
    
    app.post("/upload",(req,resp)=>{
        let form = new formidable.IncomingForm();
        let uploadDir = path.normalize(__dirname+'/'+"uploads");
        form.uploadDir = uploadDir;
        form.parse(req, function(err, fields, files) {x
            if(err){
                console.log(err);
                return;
            }
            for(item in files){
                (function(){
                    let oldname = files[item].path;
                    let newname = files[item].name === '1' ? oldname+'.xml' : oldname+"."+files[item].name.split('.')[1];
                    fs.rename(oldname,newname,function(err){
                        if(err) console.log(err);
                    })
                })(item);
            }
            resp.send({"msg":"上传成功"});
        });
    });
    
    app.listen(8080,()=>{
        console.log("127.0.0.1:8080");
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 springboot 上传批量上传图片

Spring Boot 上传图片的方法有多种，这里介绍一种使用 Apache Commons FileUpload 库的方法。首先，在项目的 pom.xml 文件中添加依赖

墨蓝/ 2024年03月25日 17:22/ 0 赞/ 47 阅读

相关默认form上传图片/AJAX上传

默认form上传\--------------------------------------------------------- index.html <!DO

左手的ㄟ右手/ 2023年05月21日 07:12/ 0 赞/ 10 阅读

相关 apiclod 上传图片_apiCloud上传图片

Hello APP height:100%; \} \wrap\{ height:100%; display:-webkit-box; display:-webki

野性酷女/ 2022年10月31日 00:57/ 0 赞/ 328 阅读

相关 ajax上传img files,ajax,MultipartFile图片上传

1.html 结构 uploadimg 2.js $("\uploadimg").on("click", function () \{ var file = $('\f

你的名字/ 2022年09月03日 11:16/ 0 赞/ 263 阅读

相关 c ajax 上传图片插件,ajax实现图片上传和预览

图片上传功能 html结构： !\[\](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能，在其属性中也包含一

喜欢ヅ旅行/ 2022年09月03日 07:21/ 0 赞/ 298 阅读

相关 $.ajax动态上传图片,基于ajax实现上传图片代码示例解析

js源码： /// /// /\! \ jQuery upload \ 用于上传单个文件，上传成功后,返回文件路径。 \ 本插件依赖jQuery，jquery.fo

素颜马尾好姑娘i/ 2022年09月03日 06:22/ 0 赞/ 205 阅读

相关 ajax上传图片

index.html <!DOCTYPE html> <html> <head> <title>Ajax 上传文件</title>

向右看齐/ 2022年06月05日 08:17/ 0 赞/ 240 阅读

相关 jquery的ajax上传图片并且显示上传进度

jquery上传文件用的formdata，上传进度条需要添加xhr的onprogress html代码如下： <!DOCTYPE html> <html l

小咪咪/ 2022年05月08日 12:10/ 0 赞/ 240 阅读

相关图片上传

文件上传流程： 1、定义 <input type="file" name="file" accept="image/\" onchange="uploadimage(th

ゝ一世哀愁。/ 2022年04月02日 11:46/ 0 赞/ 404 阅读

相关 Form-Upload上传

<!--通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置befo

旧城等待，/ 2022年03月30日 02:07/ 0 赞/ 276 阅读