在上传图像之前预览图像

Question

我希望能够在上传之前预览文件(图像).预览操作应该在浏览器中全部执行,而不使用Ajax上传图像.

我怎样才能做到这一点？

Answer 1

请看下面的示例代码:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

此外,您可以在此处尝试此示例.

Answer 2

有几种方法可以做到这一点.最有效的方法是使用URL.createObjectURL()的文件从你的<input> .将此URL传递给img.src,告诉浏览器加载提供的图像.

这是一个例子:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

您还可以使用FileReader.readAsDataURL()来解析<input>中的文件.这将在内存中创建一个包含图像的base64表示的字符串.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

Answer 3

单线解决方案:

以下代码使用对象URL,这比查看大图像的数据URL更有效(数据URL是包含所有文件数据的大字符串,而对象URL只是引用文件数据的短字符串 - 记忆):

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

生成的URL将如下:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

Answer 4

这是最简单的方法

在不使用 Ajax 或任何复杂功能的情况下从浏览器将图像上传到服务器之前预览图像。

它需要一个“ onChange ”事件来加载图像。

function preview() {
    frame.src=URL.createObjectURL(event.target.files[0]);
}

<form>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</form>

要预览多张图片，请单击此处

Answer 5

LeassTaTT的答案在FF和Chrome等"标准"浏览器中运行良好.IE的解决方案存在,但看起来不同.这里描述跨浏览器解决方案:

在HTML中我们需要两个预览元素,img用于标准浏览器,div用于IE

HTML:

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

<div id="preview_ie"></div>

在CSS中我们指定以下IE特定的东西:

CSS:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}  

在HTML中,我们包括标准和IE特定的Javascripts:

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

这pic_preview.js是来自LeassTaTT答案的Javascript.更换 $('#blah')蒙山的$('#preview'),并添加$('#preview').show()

现在IE特定的Javascript(pic_preview_ie.js):

function readURL (imgFile) {    
  var newPreview = document.getElementById('preview_ie');
  newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
  newPreview.style.width = '160px';
  newPreview.style.height = '120px';
}    

那是.适用于IE7,IE8,FF和Chrome.请在IE9中测试并报告.IE预览的想法在这里找到:http: //forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

Answer 6

我编辑了@ Ivan的答案,显示"No Preview Available"图像,如果它不是图像:

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.imagepreview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

Answer 7

这是一个多文件版本,基于Ivan Baev的回答.

HTML

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

JavaScript/jQuery

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

由于使用$ .parseHTML,需要jQuery 1.8,这应该有助于XSS缓解.

这将是开箱即用的,你需要的唯一依赖是jQuery.

Answer 8

是.有可能的.

HTML

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

你可以从这里获得现场演示.

Answer 9

这是cmlevy 答案的尺寸改进- 尝试

<input type=file oninput="pic.src=window.URL.createObjectURL(this.files[0])">
<img id="pic" />

Answer 10

使用 jquery预览多个文件

$(document).ready(function(){
    $('#image').change(function(){
        $("#frames").html('');
        for (var i = 0; i < $(this)[0].files.length; i++) {
            $("#frames").append('<img src="'+window.URL.createObjectURL(this.files[i])+'" width="100px" height="100px"/>');
        }
    });
});

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="image" name="image[]" multiple /><br/>
    <div id="frames"></div>
</body>

Answer 11

干净简洁的 JSfiddle

当您希望从div或按钮间接触发事件时,这将非常有用.

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

Answer 12

使用JavaScript(jQuery)和HTML5的多个图像的示例

JavaScript(jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

标记(HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

Answer 13

在 React 中，如果文件在你的 props 中，你可以使用：

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

Answer 14

如何创建一个加载文件并触发自定义事件的函数.然后将一个监听器附加到输入.这样我们就可以更灵活地使用该文件,而不仅仅是预览图像.

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

可能我的代码不如某些用户好,但我认为你会明白这一点.在这里你可以看到一个例子

Answer 15

以下是工作代码。

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }