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 ...
随机推荐
- nuxtJs - axios 的 IE 兼容性的问题
因为考虑SEO, 所以采用nuxt.js进行服务端渲染, 用熟了vue, nuxt无缝对接简直不要太爽 烦人的需求又来了, 要兼容IE ~~ 兼容处理 无非就是babel 将高级语法转成弱智IE看得懂 ...
- center os7 安装mysql
安装mariadb MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险, ...
- CQOI2007 余数之和
Time Limit: 5 Sec Memory Limit: 128 MB Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + ...
- [Luogu1821][USACO07FEB]银牛派对Silver Cow Party
由题意可知,我们需要求的是很多个点到同一个店的最短距离,然后再求同一个点到很多个点的最短距离. 对于后者我们很好解决,就是很经典的单源最短路径,跑一边dijkstra或者SPFA即可. 然而对于前者, ...
- ubuntu 解压zip 文件乱码
用 unzip -O cp936 就可以了, 但是,有些发行版所带的 unzip 没有这个参数,比如 ArchLinux 就需要安装 unzip-iconv. Ubuntu 12.04 里面的 unz ...
- JMeter生成UUID方式
1. 使用JMeter工具中自带的函数__UUID 2. 使用Beanshell组件,在脚本中引入java.util.UUID,通过java来生成 import java.util.UUID; UUI ...
- springMVC的controller更改了,如何不重启,而自动刷新的解决办法(亲测,一招解决)
Tomcat con/ service.xml 配置如下一行代码: <Context reloadable="true"/> </Host> 然后以de ...
- Windows系统启动iis方法详解
很多网友一般都用Windows 系统自带的iis服务器来配置web网站,在本地进行调试和修改后才正式上线.虽说操作不难,但是小白来说却无从下手,很多人根本不知道iss在哪,怎么启动,更谈不上配置或者其 ...
- C# 实现软件注册功能
相信很多初学编程的人都会对这个注册功能很感兴趣,我也不例外,刚学asp.net时,竞找不到这方面的实例,结果自己参考微软的一些文档自己做了一个,其实我做的这个注册功能很简单,读取计算机的CPU序列号, ...
- 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...