如何使用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>