1

参考：

如何在使用 JavaScript 或 jquery 上传之前预览图像？ javascript - 上传前的图像预览 如何通过 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();
        });

但没有运气。

4

4 回答 4

0

这个链接有一个很好的答案：在上传之前预览图像

<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]);
}
}
于 2018-02-15T06:21:55.740 回答
0

你可以试试 HTML5 的 FileReader。如果你想支持 IE，用这个：

div.css({'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="' + input.val() + '")'});
于 2016-06-09T07:23:07.410 回答
0

在您的 javascript 中编写此代码并创建一个文件按钮附加 onchange 事件，例如来自此Display Image Before Upload教程的 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]);
}
于 2016-06-09T07:08:39.913 回答
0 

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

于 2019-10-04T12:37:28.543 回答