Как просмотреть изображение в длинной форме

Question

Я хочу получить предварительный просмотр изображения перед загрузкой его в форму, в которой есть другое поле, например имя, возраст и т. Д. Я пробовал решение ajax. код работает отлично автономно. Но Когда я помещаю код в форму, он не работает. Plz помогите мне.

код выглядит следующим образом: автономного код для просмотра изображения с помощью Ajax

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
Upload your image <input type="file" name="photoimg" id="photoimg" /> 
</form> 

и моей формы

<form name="iupload" action="index.php" method="post" > 
Name <input type="text" name="myname" ><br/> 
Age <input type="text" name="age" > 
<input type="file" name="photoimg" id="photoimg" /> 

<input type="submit" name="submit" value="upload"> 

<div id='preview'> 
</div> 

</form> 

Answer 1

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

Используя API файлов, вы можете получить локальное blob с помощью метода window.URL.createObjectURL. В IE8 beta добавлено дополнение «fakefile», чтобы скрыть локальный URL-адрес файла, чтобы устранить проблему безопасности, как описано here. Но в более старых версиях вы должны «использовать» это отверстие безопасности.

Что-то подобное может работать (fiddle):

$('form input[type=file]').change(function() { 
    var src; 
    if ('files' in this) { // File API supported (webkit/FF) 
     var obj = this.files[0]; 
     src = window.URL ? 
      window.URL.createObjectURL(obj) : 
      window.webkitURL.createObjectURL(obj); 
    } else { 
     if (/fake/.test(this.value)) { 
      // fallback to whatever (IE8, IE9) 
     } else { 
      src = this.value; // exploits the IE security hole 
     } 
    } 
    $(new Image()).attr('src',src).appendTo('body'); // the local image! 
}); 

Answer 2

Вы не можете просматривать локальные изображения в браузере. Браузер не имеет доступа к локальной файловой системе. Для этого вам нужны плагины Flash, Java или Active-X.

Answer 3

Вы пробовали другие плагины для загрузки AJAX? Я лично пробовал это, и это сработало для меня.

http://valums.com/ajax-upload/

Там еще один учебник о том, как использовать его здесь:

http://css-tricks.com/ajax-image-uploading/