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>