ajax+node实现图片上传
利用formData实现ajax上传图片后,保存图片到指定收藏夹,然后展示新重命名后的图片
html:
<input type="file" id="uploadImg" onchange="uploadfile1()">
javascript:
<script>
function uploadfile1() {
console.log('changed')
var form = new FormData();
// // form.append('user', document.getElementById('user').value); var fileobj = document.getElementById('uploadImg').files[0];
console.log(fileobj)
form.append('img', fileobj);
console.log(form)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
var data = JSON.parse(xhr.responseText);
if (data.status === 200) {
console.log(data)
var img = document.createElement('img');
img.setAttribute('src', data.img);
img.setAttribute('class', 'upload-img');
console.log(img)
document.body.appendChild(img)
}
}
};
xhr.open('POST', 'http://localhost:8080/upload', true);
xhr.send(form);
}
</script>
node:
var http = require('http');
var fs = require('fs');
var multiparty = require('./node_modules/multiparty');
var server = http.createServer(function (requset, response){
var form = new multiparty.Form(); form.parse(requset, function (err, filelds, files) {
console.log(files)
fs.renameSync(files.img[0].path, __dirname + '/img/upload.jpeg');
}); response.setHeader("Access-Control-Allow-Origin", "*"); let data = {
status: 200,
img: './img/upload.jpeg'
}; response.end(JSON.stringify(data));
}); server.listen(8080);
console.log('server is running at http://127.0.0.1:8080/');
ajax+node实现图片上传的更多相关文章
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- 一个node.js图片上传显示小应用
文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...
- node.js图片上传
1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...
- Nodejs之MEAN栈开发(四)---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
- form验证及图片上传
form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...
- nodejs图片上传
node中图片上传的中间键很多,比如formidable等,这里我们使用nodejs中的fs来实现文件上传处理: 1.安装中间键connect-multiparty npm install conne ...
- 使用express+multer实现node中的图片上传
使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...
- Node.js实现图片上传功能
node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...
- 基于Node的React图片上传组件实现
写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...
随机推荐
- HTML 地理定位 的实例
<!DOCTYPE html> <html lang="en"> <head> <title>地理定位</title> ...
- linux下清空文件内容
在命令行下#cat /dev/null >listener.log
- shiro 安全框架 详解
---恢复内容开始--- Shiro 简介 简介• Apache Shiro 是 Java 的一个安全(权限)框架.• Shiro 可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE 环境, ...
- Mac OS 网络设置教程 wifi设置与宽带设置详解
虽然所有设备连接无线网络的步骤都相差无几,但是Mac与windows系统还是不相同的,那么,苹果Mac怎么连接无线网络呢?针对此问题,本文就为大家介绍Mac网络的设置教程,有兴趣的朋友们可以了解下.如 ...
- ApplicationContext.xml模板
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www. ...
- mybatis框架之装饰模式
学习开源框架源码,除了储备点知识以便于与面试官互相忽略之外,我想最重要的还是去学习大神如何写代码,如何做到职责单一,如何做到可扩展等... 本篇,试着总结一下mybatis在缓存模块使用到的装饰模式. ...
- springboot实战(汪云飞)学习-1-2
java EE开发的颠覆者 spring boot 实战 随书学习-1 接上一篇,Java配置的学习(还是上一篇的项目中,添加新的包和代码): java配置是spring4.x推荐的配置方式,可以完全 ...
- 使用CSS在页面中嵌入字体
http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html 首先感谢css9.net照抄原话: 字体使用是网页设计中不可或缺的一部分. ...
- Oracle -操作数据库
删除数据: delete:用delete删除记录,Oracle系统会产生回滚记录,所以这种操作可以使用ROLLBACK来撤销 truncate:删除数据时,不会产生回滚记录.所以执行速度相对较快些 可 ...
- 科普:std::sort干了什么
std::sort算是STL中对OIer比较友好的函数了,但你有想过sort是如何保证它的高速且稳定吗? 正文 我们首先来到第一层:sort函数 template<typename _Rando ...