показать загруженное изображение перед нажатием кнопки отправки

Я хочу показать загруженное изображение, прежде чем нажимать кнопку загрузки. Я пробовал, но не работал, пожалуйста, проверьте мой код ниже. когда я выбираю изображение для загрузки, тогда изображение не будет появляться и после этого с помощью firebug я обнаружил, что мой код создает странные URL-адреса. Вы также можете проверить скрипку здесь: http://jsfiddle.net/XdXLJ/показать загруженное изображение перед нажатием кнопки отправки

Script

$(document).ready(function(e) { 
    $('#upload').click(function(){ 
     $('input[type="file"]').show().focus().click().hide(); 
     $('input[type="file"]').change(function(){ 

      var val = $('this').val; 
      $('.img').append('<img src="'+val+'" />') 

      }) 
     }) 
})

HTML

<form id="form1" name="form1" method="post" action=""> 
<input name="" type="file" /> 
<div id="upload">Upload</div> 
<div class="img"></div> 
</form>

Стиль

#upload{float:left; padding:8px 10px; color:#000; background:#CCC; border:1px solid #000;} 
input[type="file"]{display:none;}

источник

2013-09-24 Kamal

Это не будет работать так, как вы ожидаете, потому что обычно браузер загружает путь к изображению перед загрузкой. Для этого вам нужно будет использовать HTML5 или какой-либо другой метод. – BenM

Возможный дубликат [Предварительный просмотр изображения до его загрузки] (http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) –

требует ли ваше требование для работы в IE также ??если да, то вам нужно будет сохранить изображение где-то на своем сервере перед отправкой фактической формы с помощью какой-либо другой формы. –

если ваше требование работать в отличных от IE браузеров, то вы можете следить за this link и имеет идеальный ответ для вас

но если ваше требование также включает в себя IE то вы делаете несколько шагов Шаг 1: создайте другую форму, отличную от вашей основной формы, эта другая форма не может находиться внутри основной формы, так как форма внутри формы не может быть представлена.

Шаг 2: в вашей новой форме держать

<input type="file" name="imageFileChooser"/>

Шаг 3: на события изменения поля файла вызвать функцию АЯКС

Шаг 4: эта функция Аякса представляет свою новую форму только с изображением поле и сохраняет изображение на стороне сервера

Шаг 5: если вы хотите предоставить предварительный просмотр формы, вам необходимо вызвать временно сохраненное изображение с вашего сервера.

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

источник

2013-09-24 10:20:47

в HTML:

<input type='file' onchange="readURL(this);" />

Javascript/JQuery через Тип FileReader

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

где input является <input type="file"> элемент , если вы используете AjaxToolKit AsyncFileUpload, вы можете получить вход с помощью: fileUploadElement.get_inputFile()

Обращайтесь к: how to preview a image before and after upload?

источник

2014-01-29 14:03:37

показать загруженное изображение перед нажатием кнопки отправки

ответ

Смежные вопросы