Предварительный просмотр изображения перед загрузкой в IE и Chrome

Я пытаюсь создать модуль, в котором я хотел бы показать предварительный просмотр изображения пользователю, прежде чем он загрузит изображение в базу данных.

Я нашел решение, которое работает для Firefox, но не работает для IE и Chrome...Может кто-нибудь мне помочь.

вот мой код:-

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

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

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

и я вызываю эту функцию при изменении события элемента управления вводом файла: -

<input type="file" class="file" onchange="imageURL(this)" />

а также я пробовал это URL-адресом шагов но он не работает для IE7 и 8 и Chrome.

9
html javascript jquery

7 ответов

нет кросс-платформенного способа выполнить это, используя только HTML / JavaScript. Однако можно использовать очень простой программный подход:

Шаг 1: привязка к размытию
Привяжите событие "размытие" к полю ввода файла, например:

$("#input_field").blur(function(event){
    alert("Blur!");
});

Шаг 2: Серверная Миниатюр
Вам придется написать небольшое приложение / маршрут на стороне сервера, которое просто принимает форму, содержащую входные данные file, и генерирует временный выходной файл. Вы даже можете временно хранить filedata в своей базе данных, а не записывать отдельные файлы на диск; реализация зависит от вас. Когда этот маршрут получает запрос, он должен эскиз изображения, а затем верните путь к этому миниатюре

Шаг 3: AJAX
Во-первых, выберите один из много доступные библиотеки jQuery" AJAX Upload " для создания формы, содержащей ваш загрузите файл через AJAX. Примените эту библиотеку к форме(для приведенных ниже примеров я буду использовать ajaxForm.), а затем измените размытие:

// AJAX the form
$("#your_form").ajaxForm({
    success: function(response){
        // Insert your returned thumbnail into your DOM.
    }
});

// Modify the blur
$("#input_field").blur(function(event){
    $("#input_field").closest("form").submit();
});

вопросы:
С вышеуказанным подходом возникнут проблемы. Создание вашей формы AJAX будет означать, что ее регулярная отправка будет нарушена , не говоря уже о том, что маршрут эскиза будет отличаться от фактического маршрута отправки формы. Используйте некоторые обходные пути (например, имейте вторичную скрытую форму и размытие событие копирует файл-загружает на него, а затем отправляет его).

8

Это не будет работать в любом другом браузере, кроме firefox, потому что объект FileReader, который вы используете, не является JS standered, это класс, очень специфичный для FireFox. В соответствии с веб-стандартными сценариями браузера (javascript) не будет иметь разрешения безопасности для чтения содержимого любых системных ресурсов(файлов).

в IE вы можете попытаться получить некоторый ActiveXObject (filesystemobject, с) поможет получить доступ к содержимому файловой системы.

5

нет кросс-браузерного решения (даже FileReader нужны определенные разрешения в Firefox), только некоторые обходные пути для ie и firefox.

вы должны сделать обычным способом, загрузить изображение во временный файл и удалить/сохранить его в зависимости от подтверждения пользователя

надеюсь, что это помогает

2

по данным когда я могу использовать..., файл API поддерживается в Firefox 3.6+, Chrome 9+, Opera 11.1+ (и Safari 6).

Если вам это действительно нужно в IE, вы можете создать загрузчик файлов во Flash.

1

Я согласен с nay-sayers, которые уже ответили-локальные файлы запрещены конструкция.

но, если вы не действительно привержены этой функции предварительного просмотра перед загрузкой и готовы включить некоторые ухабистые UX, вы можете обойти вопрос local / server и...

...используйте сопроводительное приложение AIR для обработки загрузки изображений для вашего веб-приложения.

  • создать простой воздух приложение, которое позволяет пользователям выбирать локальные изображения и отображать их в миниатюрах без их загрузки.

  • вы можете проверить, установлено ли приложение у пользователя, и в этот момент Вы можете предложить им установить или запустить его, если он уже установлен (см. здесь больше об этом). Вы можете позволить им отказаться и использовать резервную систему загрузки без предварительного просмотра миниатюр.

  • Как только изображения выбраны и рассмотренные (или даже измененные или иным образом обработанные), приложение AIR может загрузить их на ваш сервер напрямую.

Это безумие, я знаю, и, вероятно, не соответствует вашим навыкам или ожиданиям (на основе тегов по этому вопросу), но я думаю, что это сработает.

1

попробуйте это для IE 

<style type="text/css">
#imgPreview {
    width:320px;
    height:280px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>

<h2>Preview images for MS-IE &lt; 10</h2>
<form id="form1" runat="server">
        <input type="file" onchange='document.getElementById("imgPreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=this.value' />
        <div id="imgPreview"></div>
</form>

Скрипка:http://jsfiddle.net/Sme2L/5/

1

используйте jQuery ajax для решения вашей проблемы.

$.ajax({
    type: "post",
    url: "serverURL?randomParam="+(Math.random() * 1000),
    cache: false,               
    data: null,
    success: function(json){
        try{            
            var obj = JSON.parse(json);                                             
            if(obj[0].IMAGE!=null){                             
                $("#captchaImage").attr("src", obj[0].IMAGE); 
            }               
        }catch(e) {     
            showMessage("E1");  
        }
    },
    error: function(){
    }
});
1