自定义input上传图片组件,美化样式

前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~


功能需求:1.上传图片限制大小、分辨率、类型
2.上传图片支持自由裁剪
3.图片上传后支持预览和删除

效果图,只截取了一小部分,大致看下就ok啦,是不是感觉比原生的好看多了^_^

项目是基于react框架写的,话不多说,开始撸代码~~~

Step1:编写基础html结构

<div>
<input
type="file"
accept="image/jpeg, image/gif, image/png, image/bmp"
styleName="input-file"
/>
<label htmlFor="file" styleName="ant-upload">
{uploadButton}
</label>
</div> // uploadButton组件代码如下:
const uploadButton = (
<div styleName="upload-plus-text">
<Icon type="plus" />
<div className="ant-upload-text">上传照片</div>
</div>
);

Step2:基础样式

input-file {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
} .ant-upload {
@w: 100px; width: @w;
height: @w;
padding: 5px;
background-color: #fafafa;
border: 1px dashed #d9d9d9;
border-radius: 4px;
display: block;
cursor: pointer;
position: relative;
} .upload-plus-text {
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); i {
font-size: 28px;
color: #999;
} .ant-upload-text {
margin-top: 8px;
font-size: 12px;
color: #666;
}
}

Step3:添加事件处理

对上传图片的类型、大小和分辨率进行检测

<input
type="file"
id='file'
accept="image/jpeg, image/gif, image/png, image/bmp"
styleName="input-file"
onChange={e => {
this.onFileChange(e);
}}
/>
<label htmlFor="file" styleName="ant-upload">
{uploadButton}
</label>
</div> // 一些常量定义
const IMAGE_MIN_WIDTH = 1280; // 上传图片最小宽
const IMAGE_MIN_HEIGHT = 800; // 上传图片最小高
const IMAGE_MAX_SIZE = 1024 * 1024; // 上传图片最大大小 // 处理上传文件
onFileChange(e) {
const file = e.target.files[0];
e.target.value = ''; // 再次上传同一文件进行裁剪
if (this.handleBeforeUpload(file)) {
const reader = new FileReader();
reader.onload = e => {
const src = e.target.result;
const image = new Image();
const _this = this;
image.onload = () => {
const width = image.width;
const height = image.height;
if (width >= IMAGE_MIN_WIDTH && height >= IMAGE_MIN_HEIGHT) {
_this.setState({
initialImageUrl: src,
showCropModal: true
});
} else {
message.error('照片分辨率小于1280*800');
}
};
image.src = src;
};
reader.readAsDataURL(file);
}
} // 检查照片格式、大小等信息
handleBeforeUpload(file) {
if (file) {
const sizeOk = file.size < IMAGE_MAX_SIZE;
const typeReg = new RegExp(/^image\/bmp|gif|jpg|jpeg|png$/, 'i');
const typeOk = typeReg.test(file.type); if (!typeOk) {
message.error('照片格式有误');
} else if (!sizeOk) {
message.error('照片大小超过1M');
} return sizeOk && typeOk;
}
}

Step4:裁剪功能

代码较多就不展示了= =,使用的是react-cropper

Step5:预览和删除功能

预览功能实现思路就是通过判断是否已经上传图片来展示不同的状态。未上传展示uploadButton组件,已上传就展示imagePreview组件。
通过判断是否已经上传图片来控制input标签的id属性值,未上传图id='file',已上传图片将id='',这样一来,再次去点击label的时候由于for属性找不到对应的id,就不会触发input上onChange事件

<div>
<input
type="file"
id={imageUrl ? '' : 'file'}
accept="image/jpeg, image/gif, image/png, image/bmp"
styleName="input-file"
onChange={e => {
this.onFileChange(e);
}}
/>
<label htmlFor="file" styleName="ant-upload">
{imageUrl ? imagePreview : uploadButton}
</label>
</div>
<Modal
visible={showPreviewModal}
title="图片预览"
footer={null}
width={700}
onCancel={this.handlePreviewCancel}>
<img alt="" style={{ width: '100%' }} src={imageUrl} />
</Modal>
// imagePreview组件代码如下
const imagePreview = (
<div
styleName="image-background-preview"
style={{ backgroundImage: `url(${imageUrl})` }}>
<div styleName="preview-image">
<span styleName="preview-image-btn">
<a title="预览图片" href="javascript:;">
<Icon
type="eye"
styleName="icon-btn"
onClick={this.handlePreview}
/>
</a>
<a title="删除图片" href="javascript:;">
<Icon
type="delete"
styleName="icon-btn"
onClick={this.swapImageFile}
/>
</a>
</span>
</div>
</div>
); // 预览图片
handlePreview() {
this.setState({
showPreviewModal: true
});
} // 删除图片
swapImageFile() {
this.setState({ imageUrl: '' });
}

写在最后:项目涉及代码较多,文章只展示了大部分代码,一些具体细节代码可能就没有展示了,还望见谅,第一次写文章,可能比较混乱,有问题还望大家指出~~~ ^_^

自定义input上传图片组件的更多相关文章

  1. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  2. 自定义Vue&Element组件,实现用户选择和显示

    在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...

  3. svelte组件:Svelte3自定义Navbar+Tabbr组件|svelte自定义插件

    基于Svelte3自定义组件Navbar+Tabbar沉浸式导航条|底部凸起菜单栏 Svelte 一种全新的构建用户界面的框架.当下热门的 Vue 和 React 在浏览器中需要做大量的工作,而 Sv ...

  4. iOS开发之自定义表情键盘(组件封装与自动布局)

    下面的东西是编写自定义的表情键盘,话不多说,开门见山吧!下面主要用到的知识有MVC, iOS开发中的自动布局,自定义组件的封装与使用,Block回调,CoreData的使用.有的小伙伴可能会问写一个自 ...

  5. BizTalk动手实验(十一)自定义开发管道组件

    1 课程简介 通过本课程熟悉自定义开始管道组件的流程.各组件接口的功能作用以及自定义管道. 本场景为开发一个消息ZIP压缩的发送管道组件. 2 准备工作 1. 熟悉管道组件各阶段组成 2. 下载Ion ...

  6. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  7. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  8. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  9. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

随机推荐

  1. Maekdown光速习得

    菜鸟教程提供的在线编辑器,花了十分钟就学会了,可以完成简单编辑,详细学习可点击CSDN左上角Markdown在线编辑器. 菜鸟教程在线编辑器:传送门 CSDN在线编辑器:传送门

  2. CSP-S全国模拟赛第三场 【nan死了】

    mmt 居然第一步膜化乘除 都没看出来,没救了... 大概是贡献前缀和优化的做法 巨兔式讲解:大家都学会了么? 咱发现有大量的 (i/j , i%j ) 同时 对很多 c 产生了贡献,咱可以去优化这一 ...

  3. 企业面试题|最常问的MySQL面试题集合(二)

    MySQL的关联查询语句 六种关联查询 交叉连接(CROSS JOIN) 内连接(INNER JOIN) 外连接(LEFT JOIN/RIGHT JOIN) 联合查询(UNION与UNION ALL) ...

  4. django Paginator 让分页变得完美

    参考大佬地址:https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/ 类视图 from django.contrib.au ...

  5. drop与truncate与delete的区别与联系

    在mysql和oracle数据库中delete与truncate都是可以用来对数据进行删除操作,但是二者又有些不同. 主要有以下几个区别: 区别一: 根据sql语言分类来说,delete属于DML语言 ...

  6. mybatis中的动态代理应用(mapper对象)

    -----------------UserMapper的配置信息--------------------- <?xml version="1.0" encoding=&quo ...

  7. HashMap的相关面试题

    HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道Hashtable和HashMap之间的区别,那么为何这道面试题如此 ...

  8. python snippets

    1.Find memory used by an object import sys 2.Combine a list of strings into a single string strings ...

  9. HDU - 1024 Max Sum Plus Plus 最大m段子段和+滚动数组优化

    给定n个数字,求其中m段的最大值(段与段之间不用连续,但是一段中要连续) 例如:2 5 1 -2 2 3 -1五个数字中选2个,选择1和2 3这两段. dp[i][j]从前j个数字中选择i段,然后根据 ...

  10. vue项目中利用popstate处理页面返回操作

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...