PHP如何从弹出窗口上传图片

Question

我想从弹出窗口上传图片，但没有得到正确的解决方案。

我想做的事
1. 在按钮上单击打开弹出窗口
2. 在该弹出式打开表单中浏览图片
3. 上传图片后，我想在同一个弹出窗口中显示图片，用户可以裁剪它
4. 裁剪完成后保存图片到数据库和文件夹，想显示头像

我做了什么
1.我已经完成了核心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 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 
}

Answer 1

您可以为此使用 jcrop 插件：

http://deepliquid.com/projects/Jcrop/demos/crop.php

http://deepliquid.com/content/Jcrop.html

为了满足您的要求，您必须使用： AjaxUpload 和 JCrop 一起使用。

Ajaxupload 会将图片上传到服务器，jcrop 会帮你裁剪图片。

裁剪后，您必须需要旧图像并将裁剪后的图像保存在数据库和文件夹中。

Answer 2

在隐藏的 div 中添加表单并设置绝对位置或固定位置

在隐藏的div点击功能中动画或淡入淡出

为 div 排序设置 z-index