如何使用图像将数据发送到服务器? [英] How to send data to the server with an image?

问题描述

我正在创建一个捕获用户数据和个人资料图片的表单，我在jquery ui(模态形式)中对此进行编程，并发送jquery ajax post，在服务器端(PHP5.2)需要获取变量$的值_File和用户名，电子邮件，密码的其他值，好吧，我的问题是数据和图像的传递. 希望您了解我，我能为您提供帮助

代码HTML

<div id="dialog-form" title="Create new user">
                <p class="validateTips">
                    All form fields are required.</p>
                <form id="formulario">
                    <fieldset>
                        <label for="name">
                            Name</label>
                        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                        <label for="email">
                            Email</label>
                        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
                        <label for="password">
                            Password</label>
                        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

                    </fieldset>
                    <div id="content-image-user">
                        <div id="imageuser"></div>
                    </div>
                    <div class="ui-widget"><label for="photo">Photo: </label><input type="file" name="photo" class="ui-autocomplete-input ui-widget-content ui-corner-all"></div>
                </form>
            </div>

CODE JS

$("#dialog-form").dialog({
    autoOpen: false,
    height: 620,
    width: 480,
    modal: true,
    buttons: {
        "Create an account": function() {
            //allFields.removeClass("ui-state-error");
            var info = $("#formulario").serialize();//
            //Here!!
            // How data gathering more data in the image?
            console.log(info);
            $.post("AddUser.php", info, function(data) {
                console.log(data);
                $('#grid-data').load("GridData.php", function() {
                    //console.log('load data OK');
                });
            });
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        //allFields.val("").removeClass("ui-state-error");
    }
});

致谢 谢谢 毛里西奥赫兹 智利圣地亚哥

解决方案

使用jquery表单插件，我可以获得很好的结果， http://hayageek.com/ajax-file-upload-jquery/

I am creating a form that captures user data and profile picture, I program this in jquery ui (modal form) and sending jquery ajax post, on the server side (PHP5.2) need to get the value of the variable $ _File and the other values ​​of the username, email, password, well my problem is in the delivery of data and image. I hope you have understood me and I can help

Code HTML

<div id="dialog-form" title="Create new user">
                <p class="validateTips">
                    All form fields are required.</p>
                <form id="formulario">
                    <fieldset>
                        <label for="name">
                            Name</label>
                        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                        <label for="email">
                            Email</label>
                        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
                        <label for="password">
                            Password</label>
                        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

                    </fieldset>
                    <div id="content-image-user">
                        <div id="imageuser"></div>
                    </div>
                    <div class="ui-widget"><label for="photo">Photo: </label><input type="file" name="photo" class="ui-autocomplete-input ui-widget-content ui-corner-all"></div>
                </form>
            </div>

CODE JS

$("#dialog-form").dialog({
    autoOpen: false,
    height: 620,
    width: 480,
    modal: true,
    buttons: {
        "Create an account": function() {
            //allFields.removeClass("ui-state-error");
            var info = $("#formulario").serialize();//
            //Here!!
            // How data gathering more data in the image?
            console.log(info);
            $.post("AddUser.php", info, function(data) {
                console.log(data);
                $('#grid-data').load("GridData.php", function() {
                    //console.log('load data OK');
                });
            });
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        //allFields.val("").removeClass("ui-state-error");
    }
});

regards thanks MauricioHz Santiago, Chile

解决方案

I could get a good result with jquery form pluggins, http://hayageek.com/ajax-file-upload-jquery/

这篇关于如何使用图像将数据发送到服务器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！