Custom file upload for pictures

, ,

No need to add external plugins to show your pics uploaded from file button, this is simple form file upload custom field where you can view picture which you upload from form button.

Add simple html, which contains a container, which will hold an image in our case it is `logoContainer` and 1 default image of your own choice like in example below. One more container which will hode the text info of your file and input which latter you can use for form validation, any in our case that is `fileContainer` , you can change classes by your own ease latter.

Html


<div class="logoContainer">
  <img src="https://i1.wp.com/imrankhalid.me/wp-content/uploads/2017/07/images.png?w=1500" data-recalc-dims="1">
</div>
<div class="fileContainer sprite">
  <span>choose file</span>
  <input type="file"  value="Choose File">
</div>

jQuery

And this is simple custom code for your file input


    $("input:file").change(function (){
		var fileName = $(this).val();
		if(fileName.length >0){
    $(this).parent().children('span').html(fileName);
		}
		else{
			$(this).parent().children('span').html("Choose file");

		}
	});
	//file input preview
	function readURL(input) {
		if (input.files && input.files[0]) {
				var reader = new FileReader();            
				reader.onload = function (e) {
						$('.logoContainer img').attr('src', e.target.result);
				}
				reader.readAsDataURL(input.files[0]);
		}
	}
	$("input:file").change(function(){
			readURL(this);
	});

Here we go 🙂
you can check it on codepen as well, you can make changes and latter you can use it as you want.

See the Pen File upload with image by Imran Khalid (@imonly_ik) on CodePen.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *