Question

我正在尝试通过jQuery上传多个文件。但是，表单不会序列化。

当我序列化表单时，我遇到的问题并没有得到任何结果。它根本没有显示任何内容。

我的输入类型文件的名称类似于upload_files[]。

但是，这是实际代码，但已修改。我试图让它提醒序列化的表格。因此，我在网上发布的代码只是我的确切代码，但经过修改以提醒序列化表单。现在它什么也没有提醒。

我真的很傻到问题是什么。我搜索了互联网，发现了很多这方面的教程。但是，所有这些都坚持认为您只需要为输入元素提供name属性。我遇到的问题是没有从表单序列化中获得任何结果。

代码：

<form id="uploading_files"  name="uploading_files" action="/upload_files.php" method="post" enctype="multipart/form-data">
  <a style="position:absolute;top:5px;left:90px;">Upload files:</a>
  <div id="upload_files" style="position:absolute;top:25px;width:319px;height:180px;overflow:auto;">
  <input name="userfile" type="file" style="position:relative;left:50px;top:30px;margin:10px;">
</div>
  <input id="submit_files" name="submit_files" type="submit" value="Send" style="position:absolute;bottom:4px;left:120px;">
</form>

这是jQuery的东西：

$('#uploading_files').submit(function(e) 
{
    e.preventDefault();
  formData = $('#uploading_files').serialize();
   stuffman = $('[name="userfile"]').val();
  alert(formData);
});

Answer 1

jQuery .serialize()不支持input类型的file元素。

这也在jquery documentation

上注明

复选框和单选按钮的值（类型＆＃34的输入; radio＆＃34;或＆＃34;复选框＆＃34;）仅在选中时才包括在内。来自文件的数据选择元素未序列化。

Answer 2

文件未随表格一起发送。您需要编写一些自定义代码来建立该功能。使用jQuery Form Plugin。它非常易于使用，为您节省了序列化表单的麻烦。您可以将其用作：

var options = {
    // Here you can write all the ajax options.
}

$('#uploading_files').ajaxForm(options);

Answer 3

php upload_files.php

foreach($_FILES['file'] as $attr=>$file):
    $x=0;
        foreach($file as $items):
            $files[$x][$attr]= $items;  
            $x++;
        endforeach;
endforeach;


foreach($files as $file=>$key):
        echo basename($key['name']);
        move_uploaded_file($key["tmp_name"], 'pathname here!!!!!!!!!....   /'.$key['name']);
endforeach;

form.php的

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<form id="uploading_files"  name="uploading_files" action="upload_files.php" method="post" enctype="multipart/form-data">
  <a>Upload files:</a>
  <div id="upload_files" >
  <input name="file[]" id="file" type="file" multiple="true" >
  </div>
  <input id="submit_files" name="submit_files" type="submit" value="Send">
</form>


<div id="response"></div>

<?php// $current_dir_url = $_SERVER['SERVER_NAME'] . dirname($_SERVER['PHP_SELF']); echo $current_dir_url; ?>
<script>


jQuery('#uploading_files').submit(function(e) {
            e.preventDefault();

            var data = new FormData(this);

            jQuery.ajax({
                url: 'upload_files.php', // check this is correct path
                type: 'POST',
                data: data,
                cache: false,
                contentType: false,
                processData: false,

                success: function(data){
                    console.log(data);
                    $('#response').html(data);
                }
            }); 

        });

</script>

github链接

https://github.com/ambrosedheffernan/simple-ajax-file-upload

Answer 4

我看到了代码并尝试过。它对我不起作用。我厌倦了，并记得我在2006年有一个旧剧本，我使用了iframe。我现在开始工作了。我通常想要使用老版浏览器可以支持的方法。

jQuery上传多个文件

4 个答案: