Node学习（九）021-管理系统之添加英雄——完成本地图片预览之生成临时url-URL.createObjectURL(文件对象)& FormData收集表单各项数据之ajax请求写法-post请求

Node学习（九）021-管理系统之添加英雄——完成本地图片预览之生成临时url-URL.createObjectURL(文件对象)& FormData收集表单各项数据之ajax请求写法-post请求

四、添加英雄

4.1 处理表单

查看数据表，有哪些字段需要添加；这些字段在页面中有没有？

页面中缺少一个昵称，所以自行添加（复制姓名那个div，修改成昵称）

4.2 完成本地图片预览

在add.html中，当文件域的内容发生改变的时候，完成图片预览：

<script>
      完成图片预览
    // 当上传控件（文件域）的内容发生改变的时候，完成预览
    $('#heroIcon').change(function () {
      
      
        // 1. 生成一个临时的url
        // var url = URL.createObjectURL(文件对象);
        // console.dir(this);
        var objFile = this.files[0];
        var url = URL.createObjectURL(objFile);
        console.log(url);
        // 2. 改变“盖伦”那个图片的src为临时的url即可
        $('#yulan').attr('src', url);
    });
</script>

执行 git add . 和 git commit -m 'add.html中实现图片预览'

效果-上传图片并预览

4.3 前端将数据提交给接口，完成添加

分析：

当点击“新增”按钮的时候，要阻止默认行为，然后使用FormData收集表单各项数据。然后将数据通过 $.ajax() 方法提交给接口 addHero （注：接口我们自定，目前还没有）。

对于增删改，接口一般都返回：

{
    
    "code": 200, "message": "添加英雄成功"}

下面在add.html中，完成前端代码：

<script>
    // 当点击“新增”按钮的时候，要阻止默认行为，然后使用FormData收集表单各项数据。
    // 然后将数据通过 $.ajax() 方法提交给接口 /addHero  （注：接口我们自定，目前还没有）。
    $('.btn-add').click(function (e) {
      
      
        e.preventDefault(); //阻止表单提交
        // 收集表单数据
        var fd = new FormData($('form')[0]);
        // 发生ajax请求
        $.ajax({
      
      
            contentType: false,
            processData: false,
            type: 'POST',
            url: '/addHero',
            data: fd,
            dataType: 'json',
            success: function (res) {
      
      
                // 预期的res ===== {"code": 200, "message": "添加英雄成功"}
                // 无论成功还是失败，都提示
                alert(res.message);
                if (res.code === 200) {
      
      
                    // 添加成功，跳转到index.html
                    location.href = '/index.html';
                }
            }
        });
    });
</script>

执行 git add . 和 git commit -m '完成了添加英雄的前端代码'