通过jquery $.post上传文件

Question

为了发送ajax表单，我使用此代码：

<input type="file" class="file_1" id="file" />

• 注意：不要使用“FORM”标签

我的 jQuery 代码：

var file = $('#file').val();
$.post('form.php', {file:file}, function(data){});

还有我的 PHP 代码：

if($_FILES["file"]["tmp_name"] != '') {
            $fileName = $_FILES["file"]["name"];
            $fileTmpLoc = $_FILES["file"]["tmp_name"];
            $fileType = $_FILES["file"]["type"];
            $fileSize = $_FILES["file"]["size"];
        }
echo $fileName;

但是这个代码不起作用

Answer 1

如果您不想使用表单标签，您可以使用 Base64 对文件进行编码，然后将其作为对象发送，如下所示：

$(document).ready(function(){
  $('input#file').change(function(event){
    //Getting the uploaded file
    let file = event.target.files[0]
    
    //Use FileReader() to read it as a base64 file
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
     let base64File = reader.result;
      let postFile = {name:file.name,type:file.type,size:file.size, content:base64File}
      //Checking postFIle content
      console.log(postFile);
      
      //Sending the data
      $.post('form.php', {file:postFile}, function(data){
        //Your code here
      });
   };
  }); 
});

<input type="file" class="file_1" id="file" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

postFile 应该是这样的：

{
  "name": "colors.txt",
  "type": "text/plain",
  "size": 70,
  "content": 
"data:text/plain;base64,UHJpbWFyeSA6ICMwMGQ4ZTANClByaW1hcnktZGFya2VyIDogIzA5NzA3NA0KUHJpbWFyeS1saWdodGVyIDogIzg5ZTRlNw=="
}

在你的 form.php 中你可以做这样的事情：

if(isset($_POST["file"])) {
            $fileName = $_POST["file"]["name"];
            $fileType = $_POST["file"]["type"];
            $fileSize = $_POST["file"]["size"];
        }
echo $fileName;

希望能帮到你。

Answer 2

我认为你不能。 尽管如此，还是有一些工具可以“模仿”它。 查看本教程： http://hayageek.com/ajax-file-upload-jquery/

或者这个问题： 是否可以使用Ajax进行文件上传？

Answer 3

您正在尝试发布地址名称（换句话说，您发布一个字符串），但文件上传需要是一个文件。 那么你可以从这个链接找到答案：

使用 Ajax 以一种形式上传数据和文件？