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

<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图片上传并显示查看判断图片类型的更多相关文章

  1. 图片上传并显示(兼容ie),图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

  2. ruby on rails爬坑(三):图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  3. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

  4. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  5. 图片上传和显示——上传图片——上传文件)==ZJ

    http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...

  6. django 图片上传与显示

    由于图片上传的需要,学习了一波上传 1. 上传 前端代码 <form action="写上相应的定向位置" method="post" enctype=& ...

  7. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

  8. ueditor图片上传和显示问题

    图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...

  9. MVC图片上传并显示缩略图

    前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...

随机推荐

  1. MySQL必知必会2

    使用数据处理函数 函数 与其他大多数计算机语言一样,SQL支持利用函数来处理数据.函数一般是在数据上执行的,他给数据的转换和处理提供了方便,在前一章中用来去掉尾空格的RTrim()就是一个函数的例子 ...

  2. java笔记3

    面向对象的特点:   1.封装:   2.继承   3.多态 好处:   是一种符合人们思考习惯的思想  可以将复杂的事情简单化  将程序员从执行者变为指挥者 二 类与对象 成员变量与局部变量的区别: ...

  3. Asp.Net Core异常处理

    本文将介绍在ASP.Net Core中处理异常的几种方法 1使用开发人员异常页面(The developer exception page) 2配置HTTP错误代码页 Configuring stat ...

  4. 解决sublime text3运行PyQt5代码不能显示窗口的问题

    如题,在sublime中写了GUI代码,Ctrl+B能运行,但是就是不能显示窗口. 解决办法:  找到路径C:\Users\superlee\AppData\Roaming\Sublime Text ...

  5. 数据结构与算法(Python)

    数据结构与算法(Python) Why? 我们举一个可能不太恰当的例子: 如果将最终写好运行的程序比作战场,我们码农便是指挥作战的将军,而我们所写的代码便是士兵和武器. 那么数据结构和算法是什么?答曰 ...

  6. Mac上go的下载安装教程

    mac上go的下载安装教程 官网https://golang.google.cn/dl/下载,安装 环境变量配置 参考https://www.jianshu.com/p/5c1873eaf3ca Ba ...

  7. Java的基础类型笔记

    数据类型       大小 byte(字节)    1(8位) shot(短整型)       2(16位) int(整型)       4(32位) long(长整型)       8(32位) f ...

  8. RAS非对称加密

    加解密密钥不一致,一般私钥不公开,使用公钥加密,私钥解密,使用私钥加密,公钥可以解密. java代码 import javax.crypto.Cipher; import java.security. ...

  9. 如何使用jenkins部署maven父子工程

    最近使用jenkins自动部署项目时遇到一个问题,如果部署单个的maven工程,没有什么问题, 但是在部署maven创建的父子工程,如果只从svn或者git上拉取子工程源码时,会报找不到父 工程pom ...

  10. Django:Python3.6.2+Django2.0配置MySQL 转载

    Django默认使用的数据库是python自带的SQLlite3,但SQLlite并不适用于大型的项目,因此我将数据库换成了MySQL,下面介绍下Django如何配置数据库... 我使用的版本是:Py ...