Я хочу загрузить изображение из всплывающего окна, но не получить правильное решение.
PHP Как загрузить изображение из всплывающего окна
, что я хотел сделать
1. На кнопке мыши открытого всплывающего окно
2. В этой всплывающей открытой форме для просмотра изображения
3. После загрузки изображения я хочу показать изображение в том же всплывающем окне и пользователе можно обрезать его
4. После завершения обрезки сохранить изображение в базу данных и папку и хотите, чтобы показать профиль ПОС
Что я сделал
1.I завершили весь код в ядро PHP, но без использования всплывающих
для всплывающего меню
2. Я могу открыть всплывающее окно по нажатию кнопки, просмотреть файл и действие идет к контроллеру.
Код
Просмотр страницы
// open popup
<div class="profile-pic fl">
<div class="txtc">
<?php echo $this->tag->image(array("img/profile_pic_default.jpg","class"=>"profile_img")) ; ?>
</div>
<div class="txtc mrgt2">
<button id="openPopup" onclick="upload_action();">Upload Image</button>
</div>
</div>
//iamge upload form
<div id="up-image" style="display: none">
<div style="margin:0 auto; width:600px">
<div id="thumbs" style="padding:5px; width:600px"></div>
<div id="crop-image" style="width:600px">
<?php echo $this->tag->form(array("personaldetails/uploadImage","id"=>"cropimage",'enctype'=>"multipart/form-data"))?>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
</div>
</div>
Script, чтобы открыть всплывающее окно и отправить данные
<script type="text/javascript">
$(document).ready(function() {
$edit_dialog = $("#up-image").dialog({
autoOpen:false,
title:"Upload image",
modal:true,
height: 300,
width: 600,
buttons:[
{text: "Submit", click: function() { $('form',$(this)).submit(); }},
{text: "Cancel", click: function() { $(this).dialog("close"); }}
],
create: function(event, ui)
{
$(this).parents(".ui-dialog").css("margin-left", 350);
$(this).parents(".ui-dialog").css("margin-top", 50);
}
});
//Submit action for dialog form
$("#up-image form").submit(function() {
var formData = new FormData($('form')[0]);
$.post($(this).attr('action'), $(this).serialize(),function(formData)
{
alert('done'+data);
$("#up-image").dialog('close');
},'json');
//stop default form submit action
return false;
});
//attach action to edit links
});
function upload_action()
{
$edit_dialog.dialog('open');
}
контроллер действия
public function uploadImageAction()
{
echo "<pre>";print_r($_FILES);echo "<pre>";exit; // not able to get request
}
Эй спасибо за ответ, который я иметь код, чтобы делать что-то выше, как вы упомянули, но я хочу сделать это, используя всплывающее окно. –
Первое, что вы не можете получить $ _FILES в AJAX ($.post, $ .get или $ .ajax), поэтому вам нужно загрузить файл с помощью ajaxupload и после загрузки показать пользователю это изображение и дать возможность обрезать это изображение. –