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

通常情况下上传图片是要通过提交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官方文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • nodejs 图片预览和上传的示例代码

    nodejs 图片预览和上传的示例代码

    本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

  • 详解nodejs实现本地上传图片并预览功能（express4.0+）

    详解nodejs实现本地上传图片并预览功能（express4.0+）

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax

  • nodejs 整合kindEditor实现图片上传

    kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单 环境: unbuntu 14.10 nodejs 0.10.35 express 4.11.2 formidable 1.0.16 kindEditor 4.1.10 webStorm 8 1.通过IDE或终端创建一个名称为test的工程 2.编辑package.json添加form

  • NodeJS实现图片上传代码(Express)

    NodeJS实现图片上传代码(Express)

    文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始. 页面样式 Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式: <div class="upload-container"> <input type="file" name="fileToUpload&q

  • Nodejs+angularjs结合multiparty实现多图片上传的示例代码

    这次我们说一下nodejs+angularjs多图片上传的问题 此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没有成功的,折磨了我很长时间,最终也是成功实现了,于是想写下这篇文章,分享我的代码,也希望后人不要踏进我的坑. 首先说一下nodejs所以依赖的插件 multiparty 和 fs,可以用npm工具来安装 npm install multiparty --save npm install fs --save 先贴出我nodejs的后台代码(注意

  • 轻松创建nodejs服务器（10）：处理上传图片

    轻松创建nodejs服务器（10）：处理上传图片

    本节我们将实现,用户上传图片,并将该图片在浏览器中显示出来. 这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable模块.它对解析上传的文件数据做了很好的抽象. 要安装这个外部模块,需在cmd下执行命令: 复制代码 代码如下: npm install formidable 如果输出类似的信息就代表安装成功了: 复制代码 代码如下: npm info build Success: formidable@1.0.14 安装成功后我们用request将其引入

  • 图片上传之FileAPI与NodeJs

    图片上传之FileAPI与NodeJs

    HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"> <label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label> <div class="col-md-9"> <in

  • angular2+nodejs实现图片上传功能

    在使用angular2进行图片上传的时候,遇到了各种各样的问题.在多番尝试之后最终成功上传图片,下面将我的方法分享给大家: nodejs 后台代码 var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require('fs'); //引入body-parser //包含在请求正文中提交的键/值对数据. //默认

  • ajax +NodeJS 实现图片上传实例

    ajax +NodeJS 实现图片上传实例

    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi

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

    通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormData()对象可以有效的解决这个问题 废话不多说 直接上关键代码: html部分 <div class="form-group"> <label>File input</label> <input type="file" name="file" id="file">

  • swfupload ajax无刷新上传图片实例代码

    最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点.这里用到的是一个插件swfupload 实现无刷新上传图片.直接上传我的代码供大家参考. 前台代码区: 复

  • php ajax无刷新上传图片实例代码

    AJAX 客户端页面代码: index.html 复制代码 代码如下: <html> <body> <h1>Ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/> <div id=result></di

  • Ajax实现无刷新分页实例代码

    Ajax实现无刷新分页实例代码

    今天我们要用ajax做一个分页: 实现Ajax分页: 如果可以的话加上查询条件 找一张表做分页 分页不使用page类 页面不用刷新 Ajax加载数据 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.

  • jQuery+AJAX实现网页无刷新上传

    jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

  • PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)

    看点: 1.file_get_contents超时控制. 2.页面编码判断. 3.键盘Enter键捕捉响应. 4.键盘event兼容处理.//event = event || window.event; 5.XMLHttpRequest 和 jQuery 两种实现方案. 6.页面及源码同时展示. XMLHttpRequest版本 get_web.php 复制代码 代码如下: <?php header("Content-type: text/html; charset=utf-8"

  • jQuery 无刷新分页实例代码

    复制代码 代码如下: <html> <head>     <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="script/jquery-1.7.1.js"></script>       

  • asp.net 无刷新分页实例代码

    数据类代码: 复制代码 代码如下: using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.SqlClient;using System.Collections;using System.Reflection; namespace DAL{    public  class UserManageClass    {  

  • Ajax实现页面无刷新留言效果

    Ajax实现页面无刷新留言效果

    利用Ajax实现页面无刷新留言效果 实现效果 前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕之后,从来没有见过页面重新刷新加载的效果,那么这个究竟是怎么做成的呢,也就是利用Ajax技术,页面无刷新效果,废话不多说,直接上代码. 实现效果 html部分: <div class="container"> <h1 class="display-1">留言板</h1> <hr> <div id="loa

  • php+ajax无刷新上传图片的实现方法

    php+ajax无刷新上传图片的实现方法

    本文实例讲述了php+ajax无刷新上传图片的实现方法.分享给大家供大家参考,具体如下: 1.引入文件 <!--图片上传begin--> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js">&l

随机推荐