nodejs利用ajax实现网页无刷新上传图片实例代码
作者:pspgbhu 发布时间:2024-05-13 10:05:11
标签: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官方文档
来源:http://www.cnblogs.com/pspgbhu/p/5794160.html
0
投稿
猜你喜欢
- 本文实例讲述了python采集百度百科的方法。分享给大家供大家参考。具体如下:#!/usr/bin/python# -*- coding:
- 一、概述1、描述变量类型注解是用来对变量和函数的参数返回值类型做注解,让调用方减少类型方面的错误,也可以提高代码的可读性和易用性。但是,变量
- python中列表的常见操作列表元组的简单操作前面我们已经学过了关于len()函数、赋值运算符及身份运算符的使用,下面简单回顾一下这些在列表
- 前言康威生命游戏设计并不难,我的思路就是借助pygame进行外观的展示,最近一段时间的游戏项目都是使用pygame进行的,做起来比较顺利。内
- 1.多态是指传入不同的对象,产生不同的结果多态指的是一类事物有多种形态(一个抽象类有多个子类,因而多态的概念依赖于继承)定义:多态是一种使用
- 1、切片使用切片来实现列表的倒序排序,mylist[start:end:step],不改变原列表。#!/usr/bin/env python
- 这篇文章主要讲TensorFlow中的Session的用法以及Variable。Session会话控制Session是TensorFlow为
- 本文实例讲述了python实现多进程按序号批量修改文件名的方法。分享给大家供大家参考,具体如下:说明文件名命名方式如图,是数字序号开头,但是
- 本文实例讲述了Python处理命令行参数模块optpars用法。分享给大家供大家参考,具体如下:optpars是python中用来处理命令行
- 一、概念说明柱状图(bar chart),从相同的横坐标出发,以不同的数值大小来设定柱子的高度,进而表示无序或有序的定性数据间某个定量指标的
- 前言在python的模块有两种组织方式,一种是单纯的python文件,文件名就是模块名,一种是包,包是一个包含了若干python文件的目录,
- 作为近两年来最火的编程语言的python,受到广大程序员的追捧必然是有其原因的,如果要挑出几点来讲的话,第一条那就python语法简洁,易上
- 其实这个东西没什么技术含量,就是给大家提供一个给表格加滚动条的思路。运行代码框<html><head><tit
- 大名鼎鼎的FCKeditor终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CK
- 生成Fiboncci Fn数有Θ(1),Θ(n)甚至指数级的算法,不过有Θ(log n)的吗?告诉你,有。首先,关于Fibonacci数,有
- 随着因特网的发展,在网络环境中,数据库应用渐渐向操作简单、功能实用的方向发展。本文介绍如何利用ASP技术实现对数据库进行在线维护的方法,并给
- 很多开发人员在刚开始学Python 时,都考虑过像 c++ 那样来实现 singleton 模式,但后来会发现 c++ 是 c++,Pyth
- sql不常用函数总结以及事务,增加,删除触发器 distinct 删除重复行 declare @x 申明一个变量 convert(varch
- 游标为您提供了在逐行的基础上而不是一次处理整个结果集为基础的操作表中数据的方法。 1.如何使用游标 1)定义游标语句 Declare <
- 近来想要做一做人脸识别相关的内容,主要是想集成一个系统,看到opencv已经集成了三种性能较好的算法,但是还是想自己动手试一下,毕竟算法都比