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 '完成了添加英雄的前端代码'

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10837.html