如何用input标签上传多个图片并回显
本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图
我们从零来做一个这样的demo
第一步：
我们先完善一下我们的页面，默认的input-file标签非常丑，我们美化一下它，不会的可以百度一下，就是外面套个盒子，设置input的opacity为0，然后外面的盒子设计成我们喜欢的样式即可，我就随便做了一下。
还是放一下源码，只谈效果，不放源码的都是耍流氓
这是body
<body>
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file" multiple id="file">
</div>
</body>
这是css的样式
.uploadImgBtn {
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
background: url("img/plus.png") no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.uploadImgBtn .uploadImg {
position: absolute;
right: 0;
top:0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
//这是一个用做回显的盒子的样式
.pic{
width: 100px;
height: 100px;
}
.pic img {
width: 100%;
height: 100%;
}
代码的量并没有多少，接下来我们就分析一下如何让图片回显；我知道有两种方式，一种是先上传到服务器，并返回该图片的url，然后渲染在页面中；另一种呢，是利用h5的FileReader对象直接在本地预览图片，用户确认后再上传服务器。
我们是采用第二种形式，既然知道了思路那就开始编程吧
<script>
$(document).ready(function(){
//为外面的盒子绑定一个点击事件
$("#uploadImgBtn").click(function(){
/*
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
*/
// 1、先回去input标签
var $input = $("#file");
// 2、给input标签绑定change事件
$input.on("change" , function(){
//补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
//获取选择图片的个数
var files = this.files;
var length = files.length;
console.log("选择了"+length+"张图片");
//3、回显
for( var i = 0 ; i < length ; i++ ){
var fr = new FileReader(),
div = document.createElement("div"),
img = document.createElement("img");
div.className = 'pic';
fr.onload = function(e){
console.log("回显了图片")
img.src = this.result;
div.appendChild(img)
document.body.appendChild(div);
}
fr.readAsDataURL(files[i]);//读取文件
}
})
})
})
</script>
代码的思路也可以说是很简单，先给外面的盒子绑定点击事件，然后获取input标签，给input标签绑定change事件，然后用一个for循环把获得的数据回显出来，for循环里有一个异步事件onload是用来渲染图片，来我们看看效果图
我们选择了三张图片，却显示了一张，话说我们在for循环里创建了三个div和img却只显示了一张图片，这里面肯定有蹊跷。
我们来仔细分析一下，前面我已经说了，回显的for循环里面有一个异步事件，既然是异步的，可能for循环执行完了，才执行onload事件使我们设置的下标i值和预期的结果不一致；那我们如何解决呢，如果我们能形成一个函数作用域，在里面每次回显一张图片，我觉得我们就可能解决了。我们来尝试一下，我们前端可以使用jquery的each方案，它自带回调函数，形成了函数作用域。我们看一下代码
<script>
$(document).ready(function(){
//为外面的盒子绑定一个点击事件
$("#uploadImgBtn").click(function(){
/*
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
*/
// 1、先回去input标签
var $input = $("#file");
// 2、给input标签绑定change事件
$input.on("change" , function(){
//补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
//获取选择图片的个数
var files = this.files;
var length = files.length;
console.log("选择了"+length+"张图片");
//3、回显
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var div = document.createElement("div"),
img = document.createElement("img");
div.className = "pic";
var fr = new FileReader();
fr.onload = function(){
img.src=this.result;
div.appendChild(img);
document.body.appendChild(div);
}
fr.readAsDataURL(value);
})
})
})
})
</script>
在看一下运行的效果
这回就达到了我们的预期效果。这就结束了吗，肯定不是的，当我们再次点击上传图片按钮，肯定会把上一次的结果给覆盖掉，那当我们跑业务的时候，这肯定不是我们想要看到的，那我们如何解决这个问题呢，那肯定是用多个input标签啊，那我们怎么能保证我们点击的时候就是新加的那个input标签呢，我的解决方案是这样的，我们把上一次的input标签的id属性清除掉，为我们新生成的input标签加上这个属性，因为我们是通过id绑定事件的，所以我们就可以为我们新生成的input标签绑定事件了，而原来的input标签因为没有了id属性，而不被选中，我们来看代码
<script>
$(document).ready(function(){
//为外面的盒子绑定一个点击事件
$("#uploadImgBtn").click(function(){
/*
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
*/
// 1、先回去input标签
var $input = $("#file");
console.log($input)
// 2、给input标签绑定change事件
$input.on("change" , function(){
console.log(this)
//补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
//获取选择图片的个数
var files = this.files;
var length = files.length;
console.log("选择了"+length+"张图片");
//3、回显
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var div = document.createElement("div"),
img = document.createElement("img");
div.className = "pic";
var fr = new FileReader();
fr.onload = function(){
img.src=this.result;
div.appendChild(img);
document.body.appendChild(div);
}
fr.readAsDataURL(value);
})
})
//4、我们把当前input标签的id属性remove
$input.removeAttr("id");
//我们做个标记，再class中再添加一个类名就叫test
var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
$(this).append($(newInput));
})
})
</script>
如何用input标签上传多个图片并回显的更多相关文章
- ASP.NET MVC使用input标签上传文件
有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...
- 使用html中的<input>标签上传多个文件(转)
如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"h ...
- 微信小程序里如何用阿里云上传视频，图片。。
纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...
- 自定义input文件上传样式
前言 文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按 ...
- 如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...
- HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...
- HTML5的 input:file上传类型控制(转载）
http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...
随机推荐
- EXCEL词典(xllex.dll)文件丢失或损坏解决方法
EXCEL词典(xllex.dll)文件丢失或损坏解决方法 1● 问题 2● 解决 fail 3● 方法2 regsvr32 xllex.dll 4● 方法3 启动server ...
- tomcat访问端口
问题描述:今天,访问服务器上的应用,tomcat服务器已经启动,确怎么都打不开:问题原因:原来有人改了端口.具体操作:进入tomcat的安装目录,进入conf文件夹下,找到server.xml文件.用 ...
- Oracle exists 和not exists 用法详解
有两个简单例子,以说明 “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; ...
- SignalR NuGet程序包
最近公司有一个边看直播边聊天的需求,直播好搞,直接用腾讯的小直播,组装推流和播放地址,把推流地址拿出去就OK,只要一推流,就可以使用播放地址观看直播,看完后通过webclient去异步下载直播的视频到 ...
- Mac下安装ipython与jupyter
IPython从Python发展而来,更倾向于科学计算.互联网数据分析更喜欢用. 首先切换root用户: sudo su - pip3自动安装ipython yuchaodeMacBook-Pro:~ ...
- 《Python》线程之锁、信号量、事件、条件、定时器、队列
一.锁 线程为什么要有锁: += .-= 赋值操作数据不安全(要经过取值.计算.放回值,3部操作) pop .append 都是数据安全的(只有添加和删除,一次操作) 队列也是数据安全的 1.同步锁 ...
- JavaWeb基础-Jsp基础语法
jsp基础语法 JSP的组成 静态内容.指令.表达式.小脚本.声明.注释 JSP的生命周期 用户发出index.jsp ,服务端判断是否是第一次请求,若是第一次请求,则tomcat中的JSP引擎中的文 ...
- matlabR2017安装
安装教程参考: https://blog.csdn.net/m0_37638031/article/details/78982498
- python-web-django前后端交互
1.前端请求数据URL由谁来写 在开发中,URL主要是由后台来写好给前端. 若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的参数). ...
- python 递归函数操作方法
.递归 是指函数/过程/子程序在运行过程序中直接或间接调用自身而产生的重入现象.在计算机编程里,递归指的是一个过程:函数不断引用自身,直到引用的对象已知.使用递归解决问题,思路清晰,代码少.但是在主流 ...