JavaScript学习笔记——FromData上传文件

  FromData对象用以将数据成键值对,使用XMLHttpRequest来发送数据。其主要用于发送表单数据,亦可用于发送带键值对的数据。使用FromData()构造函数可创建一个新的FromData对象。

语法

  

// var formdata = new FormData()   创建一个空的formdata对象
 var form = document.getElementById('forms')
  var formdata = new FormData(form)

参数

  from

  一个HTML中的表单元素

方法

  append(key, value, [filename])

  向formdata对象中添加一个键值对,如果该键存在则会将新的值赋值给该键,否则会添加一个新的键值对。

  delete(key)

   从FormData对象中删除指定的key和它对应的值

  entries()

  返回一个可迭代的对象

  get(key)

  用于获取formdata对象中和指定键关联的第一个值

  getAll(key)

  用于获取formdata对象中和指定键关联的所有值

  has(key)

  用于查看formdata对象中是否含有某个键

  keys()

  返回一个迭代器,遍历formdata对象中包含的所有键

  set(key,value)

  对formdata对象里的键设置新的值,如果不存在则添加一个新的键值对

  values()

  返回一个迭代器,遍历formdata对象中包含的所有值

使用FormData上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
        <input type="text" name="name" value="1234">
        <input type="text" name="pwd" value="5678">
        <input type="file" name="file" id="file" onchange="change()">
        <input type="button" value="提交" onclick="submit()">
    

    <script>
        
        var file = document.getElementById('file');
        var formdata = new FormData();
        function change(){
            formdata.append('file', file.files[0]);
            formdata.append('name', '1234');
            formdata.append('files', '5678');
        }

        function submit(){
            console.log('submit')
            var http = new XMLHttpRequest();
            http.open('POST', '/file', true);
            http.onload = function(res) {
                console.log(res)
            };
            http.send(formdata)
        }
    </script>
</body>
</html>
View Code
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
var app = new express();


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}))
app.use(express.static('statics'))

app.get('/', function(req, res){
    res.sendFile(path.resolve('./views/hello.html'))
});

app.post('/file',multipartMiddleware, function(req, res){
    console.log(req.body, req.files)

    /*
    { name: '1234', files: '5678' } 
    { 
        file:{ 
            fieldName: 'file',
            originalFilename: '985065c10b196d4fdbd7311795c7b57f.gif',
            path: 'C:\\Users\\pyh\\AppData\\Local\\Temp\\gIAGofhbYBfXM1IXGf-8N_eO.gif',
            headers:
            { 'content-disposition': 'form-data; name="file"; filename="985065c10b196d4fdbd7311795c7b57f.gif"',
                'content-type': 'image/gif' },
            size: 762277,
            name: '985065c10b196d4fdbd7311795c7b57f.gif',
            type: 'image/gif' 
        }
    }
    */ 
});

app.listen(9000, function(){
    console.log('server is runing')
});
View Code

猜你喜欢

转载自www.cnblogs.com/peiyanh/p/9565062.html