星空网 > 软件开发 > 网页设计

input多选图片与显示

input标签

在使用input选择文件时遇到了 在遍历input file.files 只显示最后一个,修改如下:

 

CSS:

<style type="text/css">
#view{}
#view{} .imgbox{float:left;position:relative;width:100px;height: 100px;margin-left: 10px;margin-top: 10px;
padding:5px;border:solid 1px red;border-radius: 5px;;}
#view{} .imgbox .close{border: solid 1px red;position: absolute;top: -15px;
width: 20px;height: 20px; display: inherit;cursor: pointer;text-align: center;background: red;color: #fff;right: -10px;z-index: 20;border-radius: 100%;}
#view{} .imgbox input{width:100%;height: 100%;z-index: 10;}
</style>

 

html:

<input type="file" onchange="load(this)" multiple="multiple" accept="image/*" class='myfile'></input>

<div id="view"></div>

JS:

<script>
$('body').on('click','.close',function(){
$(this).parent('.imgbox').remove();
});

function load(file) {
var num=1;
if (file.files) {
for (var i = 0; i < file.files.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(file.files[i]);
reader.onload = function(evt) {
var imgbox=$('<div></div>');
imgbox.addClass('imgbox');
$('#view').append(imgbox);

var close=$('<div>&times;</div>');
close.addClass('close');
close.appendTo(imgbox);

var imgs = $('<input type="image" />');
imgs.attr('name','mum'+num);
num++;
imgs.appendTo(imgbox);
imgs.attr('src', evt.target.result);
}
}
}
}


</script>




原标题:input多选图片与显示

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Birchbox:https://www.goluckyvip.com/tag/16495.html
Bitbond:https://www.goluckyvip.com/tag/16497.html
BitCash:https://www.goluckyvip.com/tag/16498.html
Bite:https://www.goluckyvip.com/tag/16499.html
英国EORI清关:https://www.goluckyvip.com/tag/165.html
常见找出技巧:https://www.goluckyvip.com/tag/1650.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流