Question

我需要通过jquery将文件上传到当前页面，然后上传文件，然后插入文件上传，但代码不起作用... jquery无法将文件上传到表单：

 <form class="form-inline" role="form" id="form" enctype="multipart/form-data">
 <td colspan="3"><input type="file" name="pic_map" id="pic_map"></td>
 </form>

这是javascript：

 $('#save').click(function (e) {
    $.post(
            "index.php?page=form1_sub1&pguid=<?php echo $pguid;?>",
            $("#form").serialize()
        )
        .done(function (data) {
            console.log(data);
            window.open('index.php?page=form1_sub2&pguid=<?php echo $pguid;?>', '_self');
        })
        .fail(function () {
            alert('<?php echo _CONNECTION_ERROR; ?>');
        });
});

这是php代码：

 $files = $_FILES['pic_map']['name'];
if(!$db->upload($_FILES['pic_map'], 'uploads/maps/'.$files)) {
    exit('file error');
}

Answer 1

使用XHR2，支持通过AJAX上传文件。例如。通过FormData对象，但不幸的是，所有/旧浏览器都不支持它。

FormData支持：

IE 10 +
Firefox 4.0 +
Chrome 7 +
Safari 5 +
Opera 12 +

FormData示例：

<强>标记：

<form class="form-inline" role="form" id="form" enctype="multipart/form-data"  onsubmit="return submitForm();">
 <td colspan="3"><input type="file" name="pic_map" id="pic_map"></td>
 <td colspan="3"><input type="submit" name="save" id="save"></td>
 </form>

<强>脚本：

function submitForm() {
        console.log("submit event");
        var fd = new FormData(document.getElementById("pic_map"));
        $.ajax({
          url: "upload.php",
          type: "POST",
          data: fd,
          enctype: 'multipart/form-data',
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    }

注意：无法使用 $（＆＃34;＃form＆＃34;）发送文件.serialize（）

Jquery，Ajax发布文件上传

1 个答案: