如何在通过 JavaScript 上传之前上传预览图像

Question

I want to preview an image before uploading it to the server.我想在将图像上传到服务器之前预览图像。 I have written a little bit code for it, but it is only being previewed in Internet Explorer, not in other browsers like Safari, Chrome, Firefox, due to some type of security reasons.我为它编写了一些代码，但由于某种类型的安全原因，它只能在 Internet Explorer 中预览，而不是在其他浏览器（如 Safari、Chrome、Firefox）中预览。 Is there any solution to preview the image in these browsers?有什么解决方案可以在这些浏览器中预览图像吗？

    <body>
       <form name="Upload" enctype="multipart/form-data" method="post">
           Filename: <INPUT type="file" id="submit">
           <INPUT type="button" id="send" value="Upload">
       </form>
       <div 
           id="div" 
           align="center" 
           style="height: 200px;width: 500px;border-style: ridge;border-color: red">
       </div>
    </body>

    <script type="text/javascript">
        var img_id=0
        var image = new Array()
        document.getElementById('send').onclick=function()
        {
            img_id++
            var id="imgid"+img_id
            image = document.getElementById('submit').value;
            document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
        }
    </script>
</html>

Answer 1

For Firefox.对于火狐。 Because of security it has a truncated path.为了安全起见，它有一条截断的路径。 However, they have provided other ways of doing this:但是，他们提供了其他方法来做到这一点：

var img = document.createElement("IMG");
if(document.all)
    img.src = document.getElementById('submit').value;
else
    // Your solution for Firefox.
    img.src = document.getElementById('submit').files.item(0).getAsDataURL();
document.getElementById('div').appendChild(img);

The below is working in Internet Explorer 7 and Firefox 3.以下适用于 Internet Explorer 7 和 Firefox 3。

<style type="text/css">
    #prevImage {
        border: 8px solid #ccc;
        width: 300px;
        height: 200px;
    }
</style>
<script type="text/javascript">
    function setImage(file) {
        if(document.all)
            document.getElementById('prevImage').src = file.value;
        else
            document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
        if(document.getElementById('prevImage').src.length > 0) 
            document.getElementById('prevImage').style.display = 'block';
    }
</script>
<pre>
     IE8 needs a security settings change: internet settings, security, custom level :

     [] Include local directory path when uploading files to a server
 ( ) Disable
 (o) Enable 
</pre>
<form>
    <input type="file" name="myImage" onchange="setImage(this);" />
</form>
<img id="prevImage" style="display:none;" />

Documentation of File List object on MDC MDC 上文件列表对象的文档

Answer 2

 uploadFile(event: any) { const image: any = document.getElementById('output'); image.src = URL.createObjectURL(event.target.files[0]); }

 <div> <img id="output" width="200" /> </div> <div class="form-group"> <label for="exampleFormControlFile1">File Input</label> <input type="file" (change)="uploadFile($event)" class="form-control-file" /> </div>

Answer 3

just have a look on following link related on file API, it works for IE9+ i checked it does not work for IE8 it shows how to preview image and text files http://www.xul.fr/en/html5/filereader.php FileReader, loading an image in a webpage只需查看与文件 API 相关的以下链接，它适用于 IE9+ 我检查它不适用于 IE8 它显示了如何预览图像和文本文件http://www.xul.fr/en/html5/filereader.php FileReader，在网页中加载图像

FileReader allows access to the local file system and load documents with just JavaScript code. FileReader 允许访问本地文件系统并仅使用 JavaScript 代码加载文档。

This completes the for selecting local file, as this tag can only provide the content of this file to a script on the server, with the form data.这样就完成了选择本地文件，因为这个标签只能将这个文件的内容和表单数据一起提供给服务器上的脚本。

Compatibility test兼容性测试

The current browser recognizes it the File API, which includes the FileReader object?当前浏览器识别它的 File API，其中包括 FileReader 对象？

Result File API supported.支持结果文件 API。 Source code of the test:测试源代码：

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) 
  document.write("<b>File API supported.</b>");
else
  document.write('<i>File API not supported by this browser.</i>');
</script>

HTML code: HTML代码：

<input type="file" id="getimage">

<fieldset><legend>Your image here</legend>
    <div  id="imgstore"></div>
</fieldset>

JavaScript code: JavaScript 代码：

<script>
function imageHandler(e2) 
{ 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}
</script>

Answer 4

This works fine for me in FF 3.6, IE 8, Safari 4.0, and Chrome 3.195.这在 FF 3.6、IE 8、Safari 4.0 和 Chrome 3.195 中对我来说很好用。

A few style pointers though:一些样式指针虽然：

Don't use a fixed-width preview area, your picture will be distorted to fit the area不要使用固定宽度的预览区域，您的图片会扭曲以适应该区域
Instead of document.getElementById() use this:而不是document.getElementById()使用这个：
function $(id) { return document.getElementById(id); }
Example: $('send')示例： $('send')

Answer 5

It's not possible to grab a user file before upload, except using the new File API:上传前无法获取用户文件，除非使用新的 File API：

Example: Showing thumbnails of user-selected images 示例：显示用户选择图像的缩略图

This will not, of course, be cross-browser.当然，这不会是跨浏览器的。 There might also be a way to do it via Flash and data URLs (or just previewing in Flash), but I prefer to avoid JavaScript <-> Flash integration.可能还有一种方法可以通过 Flash 和数据 URL（或仅在 Flash 中预览）来实现，但我更愿意避免 JavaScript <-> Flash 集成。

Answer 6

if input type is file then using htmlfilereader function can we see the preview of html page?如果输入类型是文件，那么使用 htmlfilereader 函数我们可以看到 html 页面的预览吗？ using accept type ="text/html"使用接受类型 ="text/html"

i got the file description and size...我得到了文件描述和大小...

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

above mention problem is related with offline local stored html pages.上面提到的问题与离线本地存储的 html 页面有关。 we can see the preview of live page using live url as-我们可以使用实时网址查看实时页面的预览 -

<html>
    <head>
    <!--[if IE]>
    <style>
    #frame {
        zoom: 0.2;
    }
    </style>
    <![endif]-->
    <style>
    #frame {
        width: 800px;
        height: 520px;
        border: none;
        -moz-transform: scale(0.2);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.2);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.2);
        -webkit-transform-origin: 0 0;
    }
    </style>
    </head>
    <body>
    <iframe id="frame" src="http://www.bing.com">
    </iframe>
    </body>
    </html

> >

Answer 7

It's Simple just use this这很简单，只需使用这个

In your HTML file use在您的 HTML 文件中使用

<div>
<form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <br>
        <img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
    </form>
<div>

And inside your java script file just write this在你的java脚本文件中写下这个

<script>

 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>

Answer 8

This works fine in FF 3.6, IE 9, Safari 4.0, and Chrome 3.195.这适用于 FF 3.6、IE 9、Safari 4.0 和 Chrome 3.195。

var reader = new FileReader();

function preview(what) {
     if(jQuery.browser.msie || jQuery.browser.safari || jQuery.browser.chrome) {
         document.getElementById("preview-photo").src=what.value;
         return;
    }
    else{                   
        // array with acceptable file types
        var accept = ["image/png","image/jpeg","image/jpg","image/gif"];

        // if we accept the first selected file type
        if (accept.indexOf(what.files[0].type) > -1) {
            if(what.files && what.files[0]){
                  reader.readAsDataURL(what.files[0]);
                  document.getElementById("preview-photo").src=reader.result;
            }
        }       
    }
}

如何在通过 JavaScript 上传之前上传预览图像

问题描述

8 个解决方案

解决方案1
19 已采纳 2010-11-04 06:29:27

解决方案2
2 2020-09-03 08:33:09

解决方案3
1 2012-08-28 04:14:20

解决方案4
1 2010-11-04 05:06:51

解决方案5
1 2010-11-04 05:46:16

解决方案6
0 2014-07-24 10:31:54

解决方案7
0 2016-08-18 07:13:54

解决方案8
-1 2012-02-29 11:38:30

如何在通过 JavaScript 上传之前上传预览图像

问题描述

8 个解决方案

解决方案1 19 已采纳 2010-11-04 06:29:27

解决方案2 2 2020-09-03 08:33:09

解决方案3 1 2012-08-28 04:14:20

解决方案4 1 2010-11-04 05:06:51

解决方案5 1 2010-11-04 05:46:16

解决方案6 0 2014-07-24 10:31:54

解决方案7 0 2016-08-18 07:13:54

解决方案8 -1 2012-02-29 11:38:30

解决方案1
19 已采纳 2010-11-04 06:29:27

解决方案2
2 2020-09-03 08:33:09

解决方案3
1 2012-08-28 04:14:20

解决方案4
1 2010-11-04 05:06:51

解决方案5
1 2010-11-04 05:46:16

解决方案6
0 2014-07-24 10:31:54

解决方案7
0 2016-08-18 07:13:54

解决方案8
-1 2012-02-29 11:38:30