im с нетерпением жду создания модуля загрузки, в котором пользователь может просматривать, нажмите «Открыть», и он мгновенно отобразит предварительный просмотр этого изображения, не нажимая кнопку «Отправить», чтобы пользователь мог продолжать вводить другую информацию.
я сделал простой, но неполный 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, но я бы хотел создать его самостоятельно.
С уважением
Вы можете размещать изображения только путем отправки формы, поэтому вы должны использовать iframe для загрузки изображения без перезагрузки главной страницы. Когда iframe перезагружается, добавьте в его ответ скрипт, который вызывает функцию обратного вызова на главной странице, чтобы отображать только что загруженное изображение.
Я недавно увидел статью с решением jQuery:
Zurb Playground: «Загрузка изображений на 100% меньше сосать».
Я бы переписал его здесь, но не так, как было бы лишним.
Для каждого не удается найти сценарий ajaxupload.js … Вы можете скачать его здесь .
Файлы не могут быть загружены с использованием чистого AJAX. Вы можете проверить плагин формы, который поддерживает загрузку файлов: http://jquery.malsup.com/form/ и интегрировать его в ваше решение. Там у вас есть несколько хороших примеров, использующих ajaxSubmit.
Возможно, вы захотите попробовать этот учебник:
http://www.finalwebsites.com/forums/topic/php-ajax-upload-example
которые должны помочь вам сделать именно то, что вы просите.
Для этого не требуется кнопка отправки. Вы можете просто использовать изображение и просматривать файлы, и он автоматически отправит его на 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>
<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&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>
Вышеприведенный код из бутстрапа. Ознакомьтесь с метроническим шаблоном бутстрапа.