Question

好吧，我无法多次发送表单。 AjaxForm代码的初始部分工作正常，而FormData不起作用。相反，它会在没有页面的情况下在网址中发送数据 <？EM>的index.php照片[] =＆安培;用户名= dfdfdf 。早期部分用于图像存储，第二部分用于用户数据存储。我的要求是使用单一表单将数据发送到数据库中的不同表。当用户单击提交时，数据存储在数据表中，并且上载的图像也会使用该用户ID进行更新。希望你能解决问题！

<?php 
session_start();
include("db.php");
$str = "select * from fileupload order by id DESC";
$res = mysql_query($str);
?>
<!DOCTYPE html>
<html>
<head>
<title>Upload</title>


<script src="js/jquery.min.js"></script>
<script src="js/jquery.wallform.js"></script>
<script>
$(document).ready(function() { 

    $('#photoimg').die('click').live('change', function() { 
        $("#imageform").ajaxForm({
            url : 'ajaxImageUpload.php',
            target: '#preview', 
            beforeSubmit:function(){ 

                console.log('ttest');
                $("#imageloadstatus").show();
                $("#imageloadbutton").hide();
            }, 
            success:function(){ 
                console.log('test');
                $("#imageloadstatus").hide();
                $("#imageloadbutton").show();
            }, 
            error:function(){ 
                console.log('xtest');
                $("#imageloadstatus").hide();
                $("#imageloadbutton").show();
            } }).submit();


    });

    $(".del-pic").live("click", function(){
        var sel1 = $(this).closest('.imgList');
        var del_id = $(this).attr('id');

        $.post("deleteimage.php", {
            del_id : del_id
        },
               function(data, txtStatus) {
                   sel1.fadeOut('slow', function()
                                {
                                    sel1.remove();
                                });
               });
    });

    $("#uploadTrigger").click(function(){
        $("#photoimg").click();
    });

    $("#upbutton").live("click", function(){
        $("#imageform").bind('submit',function(e){
            if(window.FormData !== undefined)  // for HTML5 browsers
            {
                var formdata = new FormData(this);

                $.post({
                    url : "insertuser.php",
                    type : "POST",
                    data : formdata,
                    mimeType : "multipart/form-data",
                    contentType : false,
                    cache : false,
                    processData: false,
                    success: function(data, txtstatus, jqXHR)
                    {
                        alert('success');
                    },
                    error: function(data, txtstatus, errorthrown)
                    {
                        alert('error');
                    }

                });
            }
            else
            {
                alert('HTML5 not supporting in your browser');  
            }

        });
    });
}); 
</script>

<style> 
#preview
{
color:#cc0000;
font-size:12px;
background: #066;
}
.imgList 
{
max-height:100px;
margin-left:10px;
border:1px solid #dedede;
padding:4px;    
float:left;
}
.hidden
{
    display: none;  
}
#uploadTrigger
{
    cursor: pointer;
    border: 1px solid #333;
    padding: 10px;
    margin: 5px 5px 5px 5px;
    background: #777;
    color: #fff;
    width:75px; 
    border-radius: 20px;
    font-family:arial;

}
.del-pic
{
    background-image:url(../../Krishna/images2/closebox.png);
    width:30px;
    height:30px;
    display:block;
    position: absolute;
    margin:-10px 0 0 85px;  
}
</style>
</head>
<body>

<div>

<div id='preview' style="">
<?
    while($row = mysql_fetch_array($res))
    {
     echo "<div class='imgList'><div class='del-pic' id='".$row['id']."'></div><img src='".$row['filename']."' width='100px' height='100px' ></div>";   
    }
?>
</div>

<form id="imageform" name="imageform" enctype="multipart/form-data" style="clear:both">
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<div id="uploadTrigger">Add Photo</div>
<input type="file" name="photos[]" id="photoimg" class="hidden" multiple="true" />

<input name="username" type="text" id="username" />

<input type="submit" value="Upload" id="upbutton" />
</div>
</form>


</div>
</body>
</html>

将表单提交到不同的操作页面jquery

0 个答案: