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
Nov 08 NodeJs
nodejs教程之入门
Nov 21 NodeJs
nodejs中转换URL字符串与查询字符串详解
Nov 26 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
Nov 23 NodeJs
实例详解Nodejs 保存 payload 发送过来的文件
Jan 14 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
nodejs 图解express+supervisor+ejs的用法(推荐)
Sep 08 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
基于nodejs的雪碧图制作工具的示例代码
Nov 05 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
May 30 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php中关于换行的实例写法
2019/09/26 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
药学专业个人自我评价
2013/11/11 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
统计系教授推荐信
2014/02/28 职场文书
优秀教师演讲稿
2014/05/06 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
《失物招领》教学反思
2016/02/20 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
2019教师的学习计划
2019/06/25 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫