上载之前的javascript jquery预览图像
[英]javascript jquery preview image before upload
问题描述
Refs: 
参考：
How to preview a image before upload using JavaScript or jquery? 如何在使用JavaScript或jquery上传之前预览图像？ javascript - image preview before upload How to upload preview image before upload through JavaScript javascript-上传之前图像预览 如何通过JavaScript上传 之前 如何上传预览图像
didn't worked for me... from above refs some only worked in ff and some is uploading first and then only showing preview. 不适用于我...从上面的引用来看，有些仅在ff中起作用，有些首先上传，然后仅显示预览。
I find the exact solution in: http://blueimp.github.com/jQuery-File-Upload/ 我在以下位置找到了确切的解决方案： 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. 那么，blueimp的关键点是什么，我错过了在上传之前启用图像预览的功能。
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 个解决方案
解决方案1
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 在您的JavaScript中编写此代码，并从此“ 上传之前显示图像”教程创建一个文件按钮附加onchange事件，例如此onchange =“ preview_image（event）”代码
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]);
}
解决方案2
0 2016-06-09 07:23:07
您可以尝试HTML5的FileReader。如果要支持IE，请使用以下方法：
div.css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + input.val() + '")'});
解决方案3
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]);
}
}
解决方案4
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.