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

});

}

});

*/

}

}

}

總結

以上是生活随笔為你收集整理的html5判断file选择状态,HTML input type=file选择图片立即显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。