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/');
  • 相关阅读:
    练习写一个工资结算系统
    【课堂】模拟奥特曼打小怪兽
    模拟简单对打(昨天代码的小修改)
    模拟简单游戏创建类
    数组的应用练习
    Java基础的思维导图
    springBoot集成MyBatis和Mybatis自动生成代码GeneratorMapper.xml配置
    ubuntu14.04安装eclipse没有标题
    ubuntu14.04安装Hadoop0.20.2
    Apache编码问题
  • 原文地址:https://www.cnblogs.com/xiabaoying/p/12093085.html
Copyright © 2011-2022 走看看