模板引擎 art-template 和FormData对象实例方法和二进制文件上传和文件上传进度和文件上传图片即时预览

//为按钮添加点击事件

btn.onclick = function (){

// 将普通的html表单转换为表单对象

var formData = new FormData(form);

//创建ajax

var xhr = new XMLHttpRequest();

//对ajax进行配置 告诉ajax以何种方式向什么地方发送请求

xhr.open(‘post’,‘http://localhost:3000/formData’);

//发送ajax请求 提交表单对象

xhr.send(formData);

//监听xhr对象下面的onload事件

xhr.οnlοad= function(){

//对象http状态码进行判断

if(xhr.status == 200){

console.log(xhr.responseText);

}

}

}

注意:

1.FormData对象不能用于get请求,因为对象需要被传递到send方法中,而get请求方式的请求参数只能放在请求地址后边;

2.服务器端的bodyParser模块不能解析FormData对象表单数据,需要使用formidable进行解析;

// 实现文件上传的路由

app.post(‘/formData’,(req,res)=>{

// 创建formidable表单解析对象

const form = new formidable.IncomingForm();

//创建formidable表单解析对象

form.parse(req,(err,fields,files)=>{

res.send(fields);

})

})

2.FormData对象实例方法

//1.获取表单对象中属性的值

formData.get(‘key’);

//2.设置表单对象中属性的值

formData.set(‘key’,‘value’);

//3.删除表单对象中属性的值

formData.delete(‘key’);

//4.向表单中追加属性值

formData.append(‘key’,‘value’);

//set方法和append方法区别是 在属性名已经存在的情况下,set会覆盖已有的键名的值,append会保留两个值

3.FormData二进制文件上传

var file = document.getElementById(‘file’)

var file = document.getElementById(‘file’)

// 当用户选择文件的时候

file.onchange = function () {

// 创建空表单对象

var formData = new FormData();

// 将用户选择的二进制文件追加到表单对象中

formData.append(‘attrName’, this.files[0]);

// 配置ajax对象，请求方式必须为post

xhr.open(‘post’, ‘www.example.com’);

xhr.send(formData);

}

4.FormData 文件上传进度

// 当用户选择文件的时候

file.onchange = function () {

// 文件上传过程中持续触发onprogress事件

xhr.upload.onprogress = function (ev) {

// 当前上传文件大小/文件总大小 再将结果转换为百分数

// 将结果赋值给进度条的宽度属性

bar.style.width = (ev.loaded / ev.total) * 100 + ‘%’;

}

}

5.FormData 文件上传图片即时预览

// 将服务器端返回的数据显示在控制台中

var result = JSON.parse(xhr.responseText);

// 动态创建img标签

var img = document.createElement(‘img’);

// 给图片标签设置src属性

img.src = result.path;

// 当图片加载完成以后

img.onload = function () {

// 将图片显示在页面中

box.appendChild(img);

}

综合案例

请选择文件

0%