如何使用jQuery异步上传文件

如何使用jQuery异步上传文件

将文件从本地机器上传到服务器上被称为文件上传。它的工作原理与定义完全相同,当我们从浏览器中选择文件并点击提交按钮时,浏览器从本地机器中获取文件并将其提交给服务器,而服务器则完成其工作,将文件保存到定义的路径中。这里使用ajax和jQuery来异步上传一个文件。

使用的方法:

  • FormData()。它创建一个新的FormData对象。
  • FormData.append()。它将一个新的值追加到FormData对象内的一个现有的键上,如果该键不存在,则添加该键。
  • move_uploaded_file()。它将一个上传的文件移动到一个新的位置。

运行程序的步骤:

  • 在xampp/htdocs目录下创建一个上传文件夹。
  • 按照要求复制和编辑html/jQuery代码。
  • 创建一个文件upload.php并复制下面给出的php代码。
  • 启动Apache服务器,用浏览器打开html文件。
  • 选择任何文本或图像文件并点击上传按钮。
  • 该文件将被上传到xamp/htdocs的 “upload “文件夹。
  • 如果该文件是一个图像,它也将被显示出来,如果不是一个图像文件,那么将显示 “上传的文件没有图像 “的信息。

示例:

<?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;
   }
}
?>
<!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异步上传文件?

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程