数据交互

  1. formdata, 控制要提交数据的状态,文件上传显示进度
  2. cors跨域

浏览器

const fileDom = document.getElementById('file');
const data = new FormData();
data.set('name', 'yindong');
Array.from(fileDom.files).forEach(file => {
    data.append('f1', file);
})
const oAjax = new XMLHttpRequest();

let arr = [];
data.forEach((value, key) => {
    arr.push(`${encodeURLComponent(key)}=${encodeURLComponent(value)}`);
})

oAjax.open(`GET`, `http://127.0.0.1:8080?${arr.join('&')}`, true);
// post
// oAjax.setRequstHeader('Content-Type', 'application/x-www-form-urlencoded');
oAjax.send();

oAjax.onreadystatechange = function() {
    if (oAjax.readyState == 4) {
        if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
            alert('成功');
        } else {
            alert('失败');
        }
    }
}

服务器
npm install express body-parser multer -S;

const express = require('express'); // 主体
const multer = require('multer'); // 接收文件POST数据
const body = require('body-parser');// 接收普通数据

const server = express();
server.use(body.urlencoded({ extended: false }));
const multerObj = multer({ dest: './upload/'});

server.use(multerObj.any());

server.listen(8080);
server.post('/', (req, res) => { // post请求会走这个
    res.send('ok'); // express的res将write和end合并成了send
    console.log(req.body); // body-parser 会在req上添加一个body
    console.log(req.files); // multer 会在req上添加一个files
})
server.get('/api', () => { // get请求会走这个

})
server.use('/', () => { // 所有请求都走这个

})
// 设置静态服务器的地址
server.use(express.static('./www/'));

上传文件进度

const fileDom = document.getElementById('file');
const data = new FormData();
Array.from(fileDom.files).forEach(file => {
    data.append('f1', file);
})
const oAjax = new XMLHttpRequest();


oAjax.upload.onprogress = function(ev) {
    const percent = ev.loaded / ev.total;
    // <meter value="0" min="0" max="100"></mater>
}

oAjax.open(`POST`, `http://127.0.0.1:8080`, true);
// post
// oAjax.setRequstHeader('Content-Type', 'application/x-www-form-urlencoded');
oAjax.send(data);

oAjax.onreadystatechange = function() {
    if (oAjax.readyState == 4) {
        if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
            alert('成功');
        } else {
            alert('失败');
        }
    }
}
  1. ev.loaded 完成的大小
  2. ev.total 总大小

服务器代码

const express = require('express'); // 主体
const multer = require('multer'); // 接收文件POST数据
const body = require('body-parser');// 接收普通数据

const server = express();
server.use(body.urlencoded({ extended: false }));
const multerObj = multer({ dest: './upload/'});

server.use(multerObj.any());

server.listen(8080);
server.use('/', (req, res) => { // post请求会走这个
    res.send('ok'); // express的res将write和end合并成了send
    console.log(req.body); // body-parser 会在req上添加一个body
    console.log(req.files); // multer 会在req上添加一个files
})
server.get('/api', () => { // get请求会走这个

})
server.use('/', () => { // 所有请求都走这个

})
// 设置静态服务器的地址
server.use(express.static('./www/'));

注意:
ajax上面有两个process,

addEventListener

-DOM 1
DOM Level 1

读取文件内容 FileReader

改方法需要工作在服务器环境下
drop事件中,文件在 ev.dataTransfer.files;

const file = ev.dataTransfer.files[0];
const reader = new FileReader();
reader.onload = function() {
    // 文本内容
    console.log(reader.result);
}
// 读取文本文件
reader.readAsText(file);

先onload后读取,因为,如果先读取后load可能还没有绑定就读取完了。
使用方法

  1. 实例化一个FileReader
  2. onload
  3. readAsText/readAsDataURL/readAsBinaryString/readAsArrayBuffer

readAsDataURL: base64数据格式,任何文件都可以编码成base64格式。
服务器和浏览器传输数据,可以有两种方法
1、直接二进制
2、base64,可以把二进制数据表现成字符串,不会破坏文件。
readAsBinaryString: 以字符串形式存储的二进制数据,
readAsArrayBuffer: 以二进制形式存储数据