html5判断file选择状态,HTML input type=file选择图片立即显示

主要用来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();

});

}

});

*/

}

}

}