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/');
  • 相关阅读:
    Windows Store App 主题动画
    Windows Store App 过渡动画
    Windows Store App 控件动画
    Windows Store App 近期访问列表
    Windows Store App 文件选取器
    Windows Store App 访问应用内部文件
    Windows Store App 用户库文件分组
    Windows Store App 获取文件及文件夹列表
    Windows Store App 用户库文件夹操作
    Windows Store App 用户库文件操作
  • 原文地址:https://www.cnblogs.com/xiabaoying/p/12093085.html
Copyright © 2011-2022 走看看