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

<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. Java开发笔记(一百一十六)采用UDP协议的Socket通信

    前面介绍了如何通过Socket接口传输文本与文件,在示例代码中,Socket客户端得先调用connect方法连接服务端,确认双方成功连上后才能继续运行后面的代码,这种确认机制确保客户端与服务端的的确确 ...

  2. ssh常用操作

    介绍ssh.sshpass.scp等linux下远程操作常用的命令 ssh 通过终端远程linux服务器的常用命令 ssh root@192.168.1.100 #以root用户链接到目标服务器,连通 ...

  3. 【LEETCODE】47、985. Sum of Even Numbers After Queries

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  4. 【LEETCODE】38、167题,Two Sum II - Input array is sorted

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  5. 通过 AppSwitch 禁用 WPF 内置的触摸让 WPF 程序可以处理 Windows 触摸消息

    原文:通过 AppSwitch 禁用 WPF 内置的触摸让 WPF 程序可以处理 Windows 触摸消息 WPF 框架自己实现了一套触摸机制,但同一窗口只能支持一套触摸机制,于是这会禁用系统的触摸消 ...

  6. Java性能优化学习笔记

    1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步来控 ...

  7. 报告题目:HAO智能:HI + AI + OI

     报告题目:HAO智能:HI + AI + OI 报告摘要:大数据面向异构自治的多源海量数据, 旨在挖掘数据间复杂且演化的关联.大数据知识工程(BigKE)从大数据的 HACE定理开始, 从大知识建模 ...

  8. “SQL Server does not exist or access denied.”

    Have resolved the problem, the Port was different and so the Connection String now reads: <connec ...

  9. 4.linux下配置Golang的环境变量

    装好linux后优先在linux上配置Golang开发环境. 1.到Go语言中文网下载Linux安装包 https://studygolang.com/dl 2.到下载的目录下解压,下载的文件一般在“ ...

  10. JavaScript之控制标签内容

    function abb(a){ return document.getElementById(a); } console.log(abb('box').innerHTML); 标签.innerHTM ...