PHP如何从弹出窗口上传图像-Java 学习之路

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

what i wanted to do
1.在按钮上单击打开弹出窗口
2.在弹出窗口中打开浏览图像
3.上传图像后，我想在同一个弹出窗口中显示图像，用户可以裁剪它
4.完成裁剪后将图像保存到数据库和文件夹，并希望显示配置文件图片

What i did
1.我已经完成了核心php中的所有代码，但没有使用弹出窗口

弹出窗口
2.我可以点击按钮打开弹出窗口，浏览文件，操作进入控制器 .

Code
查看页面

// 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 to open popup and send data

<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');
}

Controller action

public function uploadImageAction()
{
    echo "<pre>";print_r($_FILES);echo "<pre>";exit; // not able to get request 
}

2 回答

0

您可以使用jcrop插件：

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

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

要满足您的要求，您必须使用：AjaxUpload和JCrop .

Ajaxupload会将图像上传到服务器，jcrop可以帮助您裁剪图像 .

裁剪后，您需要使用旧图像并在DB和文件夹中保存裁剪的图像 .

回复于 2024-05-05T08:20:55+08:00
1

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

动画或淡入隐藏的div on-clik函数

为div排序设置z-index

回复于 2024-05-05T08:20:55+08:00

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

2 回答

相关问题