我已经实现了上传图片并在网页上显示图片。我想在上传时添加一些文字说明,上传后,从搜索栏中我想搜索图片说明。例如,如果我上传4张图片:
第一张带有abc文字的图像
第二张图片带有文字
xyz文本的第3张图像
带有aaa文字的第4张图片
在搜索输入文本中输入a
后,它应显示1,2和4张图像,它应隐藏第3张图像。
var get = function(id) {
return document.getElementById(id);
}
var uploadedImg = uploadedImg || {};
uploadedImg.handleFileSelect = function(evt) {
var files = evt.target.files; // FileList object.
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
//closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
get('thumbnails').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
get('imageUploaded').addEventListener('change', uploadedImg.handleFileSelect, false);