如何通过此代码传递文件/图像

时间:2017-02-10 06:56:23

标签: php jquery ajax

我正在尝试将图像和标题字段值传递给PHP,我通常使用$ _FILES数组直接使用PHP处理文件上传,我不知道如何使用ajax创建/传递此数组到PHP。我的表格:

<script>
            $(document).ready(function() {
                $('form').submit(function(event) { //Trigger on form submit
                    $('#name + .throw_error').empty(); //Clear the messages first
                    $('#success').empty();

                    var guestbookSendMessage = { //Fetch form data
                        'name'  : $('input[name=name]').val(), //Store name fields value
                        'msg': $('textarea[name=msg]').val()

                    };

                    $.ajax({ //Process the form using $.ajax()
                        type        : 'POST', //Method type
                        url         : 'php/process.php', //Your form processing file url
                        data        : guestbookSendMessage, //Forms name
                        dataType    : 'json',
                        success     : function(data) {

                        if (!data.success) { //If fails
                            if (data.errors.name) { //Returned if any error from process.php
                                $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error
                            }
                        } else {
                                $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message
                            }
                        }
                    });
                    event.preventDefault(); //Prevent the default submit
                });
            });
        </script>   

2 个答案:

答案 0 :(得分:0)

试试这个:

Jquery的:

$(document).ready(function(){
    $('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });
});

腓:

<?php
    if ( $_FILES['file']['error'] > 0 ){
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']))
        {
            echo "File Uploaded Successfully";
        }
    }

?>

答案 1 :(得分:0)

使用此jquery代码更改您的代码并尝试

   var guestbooksendmessage = new FormData(); 
   guestbooksendmessage.append('file', input.files[0]);
   guestbooksendmessage.append('name', $('input[name=name]').val()); 
   guestbooksendmessage.append('msg', $('textarea[name=msg]').val()); 
   $.ajax({

            type: "POST",
                    url: 'php/process.php',
                    dataType: "json",
                    data: guestbooksendmessage,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                          alert(data)
                    }
                });

试试这段代码