Javascript ajax上传文件格式

我有两个表格，一个用于上传文件，另一个用于填写信息。我需要先上传文件而不刷新页面，然后使用ajax提交表单。以下是代码：

表格文件

这里是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>

---

我不确定我是否得到了正确的答案。我会尽力按照我的理解回答

您需要编写服务器端代码，将图像保存到服务器上。 我相信您能够调用AJAX来启动第1点。 从上载服务点1，您应该返回上载图像的相对路径。 在AJAX调用点2的成功回调中，您应该能够捕获相对路径。 一旦捕获了相对路径，您应该将其添加到DOM或任何元素中。 然后，您可以根据需要启动另一个AJAX调用或回发提交表单。

---

如果这不是问题所在，请具体说明您需要什么并提供更多信息。

我就是这样做的，这对我来说很有用：

   <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>   

---

使用实例而不是表单数据对象。如果要手动构建它，而不是传入，请查看。此外，您的id属性应该是唯一的，但您多次重复该名称。您可以将其写入我的上载代码中吗？我正在使用刷新页面进行上载。。做所有服务器的事情我所需要的就是如何用ajax做这件事ajax代码中缺少了一些东西。我不知道这是什么东西。

   <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>