我想在localhost上上传文字并删除或使用搜索栏

时间:2017-08-25 17:03:25

标签: javascript jquery html image

我已经实现了上传图片并在网页上显示图片。我想在上传时添加一些文字说明,上传后,从搜索栏中我想搜索图片说明。例如,如果我上传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);

https://jsfiddle.net/mohitpatil/c6vrag5z/3/

0 个答案:

没有答案