<html>
<head>
<title>自定义图片显示</title>
<style type="text/css">
.con{width:985px;border:1px solid #ccc;padding:1px;margin:0 auto;}
.bt{width:100%;height:1px;clear:both;}
.bar{width:900px; margin:0 auto;height:30px;margin-top:8px;}
.pics{width:240px;height:320px;padding:3px;float:left}
.pics img{width:240px;height:320px}
</style>
<script type="text/javascript">
window.onload=function(){
if(!window.File && !window.FileList && !window.FileReader && !window.Blob) {
alert("浏览器不支持");
}
var dr = document.getElementById('Lists');
dr.addEventListener("drop",function(e){
e = e || window.event;
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
},false);
}
function handleFiles(files) {
var output = [];
for(var i = 0, f; f = files[i]; i++) {
var imageType = /image.*/;
//通过type属性进行图片格式过滤
if (!f.type.match(imageType)) {
continue;
}
var divList = document.getElementById('Lists');
var reader = new FileReader();
reader.onload = function(e){
var imgData = e.target.result;
img = document.createElement('img');
img.src = imgData;
var div = document.createElement("div");
div.className = "pics";
div.appendChild(img);
divList.appendChild(div);
}
reader.readAsDataURL(f);
}
}
</script>
</head>
<body>
<div class="con">
<div id="Lists">
</div>
<div class="bt"></div>
</div>
<div class="bar">
<input type="file" id="Files" name="files[]" onchange='handleFiles(this.files)' multiple />
</div>
</body>
</html>
- 1
- 2
- 3
前往页