利用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. vue星级评分组件

    <template> <div class="Rating-gray"> <i v-for="(item,index) in itemCla ...

  2. oracle常用sql汇总(随时更新)

    1.wm_concat:将返回的多行数据汇总为一列,用,分割,数据类型默认为CLOB类型 2. 递归查询(树状结构数据查询,如菜单,部门等等) SELECT [LEVEL],* FEOM table_ ...

  3. 每天一个linux命令:more(13)

    more more命令是一个基于vi编辑器文本过滤器,它以全屏幕的方式按页显示文本文件的内容,支持vi中的关键字定位操作.more名单中内置了若干快捷键,常用的有H(获得帮助信息),Enter(向下翻 ...

  4. paper 150:GCC--GNU Compiler Collection(GNU编译器套件)

    gcc命令 编程开发            gcc命令使用GNU推出的基于C/C++的编译器,是开放源代码领域应用最广泛的编译器,具有功能强大,编译代码支持性能优化等特点.现在很多程序员都应用GCC, ...

  5. 数字滚动动画效果 vue组件化

    参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments 主要思路是利用css属性writing- ...

  6. BZOJ 3772: 精神污染(dfs序+主席树)

    传送门 解题思路 比较神仙的一道题.首先计算答案时可以每条路径所包含的路径数,对于\(x,y\)这条路径,可以在\(x\)这处开个\(vector\)存\(y\),然后计算时只需要算这个路径上每个点的 ...

  7. [CSP-S模拟测试]:阴阳(容斥+计数+递推)

    题目传送门(内部题16) 输入格式 第一行两个整数$n$和$m$,代表网格的大小.接下来$n$行每行一个长度为$m$的字符串,每个字符若为$W$代表这个格子必须为阳,若为$B$代表必须为阴,若为$?$ ...

  8. pdf兼容问题不能正常预览

    刚开始以为是这个PDF文件过大导致的 发现其他更大的文件也能正常显示 考虑到PDF的兼容问题 由于导出的PDF格式不兼容导致,如果有这种情况,可以尝试用word2016打开pdf文件,再导出成pdf.

  9. spring boot 尚桂谷学习笔记07 嵌入式容器 ---Web

    ------配置嵌入式servlet容器------ springboot 默认使用的是嵌入的Servlet(tomcat)容器 问题? 1)如何定制修改Servlet容器的相关配置: 1.修改和se ...

  10. 3403. 题解【NOIP2013模拟】数列变换 (Standard IO)

    先看题目: Description 小X 看到堆成山的数列作业十分头疼,希望聪明的你来帮帮他.考虑数列A=[A1,A2,...,An],定义变换f(A,k)=[A2,A3,,,,.Ak,A1,Ak+2 ...