ajax传图片以及后台接收,前端ajax上传文件,图片,后端nodejs接收文件;
前端ajax上传文件,图片,后端nodejs接收文件;
学习了nodejs,就想实现一下有进度条的文件上传,html
在作这个功能的时候遇到的问题前端
用普通的ajax没法实现文件上传,只能post,get,一些json,string字符串;node
想要上传文件或者图片,能够添加form上传;注意须要在form上添加 标示 enctype="multipart/form-data"ajax
缺点,这样会倒置页面的刷新;很糟糕有没有json
还能够在页面中添加一个ifame,将表单提交到ifame中,不过,一据说有iframe就有点糟心有没有;后端
因而就有了下面的东西;
请自动忽略没有样式(只是为了实现功能)这个梗,啊哈哈;闭包
好了废话少说直接上代码app
前端部分代码
Document
.progressBar{
width: 150px;
height: 15px;
border: 1px solid red;
/*display: none;*/
border-radius: 5px;
}
.bar {
width: 0;
height: 100%;
background: #08d09a;
border-radius: 5px;
line-height: 0;
margin: 0;
}
提交
var btn = document.getElementById('submit');
var fileInputElement = document.getElementById('fileInputElement');
var bar = document.getElementsByClassName('bar')[0];
var progressBar = document.getElementsByClassName('progressBar')[0];
btn.onclick =function(){
progressBar.style.display = 'block';
var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456);
// 数字123456被当即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);
var oFileBody = 'hey!'; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
var oReq = new XMLHttpRequest();
oReq.open("POST", "/formupload");
// 文件上传过程的回调
oReq.upload.onprogress = function(e) {
console.log((e.loaded/e.total)*100+'%')
bar.style.width = (e.loaded/e.total)*100+'%';
}
/**
* e.loaded 文件已经上传了的大小
* e.total 文件总大小
e.loaded/e.total)*100+'%' 转化成比例;
*/
// 文件上传完毕的回调
oReq.upload.onloadend = function(e) {
console.log('接收完成'+e.loaded+'/'+e.total);
setTimeout(function(){
progressBar.style.display = 'none';
bar.style.width = 0;
},1000)
}
oReq.send(oMyForm);
}
用到了 FormData 类;
使用方法dom
经过new FormData 建立一个form提交实例对象;此对象会有append方法,异步
用法 oMyform.append(name,value) name是一个字段,value是对应的值(能够是字符串,数字,file文件(经过dom.files[0]得到))
var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456);
oMyForm.append("userfile", fileInputElement.files[0]);
用到了XMLHttpRequest 的 onprogress 和 onloadend
注意 onprogress、onloadend、须要经过xhr.upload 调用以下;
oReq.upload.οnprοgress=function(e){
console.log(e.loaded)
console.log(e.total)
};
oReq.upload.onloadend=function(e){};
nodejs 后端的处理
主要用到了formidable模块
主要代码逻辑
/**
* [导出一个中间件,formupload,用于处理文件上传;]
*/
exports.formupload = function(req,res,next){
//console.log(req);
var form = new formidable.IncomingForm();
var uploadDir = path.normalize(__dirname+'/'+"../avatar");
form.uploadDir = uploadDir;
console.log(uploadDir);
form.parse(req, function(err, fields, files) {
for(item in files){
(function(){
var oldname = files[item].path;
var newname = files[item].name === 'blob' ? oldname+'.xml' : oldname+"."+files[item].name.split('.')[1];
fs.rename(oldname,newname,function(err){
if(err) console.log(err);
console.log('修改为功');
})
})(item);
}
console.log(util.inspect({fields: fields, files: files}));
res.send('2');
});
遇到的问题
for 循环中有异步逻辑,致使异步逻辑出现问题;
formidable 的上传文件路径用相对路径会找不到所指定的路径
解决办法
能够用闭包实现,每次传进到闭包的变量不会受到外界的影响;
用牛逼的__dirname 变量;指向当前文件的绝对路径;
ajax传图片以及后台接收,前端ajax上传文件,图片,后端nodejs接收文件;相关推荐
- canvas使用Ajax上传图片PHP,使用ajax上传图片,并且使用canvas实现出上传进度效果...
前端代码: 使用ajax上传图片,并使用canvas实现出上传进度效果 #myImg { border: 1px solid gray; border-radius: 8px; position: a ...
- js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例 包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
- php 图片上载 wordpress,WordPress 使用 Jcorp上传并裁剪图片作为自定义头像 —— PHP 后台部分...
在开发 WordPress 用户中心的时候,我们需要让用户在前段上传自定义图片作为头像,因为很多用户都是小白,上传头像之前要求他们按照尺寸裁剪好是不大现实的.为了提升用户体验,我研究测试了很久,终于搞 ...
- django后台接收form-data 格式上传的文件
1,浏览器端端js程序 浏览器以from-data表单的格式上传文件. 2,django后端处理程序 接收来自浏览器上传的文件,并把文件存储在一指定的路径下. product_id = request ...
- 前端表单七牛云php,记录一下前端分片上传七牛云踩过的坑
起因 最近在工作中有个上传大文件的需求,原先咨询过组里的大佬给我推荐了百度的webupload,但后来引入之后发现它是基于jquery封装的.由于本身项目是基于vue开发的所以与jquery相关的开源 ...
- 完美解决前端无法上传大文件方法
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- 特别编辑--windows+python+django实现前端页面上传到指定路径生成个性化二维码
等你点蓝字关注都等出蜘蛛网了 坚持梦想 就算所有人都不支持你.这条路会很曲折,你也会一度认为是不是自己选错了,但只要坚持,就算最后没有成功,但努力了就不会有遗憾. python-前端页面上传文件到指定 ...
- Web安全 文件上传漏洞的 测试和利用.(上传一个图片或文件 拿下服务器最高权限.)
文件上传漏洞的概括 现在大多的网站和Web应用系统都会有上传功能(比如:文档,图片,头像,视频上传等.),而程序员在开发文件上传功能时,没有对代码做严格校验上传文件的后缀和文件类型. 此时攻击者就可以 ...
最新文章
- 昌邑机器人_上下料机器人昌邑机器人生产工厂
- 基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览
- 工作309:uni-获取vuex里面的值
- oracle数据库从入门到精通
- 大数据之-Hadoop3.x_Hadoop_HDFS_总结---大数据之hadoop3.x工作笔记0080
- CommonLibrary——框架通用工具库
- Python破解wifi密码
- PR预设:100种缩放旋转移动摇晃变形分割转场预设Transitions Pro for win/Mac​
- python尔雅答案_2020尔雅通识课Python》程序设计查题公众
- NTP网络校时(北斗卫星授时设备)技术核心源码让网络时间同步不再难
- 【图解CAN总线】-6-classic CAN 2.0总线网络“负载率”计算
- 2020年鼠年正月十二 淡然面对
- Java全栈工程师学习
- 被误解的tinyint(1)
- composer init 命令详解
- 量子力学的诡异现象—朱清时教授
- HTML5移动端开发常见的兼容性总结
- 看完这篇让你高数不挂科之——泰勒公式
- 放飞App:移动产品经理实战指南
- 技术贴,关于Rhino各类版本无法打开问题
热门文章
- Excel LOOKUP函数
- php天气源码_php 天气预报代码
- 计算机等级一级WPS操作题,2016计算机等级考试《一级WPS》练习题及答案
- 华为服务器告警显示风扇不在位,华为机架服务器RH2285 运行时噪声很大故障的解决...
- mq多个消费者消费一个消息_限塑“动真格”,他们免费给消费者发了5000多个无纺布购物袋...
- 背包问题(0-1背包问题和完全背包问题)
- 小米 mini 可编程路由
- 麦当劳在新疆首开两家全新旗舰餐厅;万豪集团旗舰酒店品牌入驻东北地区 | 美通企业日报...
- tmall.item.schema.increment.update( 天猫根据规则增量更新商品 )
- 大型语言模型中的隐私考量