主要用来ul li来排列显示的图片。
引入jQuery
CSS 代码:
html,body{
margin:0px;
padding:0px;
}
#tdAdd input{
height: 100%;
width: 100%;
position: absolute;
top: 0px;
right: 0px;
z-index: 100;
filter: alpha(opacity = 0);
-moz-opacity: 0;
opacity: 0;
outline: none;
blr: expression(this.hideFocus = true);
cursor: pointer;
border: none;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
width:100%;
max-width:100%;
height:auto;
}
li {
float:left;
width:20%;
}
.imgwrap{
position: relative;
/* min-height: 100px; */
height: 100px;
margin: 5px;
text-align: center;
}
.imgwrap > img{
max-width: 100%;
height: 100px;
object-fit: cover;
object-position: center;
}
HTML 代码:
js代码:
var aaa = document.getElementById("btnAdd"); //获取显示图片的div元素
var input = document.getElementById("file_input"); //获取选择图片的input元素
var tdid = 1;
//这边是判断本浏览器是否支持这个API。
if(typeof FileReader==='undefined'){
aaa.innerHTML = "抱歉,你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false); //如果支持就监听改变事件,一旦改变了就运行readFile函数。
}
function readFile(){
for (var index = 0; index'
+ '
').insertBefore($("#tdAdd"));
var imageStr = this.result;
/*延迟显示图片 模拟图片上传成功后的显示。
我这里就直接显示图片了。有兴趣的同学可以实现上传中的进度条效果。。
*/
setTimeout(function(){
var td = $("#" + tdid);
td.html("
");
var $closeImg = $('
').appendTo(td);
// $('').appendTo(td);
$closeImg.click(function(){
$(this).closest("li").remove();
});
}, 2000);
/* 上传图片到后台返回并显示。
$.ajax({
url: "upload.jhtm",
type: "POST",
data: {tdid :tdid, imageStr:imageStr},
dataType: "json",
cache: false,
success: function(data) {
var rtntdid = data.tdid;
var td = $("#" + rtntdid);
td.html("
");
var $closeImg = $('
').appendTo(td);
$('').appendTo(td);
$closeImg.click(function(){
$(this).closest("td").remove();
});
}
});
*/
}
}
}