Php 使用AJAX上载文件不起作用
我正试图从中重新创建此指南，但对我无效 我想用AJAX上传一个文件，但我得到一个空的$\u帖子：Php 使用AJAX上载文件不起作用,php,jquery,ajax,Php,Jquery,Ajax,我正试图从中重新创建此指南，但对我无效 我想用AJAX上传一个文件，但我得到一个空的$\u帖子： <form enctype="multipart/form-data"> <input type="file" name="file"> <br> <input type="text" name="as" value="asd"> <!--<button type='butt
<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>
$（文档）.ready（函数（）{
/*$（'.add_more'）。单击（函数（e）{
e、 预防默认值（）；
$（此）。在（“
”）之前；
});*/
$（'：button'）。在（'click'，function（）上
{
$.ajax({
//处理上载的服务器脚本
url:'ajax.php'，
键入：“POST”，
//表单数据
数据：新FormData（$（'form'）[0]），
//告诉jQuery不要处理数据或担心内容类型
//您*必须*包括这些选项！
cache:false，
contentType:false，
processData:false，
//自定义XMLHttpRequest
xhr:function（）{
var myXhr=$.ajaxSettings.xhr（）；
if（myXhr.upload）{
//用于处理上载的进度
myXhr.upload.addEventListener（'progress'，函数（e）{
if（如长度可计算）{
$（'progress'）.attr({
值：e.loaded，
马克斯：e.total，
});
}
}，假）；
}
返回myXhr；
},
});
});
});
对不起，我的英语不好。我希望你能理解我，我正在尽力 您可以使用此方法上载文件
html-
javascript-
var formData=new formData（）；
formData.append（'Photo'，$（'#img2'）[0]。文件[0]）；
$.ajax({
url:'ImgUpload.php'，
数据：formData，
类型：“POST”，
//上传文件时必须执行此操作
contentType:false，
processData:false，
}).done（函数（msg）{检查此项。。
Ajax图像上传
图片上传表格
正如@user2486所说
您应该使用$\u文件，而不是$\u POST–user2486
他是对的。你应该使用$\u文件
而不是$\u帖子
@user2486哦，天哪，我觉得自己太傻了！谢谢m8，你说得对！！
<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>
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>