使用AJAX无法上传文件
[英]Upload file with AJAX not working
问题描述
i'm trying to recreate this guide from olanod answer but isn't working for me. 
我正在尝试从olanod答案重新创建本指南，但不适用于我。
I want to upload a file using AJAX but i'm getting an empty $_POST: 我想使用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>
and this is my script (copy paste from olanod answer ): 这是我的脚本（从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>
As i said, i'm tring to see what i'm taking and this is the result from my php file: 就像我说的，我很想看看我在做什么，这是我的php文件的结果：
array(1) { ["as"]=> string(3) "asd" }
I returned a text field to be sure. 我返回一个文本字段来确定。
PD: Sorry for my english. PD：对不起，我的英语。 I hope you can understand me, i'm trying my best! 希望您能理解我，我正在努力！
3 个解决方案
解决方案1
0 2017-09-05 11:13:42
you can use this method to upload file 您可以使用此方法上传文件
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 ) {
解决方案2
0 2017-09-05 11:28:50
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>
解决方案3
0 已采纳 2017-09-06 07:33:14
As @user2486 said, 正如@ user2486所说，
You should use $_FILES not $_POST – user2486
He is right. 他是对的。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.