html提交form预处理,HTML5 之图片上传预处理

在开发 H5 应用的时候碰到一个问题，

应用只需要一张小的缩略图，

而用户用手机上传的确是一张大图，

手机摄像机拍的图片好几 M，这可要浪费很多流量。

获取图片

通过 File API 获取图片。

var input = document.createElement('input');

input.type = 'file';

input.addEventListener('change', function() {

var file = this.files[0];

},false);

input.click();

预览图片

可以使用 createObjectURL() 或者 FileReader 预览图片

但是我一般用的createObjectURL()方法比较多

var img = document.createElement('img');

img.src = window.URL.createObjectURL(file);

var img = document.createElement("img");

var reader = new FileReader();

reader.onload = function(e) {

img.src = e.target.result;

}

reader.readAsDataURL(file);

使用 canvas 做缩略图

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

var MAX_WIDTH = 800;

var MAX_HEIGHT = 600;

var width = img.width;

var height = img.height;

if (width > height) {

if (width > MAX_WIDTH) {

height *= MAX_WIDTH / width;

width = MAX_WIDTH;

}

} else {

if (height > MAX_HEIGHT) {

width *= MAX_HEIGHT / height;

height = MAX_HEIGHT;

}

canvas.width = width;

canvas.height = height;

ctx.drawImage(img, 0, 0, width, height);

上传缩略图

使用HTML5的新API formData来实现图片的ajax上传

canvas.toBlob(function(blob) {

var form = new FormData();

form.append('file', blob);

fetch('/api/upload', {method: 'POST', body: form});

});

html提交form预处理,HTML5 之图片上传预处理相关推荐

HTML5 多图片上传（前端+后台详解）
HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库手机端实现多图片上传 2.修改代码我发现他这里 ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
HTML5实现图片上传与预览
File API File - 独立文件:提供只读信息,例如名称.文件大小.mimetype 和对文件句柄的引用. FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或 ...
MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
html5 实现图片上传预览
2019独角兽企业重金招聘Python工程师标准>>> hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立 ...
html5 java 图片上传_java实现图片上传至服务器并显示，如何做？希望要具体的代码实现...
展开全部有两种方法一是用上传的组建jspSmartUpload的Request, 还有一种不用组建,但在e69da5e6ba9062616964757a686964616f3133323865323 ...
h5上传图片html5,h5图片上传简易版（FileReader+FormData+ajax）
一.选择图片(input的file类型) 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. ...
ASP.Net MVC3 图片上传详解（form.js,bootstrap）
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...

html提交form预处理,HTML5 之图片上传预处理

html提交form预处理,HTML5 之图片上传预处理相关推荐

最新文章

热门文章