Question

这是我的代码

                        $.ajax({
                            type: 'post',
                            url: '../lib/upload.php',
                            data: new FormData( $("#niceidentifier") ),
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if(response == 'success') {
                                    return true;
                                }
                                else {
                                    alert(response);
                                    console.log(response);
                                }
                            }
                        });

HTML表单只是基本HTML（包括enctype和方法发布），但遗憾的是没有数据传递。如何上传文件并传输一次输入数据？

Answer 1

在同一个POST请求中将文件和其他数据（如文本）一起传递并不是那么简单。实现这一目标的唯一方法是进行multipart / form-data请求。

http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2

Answer 2

您可以使用 FormData 来传递文件。和processData，contentType设置为false必须。因为你不打算在客户端处理文件。

// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value)
{
        data.append('myFile', value);   //No I18N
});


$.ajax({
    url: '/your-url', 
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',   //No I18N
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    // do something
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
            // Handle errors here
    }
});

或者您可以按如下方式发送包含数据的文件：

$( '#formId' )
  .submit( function( e ) {
 e.preventDefault();
 $.ajax({
    url: '/your-url', 
    type: 'POST',
    data: new FormData( this ),
    cache: false,
    dataType: 'json',   //No I18N
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
    // do something
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
            // Handle errors here
    }
});
});

Answer 3

我使用ajaxForm通过ajax异步上传文件，比试图实现自己的文件容易得多。

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

Answer 4

对于跨浏览器解决方案，我认为最好使用

$("#form_id").ajaxSubmit();

如何使用$ .ajax（）输入字段文本和文件上传？

4 个答案: