the*_*fan 2 javascript php ajax post
我试图发送input file和input text通过Ajax.因为我将这个功能添加到我的现有函数中,这个函数有很多其他变量我不能简单地使用Form像这里使用的那样发送整个函数
这是它的基本要点
我的HTML
<input type='text' name='text' id='text'>
<input type='file' name='media' type="file" / id='media'>
<input type="button" value="Upload" name='submit'/>
我的Ajax
$(":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
你可以通过使用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>