Question

我的表格如下图所示：

当我上传所有文件并填写所有说明时，会弹出如下图像的对话框信息：

如果单击OK，我想在addanduploadfile.php中显示信息：
- ＆GT;文件1名称：3.JPG
- ＆GT;文件1描述：这是文件1
- ＆GT;文件2名称：9.JPG
- ＆GT;文件2说明：这是文件2

但是，我只知道如何通过AJAX传递文件描述。我不知道如何通过AJAX传递$_FILES。这是我尝试过的代码（tutorial.php）：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="js/jquery-ui-themes- 1.11.1/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js">   </script>
    <script>
    $(document).ready(function() {
        $("#addform").submit(function(e) {
            e.preventDefault();
            $("#dialogConfirmAddAndUploadFileBox").dialog({
                modal: true,
                resizable: false,
                width: 300,
                height: 150,
                dialogClass:"dialogConfirmAddAndUploadFileDialogBox",
                position: { my: 'top', at: 'top+300' },
                open: function() {
                var message = 'Are you sure want to add record?';
                $(this).html(message);
            },
            buttons: [
                         { 
                            text: "OK", 
                            click: function() 
                            { 
                                var file1desc = $.trim($('#file1description').val());
                                var file2desc = $.trim($('#file2description').val());

                                $.ajax({
                                    type: 'POST',
                                    url: 'addanduploadfile.php',
                                    data: {file1desc: file1desc, file2desc: file2desc},
                                    success: function(msg)
                                    { 
                                        alert(msg);
                                    }
                                });
                            }, 
                            style:"margin-right: 60px;" 
                        },
                        { 
                            text: "Cancel",
                            click: function () 
                            {
                                $(this).dialog("close");  
                            }, 
                            style:"margin-left: 0px;" 
                        },
              ]
        });
    });
});
</script>
<style>
.ui-dialog{
    font-size: 13px;
}

.ui-dialog-content{
    margin-top: 20px;
    text-align: center;
}

.ui-dialog .ui-dialog-buttonpane {
    border-width: 0;
} 

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none;
}

.ui-dialog-buttonset{
    font-size: 12px;
}

.dialogBox.ui-dialog .ui-dialog-titlebar{
    font-size: 12px;
    color: white;
    background: #FF0000;
    margin-top: 1px;
}

.dialogConfirmAddAndUploadFileDialogBox.ui-dialog .ui-dialog-titlebar{
    font-size: 12px;
    color: white;
    background: green;
    margin-top: 1px;
}

.dialogConfirmAddAndUploadFileDialogBox .ui-dialog-titlebar{
    font-size: 12px;
    color: white;
    background: red;
    margin-top: 1px;
 }

.dialogBox.ui-dialog .ui-dialog-buttonpane { 
    padding-left: 123px;
}

.dialogConfirmAddAndUploadFileDialogBox.ui-dialog .ui-dialog-buttonpane { 
    padding-left: 70px;
}
</style>
</head>

<body>
    <form id="addform" action="add.php" method="post" enctype="multipart/form-data">
    File 1 <input type="file" name="file1" /><br />
    File 1 Description <input type="text" id="file1description" name="file1description" maxlength="100" /><br />
    File 2 <input type="file" name="file2" id="file2" /><br />
    File 2 Description <input type="text" id="file2description" name="file2description" maxlength="100" /><br />
    <input type="submit" name="add" value="ADD">
    <div id="dialogConfirmAddAndUploadFileBox" title="Confirm"></div>
</form>
</body>
</html>

有人可以帮助我吗？

Answer 1

FormData - （如果使用此对象，则可以通过ajax传递文件）

Javascript

＆＃13;

$('#go').click(function(){ // go is your dom object id 
  var formObject = new FormData($('form')[0]);    
  $.ajax({
    url: '', //URL 
    data: formObject,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
      alert(data);
    },
    error: function(err){
      alert(err);
    }
  });
});

＆＃13;

通过AJAX传递文件信息值

1 个答案: