Ajax上傳文件格式

Question

我有兩種形式，一種用於上載文件，另一種用於用信息填充表單。 我需要上傳文件而不先刷新頁面，然后使用Ajax提交表單。 這是代碼：

表格文件

<h1>Insert Employee</h1>

        <form id="form">

            <input id="name" placeholder="arabic name.." type="text" name="name_ar"/><br>


            <input id="name" placeholder="english name.." type="text" name="name_en" value=""/><br>


            <input id="name" placeholder="arabic department.." type="text" name="dep_ar" /><br>


            <input id="name" placeholder="english department.." type="text" name="dep_en" /><br>


            <input id="name" placeholder="arabic job.." type="text" name="job_ar"/><br>


            <input id="name" placeholder="english job.." type="text" name="job_en" /><br>


            <input id="name" placeholder="extention#.." type="text" name="ext" /><br>


            <input id="name" placeholder="office#.." type="text" name="office" /><br>


            <input id="name" placeholder="mobile#.." type="text" name="mobile" /><br>

            <input id="email" placeholder="email" type="text" name="email"/><br>

            <br /><br />

            <div class="upload_form">
                <form id='form1'>
                    <input type="file" name="userfile" size="20" />

                    <input type="button" value="upload" id="upload" />
                </form>

                <br/><br/>
            </div>

            <input type="button" value="Click" id="submit"/>
            <input type="reset" value="Reset"/>
        </form>

    </div>

這就是AJAX：我知道如何使用Ajax提交數據，但是我需要有關如何使用Ajax上載文件而不刷新頁面的幫助，然后獲取該文件的名稱，以表格形式再次發送並保存到數據庫。

<script>
            $(document).ready(function(){
                $('#upload').click(function(){


                    console.log('upload was clicked');

                    //ajax POST
                    $.ajax({
                        url:'upload/do_upload',
                        type: 'POST',
                        success: function(msg) {
                            //message from validation php
                            //append it to the contact_form id 
                            $('#uploud_form').empty();
                            $('#uploud_form').append(msg);
                        }
                    });
                    return false;
                });





                $('#submit').click(function(){


                    console.log('submit was clicked');

                    //empty msg value
                    //$('#msg').empty();

                    //Take form values
                    var form_data = {
                        name: $('#name').val(),
                        email: $('#email').val(),
                        message: $('#message').val()    
                    };

                    //ajax POST
                    $.ajax({
                        url:'',
                        type: 'POST',
                        data: form_data,
                        success: function(msg) {
                            //message from validation php
                            //append it to the contact_form id 
                            $('#contact_form').empty();
                            $('#contact_form').append(msg);
                        }
                    });
                    return false;
                });
            });

        </script>

Answer 1

不知道我是否正確。 我會根據我的理解嘗試回答。

1. 您需要編寫服務器端代碼，以將映像保存在服務器上。
2. 我相信您可以撥打AJAX來啟動第1點。
3. 從您的上傳服務（第1點）中，您應該返回已上傳圖片的“相對路徑”。
4. 在成功回調AJAX調用（第2點）時，您應該能夠捕獲相對路徑。
5. 捕獲相對路徑后，應將其添加到DOM或說出任何元素。
6. 然后，您可以根據需要發起另一個AJAX呼叫或發回（提交表單）。

如果這不是問題，請具體說明您的需求並提供更多信息。

Answer 2

我這樣做是這樣，對我來說是有用的:)

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

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