zoukankan      html  css  js  c++  java
  • ajax+node实现图片上传

    利用formData实现ajax上传图片后,保存图片到指定收藏夹,然后展示新重命名后的图片

    html:

    <input type="file" id="uploadImg" onchange="uploadfile1()"> 

    javascript:

     <script>
                function uploadfile1() {
                    console.log('changed')
                    var form = new FormData();
                    // // form.append('user', document.getElementById('user').value);
        
                    var fileobj = document.getElementById('uploadImg').files[0];
                    console.log(fileobj)
                    form.append('img', fileobj);
                    console.log(form)
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if(xhr.readyState === 4 && xhr.status === 200){
                            var data = JSON.parse(xhr.responseText);
                            if (data.status === 200) {
                                console.log(data)
                                var img = document.createElement('img');
                                img.setAttribute('src', data.img);
                                img.setAttribute('class', 'upload-img');
                                console.log(img)
                                document.body.appendChild(img)
                            }
                        }
                    };
                    xhr.open('POST', 'http://localhost:8080/upload', true);
                    xhr.send(form);
                }
            </script>

    node:

    var http = require('http');
    var fs = require('fs');
    var multiparty = require('./node_modules/multiparty');
    var server = http.createServer(function (requset, response){
        var form = new multiparty.Form();
    
      
        form.parse(requset, function (err, filelds, files) {
            console.log(files)
            fs.renameSync(files.img[0].path, __dirname + '/img/upload.jpeg');
        });
      
        response.setHeader("Access-Control-Allow-Origin", "*"); 
        
        let data = {
            status: 200,
            img: './img/upload.jpeg'
        };
     
        response.end(JSON.stringify(data));
    });
    
    server.listen(8080);
    console.log('server is running at http://127.0.0.1:8080/');
  • 相关阅读:
    Cookies 和 Session的区别
    List接口、Set接口和Map接口
    Java NIO:IO与NIO的区别
    NIO与传统IO的区别
    Java中堆内存和栈内存详解
    Java序列化与反序列化
    maven搭建
    深入研究java.lang.ThreadLocal类
    SQL 优化经验总结34条
    数据库事务的四大特性以及事务的隔离级别
  • 原文地址:https://www.cnblogs.com/xiabaoying/p/12093085.html
Copyright © 2011-2022 走看看