Вопрос по jquery, javascript – Загрузка изображения с предварительным просмотром и удалением

3

Задавайте следующие вопросы и отвечайте на вопросы, касающиеся следующего сценария, который будет просматривать фотографию перед загрузкой. Сценарий изhttp://jsbin.com/uboqu3/edit#javascript,html

1) Скрипт работает для Firefox, не подходит для IE. Как заставить это работать на IE?

2) У него нет способа удалить фотографию. Требуется что-то вроде маленького изображения "X" установлен на Предварительный просмотр фотографии, нажав эту кнопку & quot; X & quot; удалит фотографию. Кто-нибудь может поставить это решение?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
Да, можете ли вы предоставить дополнительную информацию или опубликовать пример вjsfiddle.net Rob Angelier
Какую ошибку вы получаете в IE? ManseUK

Ваш Ответ

6   ответов
6

Demo

Проверено на нескольких браузерах, Chrome, Fx, Safari 6 (кто-то может протестировать 5?)

Работает на моем IE8 на XP без каких-либо изменений в настройках, но, как @Gunasekaran упоминает позже на этой странице, вам может понадобиться

Open Tools->internet option-> security tab-> custom level - locate the setting "Include local directory path when uploading files to a server" and click on Enable.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>

Похоже, это в IE8 на XP:

Example

Более новый методcreateObjectURL который я не реализовал

Update Вам нужно будет добавить щелчок мышью, чтобы очистить ввод файла, если вы хотите, чтобы пользователь мог дважды выбрать одно и то же изображение (тогда onchange не запускается)

Событие выбора файла ввода HTML не срабатывает при выборе того же файла

Загрузил новую демоверсию и обновил код. Работает в том числе кнопка скрытия - для меня IE8 XP, FX 10
Извините, ваше решение не работает. Протестировал его на IE8, и он не работал. user1315468
Какая версия на какой платформе?
Извините, пробовал ваш код на моем IE8, но все еще не работает, см. Снимок экрана моего IE8 для вашего кода:asuma.com/user1231/ss-120418.jpg  Картинка предварительного просмотра появилась в виде разбитого изображения. user1315468
stackoverflow.com/questions/12030686/… - Я обновил ответ. Спасибо
0

ПРИМЕЧАНИЕ. Иногда Internet Explorer может блокировать сценарии, поэтому для просмотра изображения щелкните запрос и «Разрешить заблокированный контент». Ниже приведен рабочий код ... **

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>
<form name="form2">

<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>

<div>
<img id="previewImg" src="#" />
</div>

</form>
<script>

function readURL(input) {

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

    reader.onload = function (e) {
        $('#previewImg')
            .attr('src', e.target.result)
            .width(130);
    }
reader.readAsDataURL(input.files[0]);

}else{
          var filename = "";
         filename = "file:\/\/"+input.value;
         document.form2.previewImg.src=filename;
         document.form2.previewImg.style.width="130px";

 }
}
 </script>   
</body>
</html>
PreviewImg не доступно через document.form2, если оно не является & lt; input type = & quot; image & quot;
0

<img id="img1" alt="" runat="server"/> <span id="x" ></span> <asp:FileUpload runat="server" ID="FileUpload1" onchange="readURL(this)" />

<script type="text/javascript">
function readURL(input) {
    if (input..files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#imgRepresentImage").attr("src", e.target.result).width(200);
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        var img = input.value;
        $("#imgRepresentImage").attr("src", img).width(200);
    }
    $("#x").text('[X]');
}
$(document).ready(function () {
    $("#x").click(function () {
        $("#imgRepresentImage").attr("src", "").width(0);
        $("#x").text('');
        $("#representImageUpload").val('');
    });
});

Работал для меня :)

0

ла. Но учтите, что файл, который вы читали, был размером 20 МБ, читая его, так как dataURL собирается создать объект JS, который очень большой. Как вы этого избежать?

1

IE8 нуждается в изменении настроек безопасности:

Откройте Инструменты> Интернет> & gt; вкладка "Безопасность" & gt; пользовательский уровень найдите параметр & quot; Включить путь к локальному каталогу при загрузке файлов на сервер & quot; и нажмите Включить.

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

2

FileReader() поддержка не введена до IE10 .. она будет работать с Chrome 7 и Firefox 3.6

Смотрите документы для поддержки FileReader или жеcaniuse.com здесь

Извините, я предоставил неверный комментарий. Какие-либо решения для старых браузеров? user1315468
Извините, ваш ответ не работает. Протестировал его на IE 8, и он не работал. user1315468
@ user1315468 Я немного запутался ... В своем ответе я сказал вам, что он не будет работать в IE8 ... см. ссылки, которые я добавил
@ user1315468 просто быстрый Google возвращает это - & gt;code.google.com/p/image-upload-preview (никогда не использовал его раньше, но говорит, что поддерживает IE8
Однако ссылка DEMO мертва

Похожие вопросы