nodejs利用ajax实现网页无刷新上传图片实例代码


Posted in NodeJs onJune 06, 2017

通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转。

利用ajax技术和FormData()对象可以有效的解决这个问题

废话不多说 直接上关键代码:

html部分

<div class="form-group">
  <label>File input</label>
  <input type="file" name="file" id="file">
  <p id="result"></p>
  <img id="img" src="">
</div>
<button id="upload" class="btn btn-default">提交</button>

这里注意input标签的 type="file"

js部分:

function uploadFile(){
 var file = document.getElementById("file")
 var formData = new FormData();
 formData.append('file',file.files[0]);
 $.ajax({
  url: '/upload',
  type: 'POST',
  data: formData,
  // async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data){
   if(200 === data.code) {
    $('#result').html("上传成功!");
    $('#img').attr('src',data.data);
   } else {
    $('#result').html("上传失败!");
   }
   console.log('imgUploader upload success');
  },
  error: function(){
   $("#result").html("与服务器通信发生错误");
  }
 });
}

function postPage() {
    var uploada = document.getElementById('upload');
    uploada.addEventListener("click",function () {
      uploadFile();
    },false);
}

window.onload = function () {
  postPage();
}

nodejs部分:

var storage = multer.diskStorage({
  destination: function (req, file, cb){
    cb(null, './public/images')
  },
  filename: function (req, file, cb){
    cb(null, file.originalname)
  }
});
var upload = multer({
  storage: storage
});
router.post('/upload', upload.single('file'), function (req, res, next) {
  var url = 'http://' + req.headers.host + '/images/' + req.file.originalname
  res.json({
    code : 200,
    data : url
  })
});

multer是express官方推荐的文件上传中间件。

文件上传有以下方法

upload.single(‘file'), //适用于单文件上传。
upload.array(‘file',num), //适用于多文件上传,num为最多上传个数,上传文件的数量可以小于num。

同时还提供了混合上传,比如A类文件1个,B类文件2个。官方API有详细说明。

file为上传字段名称,当使用form表单submit方式上传时,必须与表单上传的name属性保持一致。

对上传文件大小限制,名称限制等均可在limits中加上,具体可加属性,请参考官方api。

multer官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs读取memcache示例分享
Jan 02 NodeJs
Nodejs sublime text 3安装与配置
Jun 19 NodeJs
nodejs之请求路由概述
Jul 05 NodeJs
Nodejs实现的一个简单udp广播服务器、客户端
Sep 25 NodeJs
NodeJS学习笔记之Http模块
Jan 13 NodeJs
NodeJS学习笔记之Connect中间件应用实例
Jan 27 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
深入理解nodejs搭建静态服务器(实现命令行)
Feb 05 NodeJs
nodejs二进制与Buffer的介绍与使用
Jul 11 NodeJs
ajax +NodeJS 实现图片上传实例
Jun 06 #NodeJs
详解Nodejs之静态资源处理
Jun 05 #NodeJs
nodejs集成sqlite使用示例
Jun 05 #NodeJs
详解nodeJS之二进制buffer对象
Jun 03 #NodeJs
深入理解Nodejs Global 模块
Jun 03 #NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 #NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 #NodeJs
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JS建造者模式基本用法实例分析
2015/06/30 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
python psutil监控进程实例
2019/12/17 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
九州传奇上机题
2014/07/10 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
超市创业计划书
2014/04/24 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
英语复习计划
2015/01/19 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
Nginx快速入门教程
2021/03/31 Servers