Question

参考：

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

没有为我工作......从上面参考，有些只在ff工作，有些是先上传，然后才显示预览。

我在http://blueimp.github.com/jQuery-File-Upload/

中找到了确切的解决方案

它适用于我测试过的所有内容。

我发现它有效但我的代码不起作用。那么blueimp关注的关键点是什么？我在上传之前启用了图片预览而失踪了。

我尝试过：

        $('.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();
        });

但没有运气。

Answer 1

在您的javascript中编写此代码并创建一个文件按钮attach onchange事件，例如onchange =“preview_image（event）”来自此Display Image Before Upload教程的代码

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]);
}

Answer 2

您可以尝试使用HTML5的FileReader。如果您想支持IE，请使用：

div.css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + input.val() + '")'});

Answer 3

此链接有一个很好的答案：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]);
}
}

Answer 4

<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>

上传前javascript jquery预览图片

4 个答案: