jquery – 使用预览上传多个图像

前端之家收集整理的这篇文章主要介绍了jquery – 使用预览上传多个图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个文件上传字段,可以接受多个图像.我需要在上传之前预览这些图像.我还可以设置上传最大图像数量的限制吗?

解决方法

试试这个.
http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/

HTML

<label for=”files”>Select multiple files: </label>
<input id=”files” type=”file” multiple/>
<output id=”result” />

使用Javascript

window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById(“files”);
filesInput.addEventListener(“change”,function(event){
var files = event.target.files; //FileList object
var output = document.getElementById(“result”);
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match(‘image’))
continue;
var picReader = new FileReader();
picReader.addEventListener(“load”,function(event){
var picFile = event.target;
var div = document.createElement(“div”);
div.innerHTML = “<img class=’thumbnail’ src=’” + picFile.result + “‘” +
“title=’” + picFile.name + “‘/>”;
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log(“Your browser does not support File API”);
}
}

CSS

body{
font-family: ‘Segoe UI’;
font-size: 12pt;
}

header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;

}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}

.thumbnail{

height: 100px;
margin: 10px;
}

http://jsfiddle.net/0GiS0/Yvgc2/

猜你在找的jQuery相关文章