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/');
  • 相关阅读:
    ajax返回数据类型 text json xml
    用ajax实现三级联动
    利用封装类查询
    oracle 在已有实力上创建用户 并导入数据
    php加密算法及扩展安装
    有用可以用的连接
    nginx负载均衡配置文件
    php获取excel表格中数据的小方法 然后就可以放到数据库了
    关于PHP中Cann't redeclare class的错误
    php时间函数应用
  • 原文地址:https://www.cnblogs.com/xiabaoying/p/12093085.html
Copyright © 2011-2022 走看看