【问题标题】:Can't send file with ajax to php file无法将带有ajax的文件发送到php文件
【发布时间】:2015-04-24 01:36:09
【问题描述】:

我在接收文件数据时遇到问题。

这是我的 HTML 表单:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Upload</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="General.js"></script>
</head>

<body>
<form method="post" enctype="multipart/form-data" id="Form" action="upload.php">
<table width="350" border="0" cellpadding="1" cellspacing="1" class="box">
<tr> 
<td width="246">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile" type="file" id="userfile"> 
</td>
<td width="80"><input name="submit" type="submit" class="box" id="submit" value=" Upload "></td>
</tr>
</table>
</form>

如您所见,它将我们发送到文件 General.js

$(document).ready(function (e){
$("#Form").on('submit',(function(e){
	e.preventDefault();
	var formData = new FormData(document.getElementById('userfile'));
	// AJAX Code To Submit Form.
	$.ajax({
		type: "POST",
		url: "uploader.php",
		data: formData,
		cache: false,
		contentType: false,
		processData: false,
		success: function(callback){
		alert(callback);
	}
	});

	return false;
})
);
});

以及需要接收这个的php页面:

$fileName = $_FILES['userfile']['name'];
$tmpName  = $_FILES['userfile']['tmp_name'];
$fileSize = $_FILES['userfile']['size'];
$fileType = $_FILES['userfile']['type'];

一切正常,但问题是当我将数据发送到 php 文件时,它没有收到应有的数据。也许我需要使用一些附加的东西? 因为文件名和大小什么的都是空的。

编辑:

$(document).ready(function(){
$("#submit").click(function(){
var formData = new FormData($('form')[0]);
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "uploader.php",
xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
			},
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(callback){
alert(callback);
}
});

return false;
});
});

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

也试过这段代码,但它仍然没有向页面发送正确的信息。我在 uploader.php 页面上出现一个错误,指出文件的名称为空,这意味着我可能没有收到它,或者它根本没有发送。

【问题讨论】:

  • 这是一个重复的问题..看看这个:stackoverflow.com/questions/166221/…
  • 我稍后会检查,谢谢,给您带来的不便,我们深表歉意。
  • 我更新了帖子并进行了编辑,如果可以,请检查。问题是我无法接收到好的数据。我认为它确实发送了数据,但是我如何在 php 中编写代码来接收它,这很糟糕。因此,如果可以,请检查并告诉我出了什么问题。谢谢:-)

标签: javascript php jquery ajax post


【解决方案1】:

改变

    var formData = new FormData(document.getElementById('Form'));

   var fd = new FormData();     
   fd.append("userfile", document.getElementById('userfile').value);

【讨论】:

    【解决方案2】:

    尝试使用这个...

        $(document).ready(function (e) {
        $("#Form").on('submit',(function(e) {
            e.preventDefault();
            $.ajax({
                url: "uploader.php", // Url to which the request is send
                type: "POST",             // Type of request to be send, called as method
                data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                contentType: false,       // The content type used when sending data to the server.
                cache: false,             // To unable request pages to be cached
                processData:false,        // To send DOMDocument or non processed data file it is set to false
                success: function(data)   // A function to be called if request succeeds
                {
                     console.log(data);
                }
            });
        }));
    });
    

    【讨论】:

    • 我更改了代码,请参阅帖子。我现在收到一个错误,也许我有语法问题。未捕获:TypeError: undefined is not a functionGeneral.js:2(匿名函数)jquery.min.js:26 c.extend.readyjquery.min.js:32 M
    • var formData = new FormData(document.getElementById('userfile')); 这应该有表单的 id...var formData = new FormData(document.getElementById('Form'));...或者你也可以通过data: new FormData(this)摆脱这个声明
    • 首先非常感谢您的帮助和您的时间,其次,我尝试了您所说的,但在第 2 行仍然出现错误,未定义不是函数General.js:2 (匿名函数)jquery.min.js:26 c.extend.readyjquery.min.js:32 M.
    • 我已经更新了代码...我一直在使用它...所以它已经过测试并且工作正常...希望...它也适用于你... :)
    • 这一行出现同样的错误: $("#Form").on('submit',(function(e) { 也许是因为我用于 jquery 的源?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-26
    • 1970-01-01
    • 2016-09-04
    • 2014-02-08
    • 2023-03-11
    相关资源
    最近更新 更多