Question

我的模态有一个表单：

<div class="modal fade bs-example-modal-lg" id="myMODALTWO" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="form-content">
            <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myMODALTWOLabel"></h4>
                </div>
                <div class="modal-body">
                    <form role="form" method="POST" action="" id="stuff">
                    <div class="col-md-12"> 
                     <div class="box box-info">
                        <div class="box-header">
                            <h3 class="box-title">Update History</h3> 
                            <input  type="hidden" class="form-control" id="IDu" disabled=""> 
                        </div>
        <!-- /.box-header -->
                        <div class="box-body table-responsive no-padding" id="output">
                            <table class="table table-bordered table-hover" id="updatetable" >
                            </table>
                        </div>
        <!-- /.box-body -->
                     </div>

                     <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">Insert your update here...</h3>
                        </div>

                        <div class="box-body">
                            <!-- <label>Update Content</label> -->

                            <textarea class="form-control" rows="3" placeholder="Enter Update..." id="updatecontent"></textarea>
                            <input class="form-control" type="text" placeholder="Name" id="updateuser">
                            <label><input type="checkbox" class="flat-red" id="closed">To be Closed</label>
                            <div class="form-group">
                                <label for="exampleInputFile">Evidence Upload</label>
                                <input type="file" id="exampleInputFile">
                                <p class="help-block">Please upload evidence here</p>
                             </div>


                        </div>


                    </div>


                    </form> 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="update()" >Update</button>
                </div>
            </div>

        </div>
        </div>

有了这个，我想通过onlick函数（update（））向ajax函数提交一些数据。我的问题是我不确定如何将文件提交到下面的ajax函数。数据功能已正确提交。

function update() 
 {
     setTimeout(function(){$('#myMODALTWO').modal('hide')}, 3)

    var updatecontent = document.getElementById("updatecontent").value;     
    var updateuser = document.getElementById("updateuser").value;
    var IDU = document.getElementById("IDu").value;
    var uploaded = document.getElementById("exampleInputFile");

    alert(uploaded);
    if(document.getElementById('closed').checked) 
    {
        var status="CLOSED";
    } else 
    {
        var status ="OPEN";
    }



    var dataStringro = 'id=' + IDU + '&updatecontent=' + updatecontent + '&updateuser=' + updateuser + '&status=' + status;

// AJAX code to submit form.
$.ajax({
    type: "POST",
    url: "insertupdate.php",        
    data: dataStringro,
    cache: false,


    success: function(html) 
    {      



                $('html').scrollTop(0);

                setTimeout(function(){$('#submitting').modal('hide')}, 3)
                $('#submitting').show();
                $("#submitting").fadeTo(3000, 500).slideUp(500, function()
                {
                    $("#submitting").alert('close'); 
                });

               /*  setTimeout(function(){$('#exampleModal').modal('hide')}, 6)  */                  
                $('#successmodel').delay(3200).fadeIn(500);
                $('#successmodel').delay(3000).fadeOut(500);
                /* $("#successmodel").fadeTo(3000, 500).slideUp(500, function()
                {
                    $("#successmodel").alert('close'); 
                }); 
                 */
                 setTimeout(function(){location.reload();}, 7150); 
                /* setTimeout(function(){$('#exampleModal').modal('hide')}, 3)
                $('#successmodel').show();
                $("#successmodel").fadeTo(3000, 500).slideUp(500, function()
                {
                    $("#successmodel").alert('close'); 
                });
                setTimeout(function(){location.reload();}, 4000); */


    },
   error: function (html) 
   {
                $('html').scrollTop(0);
                setTimeout(function(){$('#submitting').modal('hide')}, 3)
                $('#submitting').show();
                $("#submitting").fadeTo(3000, 500).slideUp(500, function()
                {
                    $("#submitting").alert('close'); 
                });

                $('#verybadmodel').delay(3200).fadeIn(500);
                $('#verybadmodel').delay(3000).fadeOut(500);
    }



    /* var dataTable = $('#example1').dataTable();
    var oSettings = dataTable.fnSettings();
    dataTable.fnClearTable(this);
    for (var i=0; i<json.aaData.length; i++)
    {
        dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    dataTable.fnDraw(); */ 


});

return false;



 }

Answer 1

您可以使用表格序列化功能。

$.ajax({
       type: "POST",
       url: "insertupdate.php",        
       data: $('#stuff').serialize(),
       cache: false,

Answer 2

使用JQuery尝试以下链接。

https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

如何通过onclick（）函数将包含文件的表单数据发送到ajax？

2 个答案: