javascript jquery preview image before upload
Question
Refs:
How to preview a image before upload using JavaScript or jquery? javascript - image preview before upload How to upload preview image before upload through JavaScript
didn't worked for me... from above refs some only worked in ff and some is uploading first and then only showing preview.
I find the exact solution in: http://blueimp.github.com/jQuery-File-Upload/
It works in all i have tested.
I find it working but my code isn't working. So what is the keypoint blueimp is following and i missing for enabling image preview before upload.
I tried with :
$('.hidFileBtn').live('change', function(e){ $childImg = $(this).closest('.parent').find('img.previewImg'); var FileName = $(this).val(); console.log(FileName + "-" + $(this)[0].value); $childImg[0].src = $(this).val(); });
But no luck.
4 answers
solution1
0 2016-06-09 07:08:39
Write this code in your javascript and create a file button attach onchange event like this onchange="preview_image(event)" code from this Display Image Before Upload tutorial
function preview_image(event)
{
var reader = new FileReader();
reader.onload = function()
{
var output = document.getElementById('output_image');
output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
solution2
0 2016-06-09 07:23:07
您可以尝试HTML5的FileReader。如果要支持IE，请使用以下方法：
div.css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + input.val() + '")'});
solution3
0 2018-02-15 06:21:55
This link has a good answer: Preview an image before it is uploaded
<input type = "file" name = "fileFind" onchange = "readURL(this)" id = "fileFind" />
<img id = "imagePreview" src = "" alt = "" />
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagePreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
solution4
0 2019-10-04 12:37:28
<html> <head> <script type='text/javascript'> function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('output_image'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); } </script> <style> body { width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#0B3861; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; } #output_image { max-width:300px; } </style> </head> <body> <div id="wrapper"> <input type="file" accept="image/*" onchange="preview_image(event)"> <img id="output_image"/> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.