Javascript Ajax FormData

Question

我有这个代码如何将表单值发送到php文件。

 <form role="form" id="upload_form" method="post" enctype="multipart/form-data">

     <div class="form-group">
     <label for="formlabel">Title</label>
     <input class="form-control" name="title" id="title" placeholder="Enter Software Name" type="text" value="<?php if(isset($title)){echo $title;}?>" required>
     </div>

    <div class="form-group">
    <label>Short Meta Description atleast 155 words</label>
    <textarea class="form-control" name="shortdec" id="shortdec" rows="3" required><?php if(isset($shortdec)){echo $shortdec;}?></textarea>
</div>


    <div class="form-group">
    <label>File input</label>
    <input name="softpost" id="softpost" type="file" required>
</div>


     <input type="button" value="Upload File" onclick="uploadFile()">
      <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
      <h3 id="status"></h3>

在javascript文件中工作文件数据很好，但是我想发送title和shortdec id值也请告诉我该怎么做

var formdata = new FormData();
    formdata.append("softpost", file);

Answer 1

如果我理解你的话，你想发送“正常”的文件。

嗯，这很容易：

formdata = new Formdata();
formdata.append('softpost', file)
formdata.append('name', 'My super file')

就是这样！

马特

Answer 2

您可以使用

执行此操作

<强> Jquery的

$("form#upload_form").submit(function(){
    //Fetch Form Data i.e it will include all the form elements including file and other form inputs
    var formData = new FormData($(this)[0]);
    .........AJAX CALL...........
    return false;
});

<强>的JavaScript

var form = document.getElementById("upload_form");
var formData = new FormData(form);

只需使用new FormData($(this)[0]);获取表单字段并继续正常的AJAX调用。您现在可以在后端php代码上获取标题，文件和说明元素。