原生html5怎么上传一个图片,HTML5图片上传预处理

HTML5图片上传预处理，一个只有HTML5前端上传页面的插件没有后台处理的，可以拿去直接用哦~对HTML5有兴趣的朋友可以研究一下。

样式丑了点，但是还可以

代码：

PHP中文网

window.onload = function () {

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

input.type = 'file';

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

var file = this.files[0];

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

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

img.onload = function () {

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

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

var MAX_WIDTH = 150;

var MAX_HEIGHT = 200;

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);

document.body.appendChild(canvas);

var btn = document.createElement('button');

btn.innerHTML = '上传';

document.body.appendChild(btn);

btn.addEventListener('click', function() {

/*

toBlob的兼容性问题使用

https://github.com/blueimp/JavaScript-Canvas-to-Blob 这个库，就可以解决

*/

canvas.toBlob(function(blob) {

var form = new FormData();

form.append('file', blob);

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

});

}, false);

};

// document.body.appendChild(img); 原始图片是不用展示出来的

}, false);

document.body.appendChild(input);

};

以上是HTML5图片上传预处理，可以拿去修改一下直接用，也可以研究研究，更多文章和源码请到PHP中文网搜索

相关推荐：

用HTML5制作屏幕手势解锁功能

最全的HTML5标签

浅谈HTML5的未来发展