Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Jquery+AJAX上传文件，无刷新上传并重命名文件
Blogger Information
Blog 19
fans 0
comment 1
visits 19500
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Jquery+AJAX上传文件，无刷新上传并重命名文件
TANKING的代码日志
Original
1099 people have browsed it

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Ajax上传图片</title>
  5.     <meta charset="utf-8">
  6.     <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
  7. </head>
  8. <body>
  9.     <h1>Ajax上传图片</h1>
  10.     <!-- 表单 -->
  11.     <form id="form" enctype="multipart/form-data">
  12.         <input type="file" id="fileAttach" name="file"/>
  13.         <input type="button" onclick="upload()" value="上传"/>
  14.     </form>
  16.     <!-- 显示结果 -->
  17.     <h2 id="upload-result"></h2>
  19.     <!-- 显示图片 -->
  20.     <div id="imgdiv"></div>
  22.     <!-- Ajax上传 -->
  23.     <script>
  24.         function upload(){
  25.             var form = new FormData(document.getElementById("form"));
  26.             $.ajax({
  27.                 url:"upload.php",
  28.                 type:"post",
  29.                 data:form,
  30.                 cache: false,
  31.                 processData: false,
  32.                 contentType: false,
  33.                 success:function(data){
  34.                     if (data.res == "400") {
  35.                         $("#upload-result").text("上传成功");
  36.                         $("#imgdiv").html("<img src=\"upload/"+data.path+"\"/>");
  37.                     }else if (data.res == "403") {
  38.                         $("#upload-result").text("格式不对");
  39.                     }else if (data.res == "404") {
  40.                         $("#upload-result").text("上传错误");
  41.                     }
  43.                 },
  44.                 error:function(data){
  45.                     alert("上传失败")
  46.                 }
  47.             })
  48.         }
  49.     </script>
  50. </body>
  51. </html>

upload.php

  1. <?php
  2. header("Content-type:application/json");
  4. //获取原始文件名
  5. $filename = $_FILES["file"]["name"];
  7. //获取文件后缀名
  8. $hzm = substr($filename,strpos($filename,"."));
  10. //设置新文件名
  11. $newfilename = substr(str_shuffle("QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm"),26,10);
  13. // 允许上传的图片后缀
  14. $allowedExts = array("gif", "jpeg", "jpg", "png");
  15. $temp = explode(".", $filename);
  16. $extension = end($temp);
  17. if ((($_FILES["file"]["type"] == "image/gif")
  18. || ($_FILES["file"]["type"] == "image/jpeg")
  19. || ($_FILES["file"]["type"] == "image/jpg")
  20. || ($_FILES["file"]["type"] == "image/pjpeg")
  21. || ($_FILES["file"]["type"] == "image/x-png")
  22. || ($_FILES["file"]["type"] == "image/png"))
  23. && ($_FILES["file"]["size"] < 2048000)   // 小于 2000 kb
  24. && in_array($extension, $allowedExts))
  25. {
  26.     if ($_FILES["file"]["error"] > 0)
  27.     {
  28.         echo "{\"res\":\"404\"}";
  29.     }
  30.     else
  31.     {
  32.     // 此处可以输出文件的详细信息
  33.     if (file_exists("upload/" . $newfilename.$hzm))
  34.         {
  35.             //
  36.         }
  37.         else
  38.         {
  39.             move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename.$hzm);
  40.             echo "{\"path\":\"$newfilename$hzm\",\"res\":\"400\"}";
  41.         }
  42.     }
  43. }
  44. else
  45. {
  46.     echo "{\"res\":\"403\"}";
  47. }
  48. ?>

请在当前目录建立upload文件夹用于存放上传后的图片

GiF Demo

Author

Name:TANKING
Date:2020-04-11
Web:LIKEYUNBA.COM
WeChat:face6009

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
相逢恨晚 2020-04-16 13:39:10
可以的，可以的
1 floor
Author's latest blog post