Home › Forums › Quform WordPress › Showing an Image Preview in the form
- This topic has 4 replies, 3 voices, and was last updated 5 years, 11 months ago by Ally.
- AuthorPosts
- September 16, 2014 at 11:29 am #12431shaunadamsParticipant
Hello all Quformers,
I’m trying to get an Image to preview before uploading, a bit like this example:
http://blueimp.github.io/jQuery-File-Upload/I have tried this:
<input type=”file” class=”multi with-preview” multiple />
in an HTML field which shows a button but no image preview and does not link to the actual image.Does anybody know how I might do this, any help would be gratefully received
September 16, 2014 at 12:53 pm #12433shaunadamsParticipantThis seems to work:
<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();reader.onload = function (e) {
$(‘#img_prev’)
.attr(‘src’, e.target.result)
.width(150)
.height(200);
};reader.readAsDataURL(input.files[0]);
}
}
</script><meta charset=utf-8 />
<title>JS Bin</title>
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style></head>
<body>
<input type=’file’ onchange=”readURL(this);” />
</body>
</html>September 22, 2014 at 10:55 am #12525AllySupport StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
- This reply was modified 5 years, 11 months ago by Ally. Reason: Fix code layout
April 16, 2018 at 6:27 am #25004quagmire87ParticipantHi,
I’ve used the above script and it’s working! But when I want to remove the uploaded image, doesn’t remove the picture preview.
Is there any solution to this problem?Thanks!
April 17, 2018 at 12:08 pm #25044AllySupport StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
- AuthorPosts
- You must be logged in to reply to this topic.