Php 如何使用jquery序列化进行文件上载

所以我有一个表单，我使用jquery序列化函数通过ajax提交表单

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

---

但是，如果表单有一个

字段，该怎么办？我如何使用这种ajax序列化方法将文件传递到表单中…打印$\u文件不会输出任何内容无法使用ajax上载文件，因为您无法访问存储在客户端计算机上的文件内容，并使用javascript在请求中发送它。实现这一点的技术之一是使用隐藏的iframe。有一个很好的工具，它可以让你的表单和它相互协调。因此，使用此插件，您的代码将如下所示：

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

---

插件自动订阅表单的

submit

事件，取消默认提交，序列化值，使用正确的方法处理文件上载字段，

您可以使用FormData方法通过AJAX上载文件。尽管IE7、8和9不支持FormData功能

$.ajax({
    url: "ajax.php", 
    type: "POST",             
    data: new FormData('form'),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

---

使用

FormData

对象。它适用于任何类型的表单

$(document).on("submit", "form", function(event)
{
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {
            

        }
    });        

});

---

HTML5引入了

FormData

类，可用于通过ajax上传文件

FormData支持从以下桌面浏览器版本开始。IE 10+、Firefox 4.0+、Chrome 7+、Safari 5+、Opera 12+

这对我有用！只需将processData和contentType设置为False。

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
    <input id="name" name="name" placeholder="Enter Name" type="text" value="">
    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
    <select name="gender" id="gender">
        <option value="male" selected="selected">Male</option>
        <option value="female">Female</option>
    </select>
    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>

男性
女性

JavaScript

var data = new FormData();

//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
    data.append(input.name, input.value);
});

//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
    data.append("my_images[]", file_data[i]);
}

//Custom data
data.append('key', 'value');

$.ajax({
    url: "URL",
    method: "post",
    processData: false,
    contentType: false,
    data: data,
    success: function (data) {
        //success
    },
    error: function (e) {
        //error
    }
});

var data=new FormData（）；
//表单数据
var form_data=$（'#my_form'）。serializeArray（）；
$。每个（表格、数据、函数（键、输入）{
data.append（input.name，input.value）；
});
//文件数据
var file_data=$（'input[name=“my_images”]”）[0]。文件；
对于（var i=0；i

PHP

<?php
    echo '<pre>';
    print_r($_POST);
    print_r($_FILES);
    echo '</pre>';
    die();
?>

$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
    type: "POST",
    data: formData,
    dataType: "json",
    url: form.attr('action'),
    processData: false,
    contentType: false,
    success: function(data) {
         alert('Sucess! Form data posted with file type of input also!');
    }
)};});

---

hmmmm我认为有很多有效的方法可以使它特别适合那些想要针对所有浏览器的人，而不仅仅是FormData支持的浏览器

在页面上隐藏IFRAME，并从内部提交IFRAME示例的想法

function getFrameByName(name) {
    for (var i = 0; i < frames.length; i++)
        if (frames[i].name == name)
            return frames[i];

    return null;
}

function uploadDone(name) {
    var frame = getFrameByName(name);
    if (frame) {
        ret = frame.document.getElementsByTagName("body")[0].innerHTML;

        if (ret.length) {
            var json = JSON.parse(ret);
         // do what ever you want 
        }
    }
}

最重要的是从隐藏的iframeID或name 和enctype多部分/表单数据，以允许接受照片

javascript端

<?php
  $target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);

  if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
    $result = ....
  }

echo json_encode($result);
?>

函数getFrameByName（名称）{ 对于（变量i=0；i 服务器端示例PHP

<?php
    echo '<pre>';
    print_r($_POST);
    print_r($_FILES);
    echo '</pre>';
    die();
?>

$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
    type: "POST",
    data: formData,
    dataType: "json",
    url: form.attr('action'),
    processData: false,
    contentType: false,
    success: function(data) {
         alert('Sucess! Form data posted with file type of input also!');
    }
)};});

通过使用

newformdata（）

并在ajax调用中设置

processData:false、contentType:false

，使用文件输入提交表单对我有效

---

使用上述代码，我还可以通过Ajax提交带有文件字段的表单数据

这不再是事实。通过使用和FormData（）对象，可以非常简单地使用AJAX保存文件。请参阅下面Silver89的答案。@Rook777，如果您使用的浏览器支持HTML5文件API，则这当然是正确的。你在IE中试过这个有多简单吗？在HTML5成为标准并被所有浏览器支持之前，将会有插件，因为你不能使用AJAX上传文件。你是对的。我很幸运，在一个不支持IE的开发环境中，所以我忘记考虑它了。是的，如果没有HTML5兼容性，此功能将无法工作。据了解，目前只有IE10+支持这一功能。jQuery表单插件很棒！新FormData（“form”）中的“form”是什么，它是id吗，它不适用于我是的，这通常是表格id对我来说，它只适用于document.forms.form，而不适用于“form”字符串，传递给FormData构造函数如何发送提交按钮名称？@MuhammadTarique您只需添加类似于

submit

的按钮，就可以在php端获得响应按钮。\u name=“Contact button”谢谢您的回复，但我认为它不会以这种方式工作。然而，我已经通过使用

formData.append（“btnName”，“true”）

@MuhammadTarique这个例子已经添加到这篇文章中，比如

data.append（'key'，'value'）

关于这一点的重要注意事项：

processData:false，contentType:false，

需要避免

非法调用

错误，因为如果没有这些错误，jQuery将在发送formdata时尝试将其转换为字符串，这在本例中是不需要的。