Preview a photo upload before submitting

Developer
Mark Senff
Size
2,125 Kb
Views
24,288
  1. Preview a photo upload before submitting Previews
  2. Preview a photo upload before submitting HTML Codes
  3. Preview a photo upload before submitting CSS Codes
  4. Preview a photo upload before submitting JS Codes

How do I make an preview a photo upload before submitting?

Shows a small version of the image that you upload in a form, before actually submitting it. Updates the photo when you upload a new one before submitting the form.. What is a preview a photo upload before submitting? How do you make a preview a photo upload before submitting? This script and codes were developed by Mark Senff on 05 August 2022, Friday.

Preview a photo upload before submitting Previews
IQ Test

Preview a photo upload before submitting - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Preview a photo upload before submitting</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="photo-upload"> <form> <fieldset> <label>UPLOAD PICTURE:</label> <input type="file" name="photo" id="imgInp" onchange="loadFile(event);"> <img class="preview" id="preview" alt=""> </fieldset> <fieldset> <input type="submit" name="submit" class="submit-button" value="SUBMIT FORM"> </fieldset> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Preview a photo upload before submitting - Script Codes CSS Codes

fieldset { border:0; margin-bottom:20px;
}
input { display:block;
}
img.preview { width:200px; height:auto; clear:both; margin:10px 0;
}

Preview a photo upload before submitting - Script Codes JS Codes

var loadFile = function(event) {	oldimg = $('.preview').attr('src');	var preview = document.getElementById('preview');	preview.src = URL.createObjectURL(event.target.files[0]);	newimg = preview.src;	if(newimg.indexOf('/null') > -1) {	preview.src = oldimg;	}
};
$('.submit-button').on('click', function(event) { alert('This is a dummy submit button. It does nothing.'); event.preventDefault();
});
Preview a photo upload before submitting - Script Codes
Preview a photo upload before submitting - Script Codes
Home Page Home
Developer Mark Senff
Username senff
Uploaded August 05, 2022
Rating 3
Size 2,125 Kb
Views 24,288
Do you need developer help for Preview a photo upload before submitting?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Senff (senff) Script Codes
Name
A Pen by Mark Senff
Sticky menu on scroll
Sticky menu on scroll
Sticky menu on scroll
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!