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

本文链接：https://blog.csdn.net/weixin_44976833/article/details/102829769

模板引擎和FormData对象

模板引擎使用步骤

下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件
```
<script src="./js/template-web.js"></script>
```

准备 art-template 模板

 <script id="tpl" type="text/html">
     <div class="box"></div>
 </script>

告诉模板引擎将哪一个模板和哪个数据进行拼接

 var html = template('tpl', {username: 'zhangsan', age: '20'});

将拼接好的html字符串添加到页面中

document.getElementById('container').innerHTML = html;

通过模板语法告诉模板引擎，数据和html字符串要如何拼接`

 <script id="tpl" type="text/html">
     <div class="box"> {{ username }} </div>
 </script>

FormData对象

作用:模拟html表单,相当于将html表单映射成表单对象,自动将表单对象中的数据拼接成请求参数格式,异步上传二进制文件;

1.简单使用传递post提交方式的参数

创建html表单

 <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="button" id="btn" value="提交">
    </form>

获取表单创建ajax并发送请求

		//获取按钮
        var btn = document.getElementById('btn');
        //获取表单
        var form = document.getElementById('form');
        //为按钮添加点击事件
        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.onload= 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二进制文件上传

<input type="file" id="file"/>

 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);
}

综合案例

<!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>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style>
        .container {
            padding-top: 60px;
        }
        .padding{
            padding: 5px 0 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <label>请选择文件</label>
            <input type="file" id="file">
            <div class="padding" id="box">
                <!-- //存放图片 -->

            </div>
            <div class="progress">
                <div class="progress-bar" style="width:0%" id="bar">0%</div>
            </div>
        </div>
    </div>
    <script>
        //获取file文件元素
        var file = document.getElementById('file');
        // 获取进度条元素
		var bar = document.getElementById('bar');
		// 获取图片容器
		var box = document.getElementById('box');
        //当选择文件时
        file.onchange = function(){
            //创建空表单对象
            var formData = new FormData();
            //将用户选择的文件追加到表单对象中
            // console.log(this.files);
            formData.append('attrName',this.files[0]);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            //告诉ajax以何种方式向哪发送请求
            xhr.open('post','http://localhost:3000/upload');
            //在上传文件过程中持续触发
            xhr.upload.onprogress =function(ev){
                // ev.loaded 文件已经上传了多少
                // ev.total  上传文件的总大小
                var result = (ev.loaded / ev.total)*100+'%';
                //设置进度条
                bar.style.width = result;
                //将百分比显示在进度条中
                bar.innerHTML = result;
            }
     
            //发送请求
            xhr.send(formData);

            //监听服务端响应给客户端数据
            xhr.onload = function(){
                //如果状态码是200,说明请求是成功的
                if(xhr.status == 200){
                    //服务器端返回的数据显示在控制台
                    var result =JSON.parse(xhr.responseText);
                    //动态创建img标签
                    var img = document.createElement('img');
                    //给图片添加src属性
                    img.src= result.path;
                    //当图片加载完成以后
                    img.onload = function(){
                        //将图片显示在页面中
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>
</body>
</html>