Question

我通过jQuery提交表单，除了文件字段外，我的所有表单数据都正常工作。当我没有jQuery使用时，文件字段也正常工作。以下是我的代码，

的jQuery

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#submit_data').click(function(e){
    e.preventDefault();
    var error = false;
    var name = jQuery('#name').val();
    if(name.length == 0){
        var error = true;
        jQuery('#name_error').fadeIn(500);
    }else{
        jQuery('#name_error').fadeOut(500);
    }
    if(error == false){
        $('#submit_data').attr({'disabled' : 'true', 'value' : 'Submitting...' });
        $.post("submit.php?action=add_user", $("#add_user").serialize(),function(result){
            if(result == 'sent'){
                 $('#submit_data').remove();
                $('#submit_success').fadeIn(500);
            }else{
                $('#submit_fail').fadeIn(500);
                $('#submit_data').removeAttr('disabled').attr('value', 'Submit');
            }
        });
    }
});    
});

HTML

<form action="" method="post" enctype="multipart/form-data" id="add_user">
<input type="test" id="name" name="name" />
<input type="file" id="file" name="file" />
<input type='submit' value='Submit' class="button" id='submit_data'>
</form>

在我的PHP代码中，我只想echo $image =$_FILES["file"]["name"];，但它没有传递值，而且该形式的其他字段工作正常。

Answer 1

serialize（）无法发送文件。

我建议使用“ FormData ”上传具有Ajax功能的文件：

if( window.FormData !== undefined ) 
    //make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3 gecko mobile > 2, opera mobile >12 <- wil support XHR too
        {

            var formData = new FormData($('#yourForm')[0]);
            $.ajax({
                url: 'fileUpload.php',  //Server script to process data
                type: 'POST',
                xhr: function() {  // Custom XMLHttpRequest
                    var myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // Check if upload property exists
                        myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
                    }
                    return myXhr;
                },

                beforeSend: function(){

                },
                success: function(response){

                },
                error: function(xhr, ajaxOptions, thrownError){
                    console.log(thrownError);
                },
                // Form data
                data: formData,
                //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false
            });
        }

FormData也支持多文件上传，您可以使用以下方法轻松添加自己的字段：

formData.append("fieldname",value1);

在表格标签中添加属性：

enctype="multipart/form-data"

应该很棒！

注意：您可能会发现服务器端页面上的FILES数组为空 - 在这种情况下您需要进行确保您的服务器配置允许文件上传，文件上传的大小限制足够，发布时间
就够了......

最好的方法是确保允许文件上传，然后进行测试小文件，以确保您的代码中的所有内容都正常。

Answer 2

您无法使用.serialize（）发送文件。相反，您可以使用FormData api来执行此操作。

if(error == false){
    var file =  $("#file")[0].files[0];

    var formData = new FormData($("#add_user"));
    formData.append("name", name);
    formData.append("file", file);
    $('#submit_data').attr({'disabled' : 'true', 'value' : 'Submitting...' });

    $.ajax({
      url: 'submit.php?action=add_user',
      type: 'POST',
      // Form data
      data: formData,
      success: function(data){
        $('#submit_data').remove();
        $('#submit_success').fadeIn(500);
      },
      error: function(){
        $('#submit_fail').fadeIn(500);
        $('#submit_data').removeAttr('disabled').attr('value', 'Submit');     
      },

      //must keep false
      cache: false,
      contentType: false,
      processData: false 
    });
 }

Answer 3

您无法通过ajax提交文件。我会建议这个插件快速完成你想要做的事情

http://malsup.com/jquery/form/

.serialize（）用于上传文件，即filefield

3 个答案: