c ajax 上传图片,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 = require('multer');
const path = require('path');
const app = express();
//所有请求过来,都去项目当前的public目录下寻找所请求的文件,找到就返回
app.use(express.static('./public'));
//选择diskStorage存储
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.resolve('public/uploads'));
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname));//增加了文件的扩展名
}
});
const upload = multer({storage: storage});
app.post('/profile', upload.single('avatar'), function(req, res, next) {
res.send({
err: null,
//filePath:就是图片在项目中的存放路径
filePath: 'uploads/' + path.basename(req.file.path)
});
});
app.listen(3000, function () {
console.log("app is listening 3000 port");
});
2.index.html
Title
上传
function handle() {
//获取上传的File对象,此处是一张图片对象
let file = document.getElementById("choose").files[0];
let formData = new FormData();
formData.append("avatar", file);//设置key为avartar,value为上述的File对象
$.ajax({
type: 'POST',
url: '/profile',
data: formData,
processData: false,
success: function (data) {
$(".newImg").attr("src", data.filePath);//上传成功则图片显示
},
error: function (err) {
console.log(err.message);
}
})
}
demo地址在这
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。
nodejs利用ajax实现网页无刷新上传图片实例代码
通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转。利用ajax技术和FormData()对象可以有效的解决这个问题废话不多
nodejs mysql 实现分页的方法
这两天学习了nodejsmysql实现分页,很重要,所以,今天添加一点小笔记。代码如下varexpress=require('express');varrouter=express.Router();varsettings=require('../settings.js'
浅析 NodeJs 的几种文件路径
一、挖坑&掉坑:缘起一段这样的代码:fs.readFile('./docs/use.md',function(err,buffer){if(err){returnconsole.log('error:',err);}console.log('OK');});本地运行时一切OK,线上部
c ajax 上传图片,ajax +NodeJS 实现图片上传实例相关推荐
- js中图片显示用ajax,javascript - 前台用ajax上传图片,怎么让图片上传完成显示的缩略图片的时候显示分辨率大小...
以下是相关代码,现在就是上传上去想让显示以下分辨率,也就是图片的大小,请问应该怎么该才可以,求解答 前台上传文件代码 window.οnlοad=function(){ var type=docume ...
- PHP+webupload身份证正面反面图片上传实例
PHP+webupload实现身份证正面反面图片上传实例,其实原理很简单,就是固定上传两张图片,具体看下面的源代码 自定义两个上传按钮 <div class="upload-image ...
- WebUploader图片上传实例
webuploader-1.1.5 图片上传实例 本插件基于 webuploader插件 进行了封装,提供了三种常用视图,并对常用上传功能进行了JS封装,视图,样式,业务逻辑都已封装(JS),可以直接 ...
- ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单<form id= "uploadForm" enctype="multipart/ ...
- SpringSSM的教师管理系统--ajax版本,分页,图片上传,jsp页面使用bootstrap布局
项目的结构 maven的配置 pom.xml 文件 ](maven的配置 pom.xml 文件) <project xmlns="http://maven.apache.org/POM ...
- jquery php 异步图片上传实例,php结合jquery异步上传图片(ajaxSubmit)
Ajax异步上传图片 functionsky_upfiles(){varmesstxt; $("#sky_upform").ajaxSubmit({//dataType:'scri ...
- php 怎么上传图片,php怎么把图片上传到图片服务器
php怎么把图片上传到图片服务器? 图片服务器代码<?php /** * 图片服务器上传API接口 * by Zx * date 2016-04-28 */ header('Content-ty ...
- php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
- jquery批量上传图片 java_简单多图片上传 jquery+java 代码
/** 添加歌曲 */ function addSong(){ var id=$("#_activity_id").val(); window.location.href = &q ...
最新文章
- andoridView修改
- Chap 07 HTML建立超链接
- 祝天下所有的老师教师节快乐
- Java Web项目--使用JSP生成一个页面
- HDP安全之集成kerberos/LDAP、ranger;安装部署kerberos;安装Knox;安装LDAP;启动LDAP;验证Knox网关
- FastDFS安装与部署
- 甘蔗是怎么变成白糖的?
- Bootstrap 公布长期支持计划,Bootstrap 3 生命周期结束
- 推荐几个非常不错的富文本编辑器
- 范德堡大学计算机专业课程,范德堡大学有电子电气工程专业排名
- 灌区农业水价综合改革解决方案
- 基于最大似然估计与卡尔曼滤波的室内目标跟踪
- Java机器人解密游戏_解谜类游戏 篇十:在机器人的世界中,那些隐藏在谜题之下的眼泪...
- 工业大数据:中国智造下的“数字新基建”
- 英飞凌TC397移植FreeRTOS
- dbeave连接达梦数据库简单操作使用
- linux提取声卡的codec教程,声卡Codec自动解析与ConfigData生成工具(Windows Version)
- Elasticsearch 摄取节点(Ingest Node)使用Pipeline预处理文档
- UEFI-win10-EDK2搭建
- 【WSL】配置zsh
热门文章
- 计算机网络实验数据链路层分析,计算机网络第三次实验-数据链路层
- python sqlsever 时间_Python sqlalchemy时间戳及密码管理实现代码详解
- pb预览状态下的pagecount_我为什么喜欢用Mac【预览】阅读文献?
- 报头中的偏移量作用_C语言中函数的实现
- python解复杂方程组_sympy计算方程组的复杂表达式怎么获得数值解?
- 数据分析结果解读_聚类分析的实际运用及案例解读(二)
- python写接口函数_python接口自动化测试二十:函数写接口测试
- 虚拟机vmnet8每次都要先禁用再启用_【零成本 amp; 超详细】使用Win10自带的Hyper-V管理工具搭建虚拟机...
- OSG与opengl的shader结合
- Android开发之adb命令输入文本到手机输入框中的方法