Stylish input type file upload with image Preview

11 / Feb / 2016 by Milan Chourasia 0 comments

Few days back I have tried to change the look of input type file but unable to change like background,border etc. Actually, it looks different in all browsers.

Now I found a solution to do this.

Here is the HTML which have been used:-

<div class="uploadOuter">
            <input type="text" class="uploadText"/>
            <input type="file" class="uploadFile"/>
        </div>
		<div class="Preview">
		<img src="" alt=""/>
		<span class="loader"></span>
		</div>

At first I have taken an outer div with name “uploadOuter”, then inserted an input type: text field showing the path of files selected locally. Afterwards, I have placed input type file which placed over the input type:text. Also I had set the opacity:None. For IMG Preview purpose I have taken ‘Preview’ div.

By using jQuery I have showcased the path of the selected file into the input type text and image Preview.

Here is the CSS which have been used:-

*{box-sizing:border-box;}
            .uploadOuter {margin: 6px 0;min-height:30px;border:1px solid #ccc;position: relative;width: 310px;}
            .uploadFile {opacity: 0;position: absolute;right: 0;top: 0;z-index: 2;height:100%; width: 100%;}
            .uploadText{width:100%;height:100%;position:absolute;border:none;padding:0 0 0 10px;background: url('imagePathOfBrowseButton') no-repeat right center}
			.Preview{width:200px;border:1px solid #ccc;position:relative;display:none}
			.Preview img{width:100%;}
			.loader{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5) url('imagePath') no-repeat center center;z-index:99; }

Here is the jQuery which have been used:-

$(function(){
				$('.uploadFile').change(function(e){
				$('.loader').show();
				$('.Preview').show();
					var filePath = URL.createObjectURL(e.target.files[0]);
					var fileName = e.target.files[0].name;
					//var fileName = $(this).val();
					$('.uploadText').val(fileName);
					$('.Preview img').attr('src',filePath);
					$('img').load(function(){
					$('.loader').hide();
					})
				});
			});

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -