如何使用fileData对象提取上传的文件(pdf文件,并通过ajax将其发送到php页面?

问题描述 投票:-1回答:1

我为使用javascript中的FormData()对象进行了很多尝试。不知何故,它根本不适合我。我的代码如下:

HTML面:

<form method='POST' action='script_addRelatedFile.php' enctype='multipart/form-data' id="my-form"  class="ajax-submit" >    
<input name="order_addfile[]" type="file"  id='order_addfile'  />
<input type='submit' name='submit' id='submit' class="button button-big button-raised button-fill color-green  form-to-data-uploadFile" value='Upload File'/>

Javascript附带代码:

var fileInput = document.getElementById("order_addfile");
 var postData = new FormData();
  if (fileInput.files.length > 0) {
      console.log(fileInput.files[0]);
      file = fileInput.files[0];
      //console.log(file.name);
      postData.append('files', file);
      console.log(postData);
  } 

    //alert(test);
  $.ajax({
       type: "POST",
       url: "script_addRelatedFile.php",
       //async: true,
       processData: false,
//contentType: false,
       data: postData,  //send: JSON.stringify(test), 
       success: function(data){
        //  console.log(data);
         //if(data) {
              //location.reload();
          //}
          alert(data);
          alert("Thanks for adding your file.");

       },
       error: function() {
         console.log('ajax loading error...');
         alert("error");
         //return false;
       }
    });

[谁能告诉我我做错了什么吗,我的文件没有上传/没有数据附加到formData上?其次,任何人都可以告诉我在formData内哪里可以找到上载的值,因为我找不到任何值。?

我的浏览器是Firefox 73.0.1版

我的控制台输出:enter image description here

javascript jquery multipartform-data form-data
1个回答
0
投票

您可以试试吗?>

<input type="file" type='file' id='file' name="file" class="image-upload" accept='image/*'/>


const uploadImg = () => {
let flag = 0;
let file = null;
const formData = new FormData();
if ($('.image-upload').val() != '') {
    file = $('#file')[0].files[0];
    flag = 1;
    formData.append('image', file);
    formData.append('flag', flag);
    $.ajax({
        type: 'POST',
        url: 'postStatus',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            console.log(res);
        },
    });
}

};

© www.soinside.com 2019 - 2024. All rights reserved.