利用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. Prometheus指标采集常用配置

    一.node-exporter配置textfile收集器 textfile收集器作用: 运行暴露自定义指标.例如,需要在某个被监控节点上添加一个地理位置的指标. node-exporter会自动启动t ...

  2. ruby语法之方法

    ruby中的方法相当于python的函数 其定义规则为: 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常量,从而导致不正确地解析调用. 方法应在调用之前定义,否则 ...

  3. 解决 linux 下安装 node 报: command not found

    注意:有时安装成功后,需要关闭xshell,重新启动.nvm才会生效. 1. 在 linux 下安装 node 提示 -bash:  node: command not found. 2. 这种情况可 ...

  4. Web核心之tomcat汤姆猫

    web相关概念 1. 软件架构 1. C/S:客户端/服务器端 2. B/S:浏览器/服务器端 2. 资源分类 1. 静态资源:所有用户访问后,得到的结果都是一样的,称为静态资源.静态资源可以直接被浏 ...

  5. BestCoder Round #92 (hdu 6015 6016)

    比赛链接 A题主要是map的使用,比赛的时候问了下队友,下次要记住了 #include<bits/stdc++.h> using namespace std; typedef long l ...

  6. mui is not defined

    vue项目中引用mui.js,我是在main.js中这样引入的,    结果报错  查找资料,最后在mui.js的最后添加了这样一句  这是因为mui并不能像jquery那样作为全局对象存在,加上wi ...

  7. 【JVM】垃圾收集器和收集器的选择策略

    前言:新生代的收集器有:Serial,ParNew,Parallel Scavenge等.老年代有:CMS,SerialOld,Paraller Old等.接下来将深入理解各个垃圾收集器的原理,以及它 ...

  8. EditText设置/隐藏光标位置、选中文本和获取/清除焦点(转)

    转:http://blog.csdn.net/dajian790626/article/details/8464722 有时候需要让光标显示在EditText的指定位置或者选中某些文本.同样,为了方便 ...

  9. Linux基本常用命令|ubuntu获取root权限

    我用的是ubuntu12.4系统,因为默认是没有获取root的权限的 下边讲解怎么获取root权限 在终端中输入: sudo passwd root Enter new UNIX password: ...

  10. Nuget-Doc:NuGet 介绍

    ylbtech-Nuget-Doc:NuGet 介绍 NuGet 是适用于 .NET 的包管理器. 它使开发人员能够创建.共享和使用有用的 .NET 库. NuGet 客户端工具可生成这些库并将其作为 ...