利用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实现图片上传的更多相关文章

  1. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  2. 一个node.js图片上传显示小应用

    文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...

  3. node.js图片上传

    1.node-formidable 对文件上传提供帮助的组件 2.app.js var formidable = require('formidable'); var http = require( ...

  4. Nodejs之MEAN栈开发(四)---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  5. form验证及图片上传

    form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...

  6. nodejs图片上传

    node中图片上传的中间键很多,比如formidable等,这里我们使用nodejs中的fs来实现文件上传处理: 1.安装中间键connect-multiparty npm install conne ...

  7. 使用express+multer实现node中的图片上传

    使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...

  8. Node.js实现图片上传功能

    node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...

  9. 基于Node的React图片上传组件实现

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循R ...

随机推荐

  1. [BZOJ3626] [LNOI2014] LCA 离线 树链剖分

    题面 考虑到询问的\(l..r,z\)具有可减性,考虑把询问差分掉,拆成\(r,z\)和\(l-1,z\). 显然这些LCA一定在\(z\)到根的路径上.下面的问题就是怎么统计. 考虑不是那么暴力的暴 ...

  2. PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别

    PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别 数据库 oracle for update of   和   for update区别     select * from T ...

  3. SEERC 2018 I - Inversion (Gym - 101964I) DP

    Gym - 101964I 题意 有一个数组\(p\),如果满足\(i<j,p_i>p_j\),则\(i,j\)之间就有一条边相连,问存在多少个集合满足集合内的元素互不相连,且集合外的元素 ...

  4. 创建Spring Boot 工程

    先在eclipse中安装spring -tool -suite插件,然后根据以下步骤可以创建   1.新建Spring Starter Project 2.Packaging 选择 jar 3.勾选W ...

  5. STM32几个IO的工作模式

    浮空,顾名思义就是浮在空中,上面用绳子一拉就上去了,下面用绳子一拉就沉下去了.  开漏,就等于输出口接了个NPN三极管,并且只接了e,b. c极 是开路的,你可以接一个电阻到3.3V,也可以接一个电阻 ...

  6. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

  7. 出席分布式事务Seata 1.0.0 GA典礼

    前言 图中那个红衣服的就是本人 什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上. 简单的说,就是一次大的操作由不同的小 ...

  8. python unittest 之mock

    1.什么是mockunittest.mock是一个用于在Python中进行单元测试的库,Mock翻译过来就是模拟的意思,顾名思义这个库的主要功能是模拟一些东西.它的主要功能是使用mock对象替代掉指定 ...

  9. Java基本数据类型内存分配

    1.java程序运行时有6中地方存储数据,分别是:寄存器.栈.堆.静态存储.常量存储.非RAM(随机存储器),主要是堆与栈的存储.   2.堆与栈是java用来在RAM中存储数据的地方,java自动管 ...

  10. flask扩展系列之 - 访问速度限制

    flask-limiter 是一个对客户端的访问速率进行限制的flask扩展.可以自定义一些访问的(速度)限制条件来把那些触发限制的请求拒之门外.一般常用来进行对爬虫的限制. 下面就常见的用法,举了一 ...