HTML5之fileAPI


HTML5之fileAPI使得我们处理图片上传更加简单。

实例

html代码

<div class="form-group">
<label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label>
<div class="col-md-9">
<input type="text" readonly="" class="form-control" placeholder="点击选择文件">
<input type="file" id="modal_inputFile">
<img src="" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">
</div>
</div>

效果:

这里我们可以通过$("#modal_inputFile")[0].files[0]来获取到图片的信息。

这里有name,size,type这几个我们常用的属性。

实现预览

选择好图片后,我们都希望会有个预览功能。这个html5也为我们想到了。

他提供了FileReader这个新的对象给我们。

FileReader该接口主要用来把文件读入内存,并且读取文件中的数据。

这样我们就可以通过date url来实现预览了。

var file = document.getElementById(modal_inputFile'').files[0];
if (!file) {
return false;
}
var reader = new FileReader(); reader.readAsDataURL(file);
reader.onload = function(e) {
var ib_pre = document.getElementById('modal-pre');
ib_pre.src = this.result;
}

这样就实现了预览。

我们再来查看下img的src。

<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">

src是base64编码。

具体可见:HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

与后台对接


既然前端使用文件API能满足我们的需求,那我们接下来就需要上传到服务端了。当仁不让的就是NodeJs了。

前端请求

下面是前端发起请求的例子:

//图片上传
$('#preUpload').on('click', function(e) {
var data = new FormData();
var _files = $("#modal_inputFile")[0].files[0];
var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];
if(ect !== 'png'){
alert('请上传png图片!')
return;
}
data.append("modal_file", _files);
$.ajax({
type: 'post',
dataType: 'json',
url: window.stnt_hosts + 'thirdAdmanage/upload/modal',
data: data,
contentType: false,
processData: false
}).done(function(data, status) {
console.log('上传成功'); }).fail(function(err) {
console.log('上传失败');
})
})

这里通过FormData来处理我们需要上传的数据。

这里的data数据是一个序列过的对象。后台接受就行了。

后端处理

服务端我们使用node-formidable来处理图片的保存等操作。

见代码:

var formidable = require("formidable");
var form = new formidable.IncomingForm(); //临时目录
form.uploadDir = './upload/'; //预览图片上传
router.post('/upload/modal', function(req, res, next) {
form.parse(req, function(err, fields, files) {
if (files.modal_file) {
rename(files.modal_file.path, files.modal_file.name, 'preview')
res.send({
stats:'success',
data:[]
})
}
})
}); function rename(old, _new, code, bId) {
var path = './upload/' + code + '/';
fs.exists(path, function(exists) {
if (!exists) {
fs.mkdir(path)
console.log('创建文件夹!')
}
fs.renameSync(old, path + _new, function(err) {
if (err) {
console.log(err); return;
}
console.log('上传成功!')
})
})
}

这里使用fs.renameSync的原因是,我们里面设置的临时目录form.uploadDir是存在于内存中的数据,并不是真正的图片。

类似这样

我们需要通过fs的方法,将文件重新保存到我们需要的地方即可。这时候就是图片了。

最后


这里的form.parse(req, function(err, fields, files)中的fieldsfiles到底是什么对象,一定要自己调试着看。看完你就明白是什么了。

之前我不清楚的时候就是打开浏览器就搜索,结果可想而知很惨,几乎全是错的。

所以不清楚的话一定要去查github。

还有app.use(bodyParser.urlencoded({ extended: true }));的作用是用来解析我们通常的form表单提交的数据,也就是请求头中包含这样的信息: Content-Type: application/x-www-form-urlencoded

app.use(bodyParser.json())是用来解析json的。

具体关于bodyParser的见这位博友的文章bodyParser中间件的研究

图片上传之FileAPI与NodeJs的更多相关文章

  1. nodeJs实现微信小程序的图片上传

    今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...

  2. nodejs图片上传

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

  3. NodeJs实现图片上传

    关于formidable NodeJs实现图片上传,此处主要用了插件:formidable github上关于formidable的资料如下: https://github.com/felixge/n ...

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

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

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

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

  6. 本地图片上传与H5适配知识

    最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...

  7. 浅析H5图片上传

    概述 最近需求上需要实现图片上传的功能,简单记录下实现过程.目前实现的功能比较简单,主要有以下几点: 图片预览 图片删除 拖拽上传 压缩上传 移动端实现方案:使用File API 主要使用到 File ...

  8. multer实现图片上传

    multer实现图片上传: ejs代码: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

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

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

随机推荐

  1. 丑数 LeeTCode

    题目链接:http://www.lintcode.com/zh-cn/problem/ugly-number-ii/ 题目描述:设计一个算法,找出只含素因子2,3,5 的第 n 大的数.符合条件的数如 ...

  2. PDF 补丁丁 0.5 正式版发布

    经过了两年的测试,新版本的 PDF 补丁丁已经比较稳定了.在农历新年前发布这个 0.5 版,作为正式稳定版吧. 新的 PDF 补丁丁比旧的 0.3 版增加了许多功能: PDF 可视化编辑文档书签,可从 ...

  3. andorid之摄像头驱动流程--MTK平台

    原文地址:andorid之摄像头驱动流程--MTK平台 作者:守候心田 camera成像原理: 景物通过镜头生产光学图像投射到sensor表面上,然后转为模拟电信号,经过数模变成数字图像信号,在经过D ...

  4. STM32 的加密实现(转)

    源:STM32 的加密实现 基于STM32F103的ID号对应用程序的保护方法 目的:对运行于STM32的嵌入式代码程序进行加密 编译环境:IAR Embedded System for ARM5.5 ...

  5. H5手机开发锁定表头和首列(惯性滚动)解决方案

    前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...

  6. 在windos 环境下安装

    在windows 环境下安装node 和 StrongLoop需要一些几个步骤. 本人使用的安装软件,文章最后的分享. 1,安装Git: 2,安装Node.js: 3,安装npm: 4,安装Stron ...

  7. Vue.js起步

    Vue.js是一套构建用户界面的 渐进式框架,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层.Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. V ...

  8. iOS开发——MD5加密

    #import <CommonCrypto/CommonDigest.h> - (NSString *)md5:(NSString *)str { const char *cStr = [ ...

  9. PHPEXCEL实例-导出EXCEL

      PHPExcel 是相当强大的 MS Office Excel 文档生成类库,当需要输出比较复杂格式数据的时候,PHPExcel 是个不错的选择. <?php /* * 导出EXCEL *  ...

  10. UVa 459 - Graph Connectivity

    题目大意:给你一个无向图的顶点和边集,让你求图中连通分量的个数.使用并查集解决. #include <cstdio> #include <cstring> #define MA ...