input图片上传并显示查看判断图片类型



有一个问题:上传一次在上传一次关闭按钮会出现两次,关闭之后还有一个(改好了可以告诉我我在修正过来)


<div id="box">
<div class="img-d">
<span class="up-s"></span>
<input type="file" id="up" multiple name="files">
</div>
<button type="submit">确认提交</button>
</div>
<script>
// span的点击事件
var addBtn = document.querySelector('.up-s');
addBtn.addEventListener('click',function () {
document.querySelector('#up').value = null;
document.querySelector('#up').click();
return false;
},false);
// 处理input点击之后的change事件
document.getElementById("up").addEventListener("change",function(e){
var files =this.files;
var fileType = document.getElementById("up").value;
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType))
{
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
return false;
}
var reader =new FileReader();
reader.readAsDataURL(files[0]);
reader.onload =function(e){
var dx =(e.total/1024)/1024;
if(dx>=1){
alert("文件大小大于2M");
return false;
}
var result =this.result;//这里就是转化之后的DataURL
addBtn.style.backgroundImage = "url("+result+")";
var rem =document.createElement("i");
rem.setAttribute("class","rems");
rem.innerHTML ="x";
document.querySelector(".img-d").appendChild(rem);
rem.addEventListener('click',function () {
//this.style.remove ="none";
rem.parentNode.removeChild(rem);
addBtn.style.backgroundImage = "url(images/xztpp.png)";
});
};
})
</script>
input图片上传并显示查看判断图片类型的更多相关文章
- 图片上传并显示(兼容ie),图片大小判断
图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...
- ruby on rails爬坑(三):图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- 图片上传即时显示javascript代码
这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- 图片上传和显示——上传图片——上传文件)==ZJ
http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...
- django 图片上传与显示
由于图片上传的需要,学习了一波上传 1. 上传 前端代码 <form action="写上相应的定向位置" method="post" enctype=& ...
- struts中用kindeditor实现的图片上传并且显示在页面上
做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...
- ueditor图片上传和显示问题
图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...
- MVC图片上传并显示缩略图
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...
随机推荐
- 07 Mybatis的多表查询1----1对多和多对1---@Results注解用法总结
1.表与表之间的关系及其举例 表之间的关系有4种:一对多.多对一.一对一.多对多. 举例: (1)用户和订单就是一对多 一个用户可以下多个订单 (2)订单和用户就是多对一 多个订单属于同一个用户 (3 ...
- 一起来学Spring Cloud | 第七章:分布式配置中心(Spring Cloud Config)
上一章节,我们讲解了服务网关zuul,本章节我们从git和本地两种存储配置信息的方式来讲解springcloud的分布式配置中心-Spring Cloud Config. 一.Spring Cloud ...
- Eclipse访问外部网站(比如:CSDN首页)
其实这个感觉没什么用,毕竟我们都有浏览器,而且浏览器界面还比较宽,方便.只是好奇.所以记录一下.效果如下: 有两种方法,方法一是永久的,方法二是一次性的. 方法一(永久): 1.在工具栏找" ...
- 【LEETCODE】52、数组分类,简单级别,题目:717,661,746,628,643,849
package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...
- TextField 、 FTE、 TLF 的使用情景和简单说明
作者:tiangej 来源:CSDN 原文:https://blog.csdn.net/tiangej/article/details/16859239 版权声明:本文为博主原创文章,转载请附上博文链 ...
- (二)pdf的构成综述
引自:https://blog.csdn.net/steve_cui/article/details/81948486 一个pdf文件主要是由4部分构成:文件头.文件体.交叉引用表.文件尾 文件头:用 ...
- Jmeter_自带脚本录制
1.http请求+查看结果树 代理服务器操作步骤 1.创建一个线程组(右键点击“测试计划“---> ”添加“ ---> ”线程组“) 2.创建一个http代理服务器(右键“测试计划”--& ...
- Hadoop2-认识Hadoop大数据处理架构-单机部署
一.Hadoop原理介绍 1.请参考原理篇:Hadoop1-认识Hadoop大数据处理架构 二.centos7单机部署hadoop 前期准备 1.创建用户 [root@web3 ~]# useradd ...
- PHP基础之输出缓冲区基本概念、原理分析
一.概念 在PHP运行的过程中,可以将会产生输出的函数或操作结果暂时保存在PHP的缓冲区,只有当缓冲区满了.或者PHP运行完毕.或者在必要时候进行输出,才会将数据输出到浏览器,此缓冲数据的区域称为PH ...
- MySQL Backup--innobackupex操作日志
备份脚本: innobackupex \ --defaults-file="/export/servers/mysql/etc/my.cnf" \ --host="loc ...