Блог

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

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

Вот мой код:-

      function imageURL(input) {
        if (input.files amp;amp; 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.

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

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

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

Шаг 2: Создание эскизов на стороне сервера
Вам нужно будет написать небольшое приложение / маршрут в вашем серверном приложении, которое просто принимает форму, содержащуюся во входном файле, и генерирует временный выходной файл. Вы могли бы даже просто временно сохранить 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 будет означать, что ее регулярная отправка будет прерываться — не говоря уже о том, что маршрут миниатюр будет отличаться от фактического маршрута отправки формы. Используйте некоторые обходные пути (например, создайте вторичную скрытую форму, и событие размытия скопирует файл-загрузите в него, а затем отправит его).

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

В IE вы можете попытаться получить доступ к содержимому файловой системы с помощью ActiveXObject (FileSystemObject).

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

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

Надеюсь, это поможет

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

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

Я согласен с теми, кто уже ответил отрицательно — локальные файлы запрещены по дизайну.

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

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

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

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

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

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

Попробуйте это для IE < 10:

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

<h2>Preview images for MS-IE amp;< 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 /

Используйте 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(){
    }
});