如何使用jQuery异步上传文件
将文件从本地机器上传到服务器上被称为文件上传。它的工作原理与定义完全相同,当我们从浏览器中选择文件并点击提交按钮时,浏览器从本地机器中获取文件并将其提交给服务器,而服务器则完成其工作,将文件保存到定义的路径中。这里使用ajax和jQuery来异步上传一个文件。
使用的方法:
- FormData()。它创建一个新的FormData对象。
- FormData.append()。它将一个新的值追加到FormData对象内的一个现有的键上,如果该键不存在,则添加该键。
- move_uploaded_file()。它将一个上传的文件移动到一个新的位置。
运行程序的步骤:
- 在xampp/htdocs目录下创建一个上传文件夹。
- 按照要求复制和编辑html/jQuery代码。
- 创建一个文件upload.php并复制下面给出的php代码。
- 启动Apache服务器,用浏览器打开html文件。
- 选择任何文本或图像文件并点击上传按钮。
- 该文件将被上传到xamp/htdocs的 “upload “文件夹。
- 如果该文件是一个图像,它也将被显示出来,如果不是一个图像文件,那么将显示 “上传的文件没有图像 “的信息。
示例:
- upload.php
<?php
/* Getting file name */
filename =_FILES['file']['name'];
/* Location */
location = "upload/".filename;
uploadOk = 1;
if(uploadOk == 0){
echo 0;
}else{
/* Upload file */
if(move_uploaded_file(_FILES['file']['tmp_name'],location)){
echo $location;
}else{
echo 0;
}
}
?>
- HTML File:
<!DOCTYPE html>
<html>
<head>
<title>
Async file upload with jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div align="center">
<form method="post" action="" enctype="multipart/form-data"
id="myform">
<div >
<input type="file" id="file" name="file" />
<input type="button" class="button" value="Upload"
id="but_upload">
</div>
</form>
</div>
<script type="text/javascript">
(document).ready(function() {
("#but_upload").click(function() {
var fd = new FormData();
var files = ('#file')[0].files[0];
fd.append('file', files);
.ajax({
url: 'upload.php',
type: 'post',
data: fd,
contentType: false,
processData: false,
success: function(response){
if(response != 0){
alert('file uploaded');
}
else{
alert('file not uploaded');
}
},
});
});
});
</script>
</body>
</html>
输出:
jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。