JavaScript头像图片上传插件支持上传类型大小尺寸验证

一行代码实现头像上传，图片大小、尺寸，类型验证

html调用

<img  src="这里放默认头像"  id="preview" onclick="uploader.fileInput.click()"/>

js调用

 var uploader = new ImageUploader({accept: ['jpg', 'png', 'gif'],maxSize: 1,maxWidth: 800,maxHeight: 1000,uploadUrl: 'upload',success: function(url) {//上传成功回调}});

调用效果如图

直接点击头像即可实现图片上传

以下是插件代码

function ImageUploader(options) {this.options = options || {}; // 参数配置this.fileInput = null; // 文件输入框this.previewImage = null; // 预览图片this.uploadUrl = options.uploadUrl || '/upload'; // 上传接口地址（默认值为'/upload'）// 初始化this.init();
}

// 初始化方法
ImageUploader.prototype.init = function() {var that = this;// 创建文件输入框this.createFileInput();// 监听文件选择事件this.fileInput.addEventListener('change', function(event) {var file = event.target.files[0];// 判断图片类型if (that.options.accept && !that.checkFileType(file)) {alert('只能上传 ' + that.options.accept.join(',') + ' 类型的图片');return;}// 判断图片大小if (that.options.maxSize && file.size > that.options.maxSize * 1024 * 1024) {alert('图片大小不能超过 ' + that.options.maxSize + 'MB');return;}// 验证图片尺寸var reader = new FileReader();reader.onload = function() {var img = new Image();img.onload = function() {if (that.options.maxWidth && img.width > that.options.maxWidth) {alert('图片宽度不能超过 ' + that.options.maxWidth + '像素');return;}if (that.options.maxHeight && img.height > that.options.maxHeight) {alert('图片高度不能超过 ' + that.options.maxHeight + '像素');return;}that.uploadFile(file);};img.src = reader.result;};reader.readAsDataURL(file);});
};

// 创建文件输入框
ImageUploader.prototype.createFileInput = function() {var input = document.createElement('input');input.type = 'file';input.style.display = 'none';if (this.options.accept) {input.accept = this.options.accept.join(',');}document.body.appendChild(input);this.fileInput = input;
};

// 检查文件类型是否符合要求
ImageUploader.prototype.checkFileType = function(file) {var fileType = file.type;if (!fileType) {return false;}fileType = fileType.split('/').pop();return this.options.accept.indexOf(fileType) !== -1;
};

// 执行上传操作
ImageUploader.prototype.uploadFile = function(file) {var that = this;var xhr = new XMLHttpRequest();xhr.open('POST', this.uploadUrl, true);xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');var formData = new FormData();formData.append('file', file);xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200 || xhr.status === 201) {var responseText = JSON.parse(xhr.responseText);if (responseText.errno === 0) {that.showUploaded(responseText.data.url);} else {alert(responseText.msg);}} else {alert('上传失败，请稍后再试！');}}};xhr.send(formData);
};

JavaScript头像图片上传插件支持上传类型大小尺寸验证相关推荐

功能强大的文件上传插件带上传进度-WebUploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...
三星不支持android,android – 隐藏三星Galaxy设备上的“不支持NFC标签类型”错误...
在Android 4.4之前您尝试做的事情根本不可能从应用程序(至少不在非根/未修改的设备上). Android系统(或更具体地说是NFC系统服务)之前显示消息"不支持NFC标签类型&qu ...
html图片轮播种类,支持4种类型的jQuery轮播图插件EasySlides
EasySlides是一款支持4种类型的jQuery轮播图插件.该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择. 使用方法在页面 ...
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
active控件和java脚本_【学习笔记】在原生javascript中使用ActiveX和插件
什么是插件现在的浏览器提供了大量的内置功能,但仍然有一些工作无法完成,如播放音频和视频.插件及其扩展浏览器功能就尤为重要. 插件是可下载的应用程序,可以插入到浏览器中,现在有很多不同的插件,常用的有 ...
Servlet 3.0对上传的支持
Servlet 2.5 进行上传首先对表单的要求 ->method ="post" ->enctype="multipart/form ...
java上传头像插件_JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能...
一.去官网下载webuploader文件上传插件下载好后把它放到Javaweb项目的文件夹中(我放到了webcontent下面的static里面) 二.复制前端的样式把这段代码放到你想要放到的位置 ...

JavaScript头像图片上传插件支持上传类型大小尺寸验证

JavaScript头像图片上传插件支持上传类型大小尺寸验证相关推荐

最新文章

热门文章