上传带有AJAX文件的文件
问题描述:
我试图从olanod answer重新创建本指南,但不适用于我。上传带有AJAX文件的文件
我想用AJAX上传文件,但我得到一个空的$ _ POST:
<form enctype="multipart/form-data">
<input type="file" name="file">
<br>
<input type="text" name="as" value="asd">
<!--<button type='button' class="add_more">Add More Files</button>-->
<input type="button" value="Upload" />
</form>
,这是我的脚本(从olanod answer复制粘贴):
<script>
$(document).ready(function(){
/* $('.add_more').click(function(e){
e.preventDefault();
$(this).before("<input name='upfile[]' type='file'/><br>");
});*/
$(':button').on('click', function()
{
$.ajax({
// Your server script to process the upload
url: 'ajax.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
} , false);
}
return myXhr;
},
});
});
});
</script>
正如我说,我想看看我要采取什么,这是我的PHP文件的结果:
array(1){ [“as”] => 串(3) “ASD” }
我返回一个文本字段是肯定的。
P.D:对不起,我的英语。我希望你能理解我,我正在努力!
答
正如@ user2486说,
您应该使用$ _FILES不是$ _ POST - user2486
他是对的。
答
,你可以用这个方法来上传文件
html-
<input type="file" class="btn btn-default" name="img2" id="img2" />
javascript-
var formData = new FormData();
formData.append('Photo', $('#img2')[0].files[0]);
$.ajax({
url: 'ImgUpload.php',
data: formData,
type: "POST",
// THIS MUST BE DONE FOR FILE UPLOADING
contentType: false,
processData: false,
}).done(function(msg) {
答
Check this one..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Image Upload</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/validator.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<span id="msg"></span>
<h2>Image Upload Form</h2>
<form data-toggle="validator" role="form" name="image-form" method="post" enctype="multipart/form-data" id="my-form" action="<?php $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label for="image">Image:</label>
<input type="file" id="image" name="image[]" data-error="Upload Image" multiple required>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function (e) {
$("#my-form").on('submit', (function (e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function (data) {
$("#my-form")[0].reset();
//alert(data);
$("#msg").html(data);
},
});
return false; //IE
}));
});
</script>
你应该使用'$ _FILES'而不是'$ _POST' – C2486
@ user2486噢,我的上帝,我觉得很蠢!感谢m8,你是对的! –