Ajax - 通过 ajax 将输入文件和附加变量发送到 php 文件
Posted
技术标签:
【中文标题】Ajax - 通过 ajax 将输入文件和附加变量发送到 php 文件【英文标题】：Ajax - Sending input file and additional variable to php file through ajax 【发布时间】：2017-06-16 09:24:23 【问题描述】：我正在尝试通过 ajax 发送 input file 和 input text。因为我将把这个功能添加到我现有的有很多其他变量的函数中，所以我不能像这里使用的那样简单地使用发送整个Form
Uploading both data and files in one form using Ajax?
这是它的基本要点
我的 html
<input type='text' name='text' id='text'>
<input type='file' name='media' type="file" / id='media'>
<input type="button" value="Upload" name='submit'/>
我的阿贾克斯
$(":button").click(function()
var myFormData = new FormData();
var media = document.getElementById('media');
var variable = 'foo';
myFormData.append('pictureFile', media.files[0]);
var text = $("#text").val();
$.ajax(
type: 'POST',
url: 'upload.php',
data:
pictureFile: myFormData,
text: text,
var: variable,
,
cache: false,
success: function (data)
alert(data);
,
processData: false,
contentType: false,
);
);
PHP
include_once ("connection.php");
if ($_SERVER['REQUEST_METHOD'] == 'POST')
$temp_name = $_FILES['pictureFile']['name'];
$pic_type = $_FILES['pictureFile']['type'];
$pic_temp = $_FILES['pictureFile']['tmp_name'];
$pic_path = "images/";
move_uploaded_file($pic_temp,'images/'.$temp_name);
因此，如我的代码所示，我需要一种方法将这些 var media、var text 和 var variable 从 data:, 发送到 upload.php
【问题讨论】：
【参考方案1】：您可以通过使用 append
来实现<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Ajax File Upload</title>
</head>
<body>
<input type='text' name='text' id='text'>
<input type="file" name="media" id="media">
<div class="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function()
$('#media').change(function(e)
var file = this.files[0];
var form = new FormData();
form.append('media', file);
form.append('text', $('#text').val());
$.ajax(
url : "upload.php",
type: "POST",
cache: false,
contentType: false,
processData: false,
data : form,
success: function(response)
$('.result').html(response.html)
);
);
);
</script>
</body>
</html>
【讨论】：
谢谢，这可以用两个以上的变量来完成，对吧？编辑： nvm 刚刚尝试过。再次感谢 很高兴我能帮上忙。干杯:) 如何修改“多个”属性的输入？【参考方案2】：根据您的文件更改ID，下面是通过jquery/ajax发送输入类型文件和文本数据的示例。重要的是var data=new FormData($("#myForm")[0]); 此代码会将数据发送到您的目标文件，如下例所示为sendDetails.php。您可以根据需要更改目标文件名。希望对你有帮助:)
$(document).ready(function()
$("#submit").click(function()
var form=$("#myForm");
var data=new FormData($("#myForm")[0]);
$.ajax(
url:form.attr("action"),
type:"POST",
data:data,
processData: false,
contentType: false,
success:function(d)
alert(d);
);
);
$("#myForm").submit(function() return false;);
$("#show").click(function()
$("#showDetails").load("showDetails.php");
);
)<body>
<div>
<form id="myForm" method='post' action='sendDetails.php' enctype='multipart/form-data'>
Name: <input type="text" placeholder="Please Enter Your Name:" name="studentName" id="name"><br>
CNIC: <input type="text" placeholder="Please Enter Your CNIC:" name="studentCNIC" id="CNIC"><br>
Gmail:<input type="text" placeholder="Please Enter Your Gmail:" name="studentGmail" id="Gmail"><br>
Image:<input type="file" name="studentimage" id="image"><br>
<Button id="submit" name="submit">Save</Button>
</form>
</div>
<div id="showDetails">
</div>
<div>
<Button id="show">Show_Details</Button>
</div>
</body>url:form.attr("action"), 类型：“POST”， 数据：数据， 处理数据：假， 内容类型：假， 成功：函数（d） 警报（d）；
);
);
$("#myForm").submit(function() return false;);
$("#show").click(function()
$("#showDetails").load("showDetails.php");
);
)
【讨论】：
以上是关于Ajax - 通过 ajax 将输入文件和附加变量发送到 php 文件的主要内容，如果未能解决你的问题，请参考以下文章