Как загрузить изображение для предварительного просмотра перед загрузкой через JavaScript - PullRequest
Новая
       31

Как загрузить изображение для предварительного просмотра перед загрузкой через JavaScript

9 голосов
/ 04 ноября 2010

Я хочу просмотреть изображение перед его загрузкой на сервер. Я написал немного кода для него, но он просматривается только в Internet Explorer, а не в других браузерах, таких как Safari, Chrome, Firefox, из-за соображений безопасности. Есть ли решение для предварительного просмотра изображения в этих браузерах? 

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

Ответы [ 7 ]

20 голосов
/ 04 ноября 2010

Для Firefox. Из-за безопасности он имеет усеченный путь. Тем не менее, они предоставили другие способы сделать это: 

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

Ниже работает в Internet Explorer 7 и Firefox 3. 

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

Документация объекта списка файлов на MDC

2 голосов
/ 04 ноября 2010

Невозможно получить пользовательский файл перед загрузкой, кроме как с использованием нового File API:

Пример: отображение миниатюр выбранных пользователем изображений

Это, конечно, не будет кросс-браузер. Также может быть способ сделать это через Flash и URL-адреса данных (или просто предварительный просмотр во Flash), но я предпочитаю избегать интеграции JavaScript <-> Flash.

1 голос
/ 28 августа 2012

просто посмотрите на следующую ссылку, связанную с файловым API, он работает для IE9 + я проверил, что он не работает для IE8 он показывает, как просматривать изображения и текстовые файлы http://www.xul.fr/en/html5/filereader.php FileReader, загрузка изображения на веб-страницу

FileReader позволяет получить доступ к локальной файловой системе и загружать документы только с помощью кода JavaScript.

На этом завершается выбор локального файла, поскольку этот тег может предоставлять содержимое этого файла только сценарию на сервере с данными формы.

Тест на совместимость

Текущий браузер распознает его File API, который включает в себя объект FileReader?

Результат Файловый API поддерживается. Исходный код теста: 

<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 код: 

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

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

Код 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>
1 голос
/ 04 ноября 2010

Это хорошо работает для меня в FF 3.6, IE 8, Safari 4.0 и Chrome 3.195.

Хотя есть несколько указателей стиля:

  • Не используйте фиксированныеШирина области предварительного просмотра, ваше изображение будет искажено, чтобы соответствовать области

  • Вместо document.getElementById() используйте это:

    function $(id) { return document.getElementById(id); }

  • Пример: $('send')

0 голосов
/ 18 августа 2016

Это просто, просто используйте это

В вашем 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>

А внутри вашего файла сценария 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>
0 голосов
/ 24 июля 2014

если тип ввода - файл, то с помощью функции htmlfilereader мы можем увидеть предварительный просмотр html-страницы?используя accept type = "text / html"

я получил описание и размер файла ... 

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

Вышеупомянутая проблема связана с автономным локальным сохраненным htmlстраницы.мы можем увидеть предварительный просмотр страницы в реальном времени, используя URL-адрес в реальном времени - 

<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

>

0 голосов
/ 29 февраля 2012

Это прекрасно работает в 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;
            }
        }       
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...