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编码。
与后台对接
既然前端使用文件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)中的fields与files到底是什么对象,一定要自己调试着看。看完你就明白是什么了。
之前我不清楚的时候就是打开浏览器就搜索,结果可想而知很惨,几乎全是错的。
所以不清楚的话一定要去查github。
还有app.use(bodyParser.urlencoded({ extended: true }));的作用是用来解析我们通常的form表单提交的数据,也就是请求头中包含这样的信息: Content-Type: application/x-www-form-urlencoded
app.use(bodyParser.json())是用来解析json的。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!
本文向大家介绍SpringMVC上传图片与访问,包括了SpringMVC上传图片与访问的使用技巧和注意事项,需要的朋友参考一下 关于springmvc上传图片的方法小编给大家整理了两种方法,具体内容如下所示: 第一种:(放在该项目下的物理地址对应的位置) a. 路径写法: String basePath="/WEB-INF/resources/upload"; String filePathNam
上传证件照片。支持 jpeg、jpg、bmp、png 格式,图片大小不超过2M。 // $path string 图片路径 $response = $app->media->upload($path);
问题内容: Q.1我想将这种形式转换为ajax,但似乎我的ajax代码缺少某些内容。提交根本不做任何事情。 Q2。我还希望在选择文件时不等待提交时在更改时触发该函数。 这是JS。 和HTMl与php。 问题答案: 首先在ajax调用中包含成功和错误功能,然后检查它是否给您错误或什么? 您的代码应该像这样
使用指南 组件介绍 图片上传组件 引入方式 import { Uploader } from 'feart'; components: { "fe-uploader": Uploader, }, 代码演示 基础用法 文件上传完毕后会触发 after-read 回调函数,获取到对应的 file 对象 <fe-uploader :after-read="afterRead" /> exp
图片上传 图片上传的实现主要使用了微信原生API wx.chooseImage(OBJECT) <template> <div class="page"> <div class="weui-uploader__bd"> <div class="weui-uploader__files" id="uploaderFiles"> <block v-for="it
接口说明 需要将图片上传到服务器上进行保存,然后接口会返回服务器图片的相对路径,开发者需要将路径保存起来 如需调用,请访问 开发者文档 来查看详细的接口使用说明 该接口仅开放给已获取SDK的开发者 API地址 POST /api/marker/1.0.0/uploadTabImg 是否需要登录 是 请求字段说明 参数 类型 请求类型 是否必须 说明 image MultipartFile form
本文向大家介绍jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享,包括了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享的使用技巧和注意事项,需要的朋友参考一下 网页端 裁剪图片,不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas
本文向大家介绍ajax图片上传,图片异步上传,更新实例,包括了ajax图片上传,图片异步上传,更新实例的使用技巧和注意事项,需要的朋友参考一下 最近在研究ajax图片上传,图片异步上传,更新,留作参考。 直接上源码吧: js源码: js: html代码: 服务器端使用一般处理程序: 程序使用的是framework4.0,所以使用了一些扩展方法。 JsonTesult类代码: StatusMess