PHP и JQuery загрузить изображение и предварительный просмотр мгновенно

Question

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

Я сделал простой, но неполный JQuery ниже, который в основном захватывает имя изображения.но мой вопрос, как я могу опубликовать изображение загрузки в сценарии php, так как там нет кнопки отправки для POST?я не могу захватить значения массива $ _FILES.

jquery:

$(document).ready(function() {
  $("#uploadimage").change(function() {
      var imagesrc = $("#uploadimage").val();
      $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(),
      function(data){
        //do something here
      },"json");
  });
});

HTML-форма:

<form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST">
    <table> 
        <tr><td>Image: </td><td><div id="imagepreview"></div></td></tr> 
        <tr><td>Upload a photo: </td><td><input type="file" name="uploadimage" id="uploadimage" /></td></tr>
    </table> 
</form>

я видел, что Uploadify может делать, но я хотел бысоздайте его самостоятельно.

regards

Answer 1

Недавно я увидел статью с решением jQuery для этого:

Zurb Playground: "Загрузка изображений с на 100% меньшим количеством отстой. Гарантировано."

Я быперепишите его здесь, но не так, как это было бы излишним.

Answer 2

Для всех не может найти скрипт ajaxupload.js ... Вы можете скачать его здесь .

Answer 3

Файлы не могут быть загружены с использованием чистого AJAX.Вы можете воспользоваться плагином формы, который поддерживает загрузку файлов: http://jquery.malsup.com/form/ и интегрировать его в ваше решение.Там у вас есть несколько хороших примеров использования ajaxSubmit.

Answer 4

Вы можете опубликовать изображение, только разместив форму, поэтому вы должны использовать iframe для загрузки изображения без перезагрузки главной страницы.Когда iframe перезагрузится, добавьте в его ответ какой-нибудь скрипт, который запускает функцию обратного вызова на главной странице для отображения только что загруженного изображения.

Answer 5

<div class="control-group-upload">
     <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
             <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                 <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
             </div>
         <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
         <div>
             <span class="btn btn-file"><span class="fileupload-new">Select image</span>
             <span class="fileupload-exists">Change</span>
             <input type="file" class="default" />
         </span>
     <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
     </div>
</div>

Приведенный выше код взят из начальной загрузки. Проверьте метроник шаблона начальной загрузки.

Answer 6

Для этого не требуется кнопка отправки.Вы можете просто использовать изображение и искать файлы, и он автоматически отправит его на php.

<div id="covercameraimage">
<label for="photoimg">
<img src="siteimages/cameracoverimage.png" style="cursor:pointer" title="Upload Cover" alt="Upload Cover" />
</label>
<form id="imageform" method="post" enctype="multipart/form-data" action='c.php'>
<div id='imageloadstatus' style='display:none'><img src="load.gif" alt="Uploading...."/></div>
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<div id='imageloadbutton'>
<input type="file" id="photoimg" name="photoimg" style="cursor: pointer;  display: none"//>
</div>
</form>
</div>

<script type="text/javascript">
$(document).ready(function()
{

$('body').on('change','#photoimg', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#usercover',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>
</div>

Answer 7

Вы можете попробовать этот урок:

http://www.finalwebsites.com/forums/topic/php-ajax-upload-example

, что должно помочь вам сделать именно то, что вы просите.