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 on-clik函数的动画或淡入淡出

为div排序设置z-index

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

2 个答案: