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(一)--- Node.js简介及安装开发环境
May 20 NodeJs
nodejs npm package.json中文文档
Sep 04 NodeJs
初始Nodejs
Nov 08 NodeJs
nodejs教程之环境安装及运行
Nov 21 NodeJs
详解nodejs 文本操作模块-fs模块(四)
Dec 22 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
深入理解nodejs中Express的中间件
May 19 NodeJs
Nodejs实现多房间简易聊天室功能
Jun 20 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 NodeJs
详解NodeJS模块化
Jun 15 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
thinkphp备份数据库的方法分享
2015/01/04 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python扩展内置类型详解
2018/03/26 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Django 解决由save方法引发的错误
2020/05/21 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
医院院务公开实施方案
2014/05/03 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
迎新生晚会主持词
2015/06/30 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
如何有效防止sql注入的方法
2021/05/25 SQL Server