上传文件和重装一个div,而不是重新加载页面 [英] Upload a file and reloading a div instead reloading a page
问题描述
我的的最后一个问题是有关一个坏重装上传文件后,一个PHP页面。
My last question was related to a bad reloading of a PHP page after uploading a file.
现在我必须重新加载整个页面的只是一个div来代替,而jQuery是不是我最好的朋友。
Now I have to reload just a div instead of the entire page, and JQuery is not my best friend..
我把形式变成股利如下,下面的jQuery函数(我接到的这里):
I put the form into a div as follows, with the following JQuery function (I got the JQuery code from here):
<div id="updiv">
<form id="uploadFile" action="" method="post" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" id="submit" value="Upload" name="submit">
</form>
</div>
<script>
$('#uploadFile').submit(function()
{
event.preventDefault();
$.ajax(
{
url: "upload.php",
type: 'POST',
data: $(this).serialize(),
success: function(data)
{
$("#updiv").fadeOut();
setTimeout(1000);
$("#updiv").fadeIn();
});
});
$(this).ajaxSubmit(options);
return false;
});
</script>
这是 upload.php的文件:
<?php
/* upload.php */
set_time_limit(0);
$targetDir = "/path/to/upload/dir";
$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);
$upload = 1;
$fileType = pathinfo($targetFile, PATHINFO_EXTENSION);
if(isset($_POST["submit"]))
{
/* Check file size */
if($_FILES["fileToUpload"]["size"] > 500000)
{
echo "Sorry, your file is too large.";
$upload = 0;
}
/* Allow certain file formats */
if($fileType != "data" )
{
echo "Sorry, non valid filetype.";
$upload = 0;
}
/* Check if $uploadOk is set to 0 by an error */
if($upload == 0)
{
echo "Sorry, your file was not uploaded.";
}
else
{
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile))
{
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
}
else
{
echo "Sorry, there was an error uploading your file.";
}
}
}
如果我改变窗体的操作属性为:
If I change the form's action attribute as:
<form id="uploadFile" action="upload.php" method="post" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload" required>
<input type="submit" id="submit" value="Upload" name="submit">
</form>
我可以上传文件,但没有被重载我想要的,我认为这是明显的。
I can upload the file but nothing is reloaded as I want, and I think it's obvious..
否则,将code上面张贴,浏览器返回错误:
Otherwise, with the code posted above, the browser returns the error:
501未执行
的请求的方法不能识别
从这里我看,这是一个网络服务器的问题.. 该网站的服务器是的httpd
From here I see that this is a web server problem.. The web server is httpd.
我怎样才能解决我的问题? 谢谢你在前进。
How can I solve my problem ? Thank you in advance.
推荐答案
这是一个工作的例子,你必须使用 FORMDATA
,以便能够通过AJAX发送文件,这将刷新DIV和返回的服务器响应&LT; DIV CLASS =信息&GT;&LT; / DIV&GT;
This is a working example you have to use formData
to be able to send files via ajax, this will reload the div and return the server response in <div class="info"></div>
<form id="uploadFile" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" id="submit" value="Upload" name="submit">
</form>
<!-- Response Output -->
<div class="info" style="display:none"></div>
</div>
<div id="updiv">
<form id="uploadFile" enctype="multipart/form-data">
<h3>Upload a file:</h3>
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" id="submit" value="Upload" name="submit">
</form>
<!-- Response Output -->
<div class="info" style="display:none"></div>
</div>
<script>
$('#uploadFile').submit(function()
{
event.preventDefault();
$("#updiv").fadeOut();
$.ajax(
{
url: "upload.php",
type: 'POST',
data: new FormData(this),
contentType: false,
processData: false,
success: function(data)
{
$('.info').html(data);
$('.info').show();
$("#updiv").fadeIn();
}
});
});
</script>
这篇关于上传文件和重装一个div,而不是重新加载页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!