Jquery+AJAX 새로 고침 없 이 업로드 하고 파일 이름 바 꾸 기 동작 예제[PHP 배경 수신]

이 사례 는 Jquery+AJAX 가 새로 고침 없 이 업로드 하고 파일 이름 을 바 꾸 는 작업 을 수행 하 는 것 을 보 여 줍 니 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
index.html


<!DOCTYPE html>
<html>
<head>
  <title>Ajax    </title>
  <meta charset="utf-8">
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
</head>
<body>
  <h1>Ajax    </h1>
  <!--    -->
  <form id="form" enctype="multipart/form-data">
    <input type="file" id="fileAttach" name="file"/>
    <input type="button" onclick="upload()" value="  "/>
  </form>

  <!--      -->
  <h2 id="upload-result"></h2>

  <!--      -->
  <div id="imgdiv"></div>

  <!-- Ajax   -->
  <script>
    function upload(){
      var form = new FormData(document.getElementById("form"));
      $.ajax({
        url:"upload.php",
        type:"post",
        data:form,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data){
          if (data.res == "400") {
            $("#upload-result").text("    ");
            $("#imgdiv").html("<img src=\"upload/"+data.path+"\"/>");
          }else if (data.res == "403") {
            $("#upload-result").text("    ");
          }else if (data.res == "404") {
            $("#upload-result").text("    ");
          }
          
        },
        error:function(data){
          alert("    ")
        }
      })
    }
  </script>
</body>
</html>

upload.php


<?php
header("Content-type:application/json");
 
//       
$filename = $_FILES["file"]["name"];
 
//       
$hzm = substr($filename,strpos($filename,"."));
 
//      
$newfilename = substr(str_shuffle("QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm"),26,10);
 
//          
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $filename);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2048000)  //    2000 kb
&& in_array($extension, $allowedExts))
{
  if ($_FILES["file"]["error"] > 0)
  {
    echo "{\"res\":\"404\"}";
  }
  else
  {
  //              
  if (file_exists("upload/" . $newfilename.$hzm))
    {
      //
    }
    else
    {
      move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename.$hzm);
      echo "{\"path\":\"$newfilename$hzm\",\"res\":\"400\"}";
    }
  }
}
else
{
  echo "{\"res\":\"403\"}";
}
?>

현재 디 렉 터 리 에 업로드 폴 더 를 만들어 업로드 한 그림 을 저장 하 십시오.
GiF Demo

더 많은 jQuery 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Jquery에서 동일한 NAME 또는 id 행 삭제 작업 가져오기

//Jquery 같은 수를 가져오고 줄 수와 인자를 삭제합니다. //ID'''또는this를 통해 본 줄의 두 번째 tdeq를 획득(1) 0부터 $("#"+id+"").parents("tr").find("td:eq(1...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Jquery+AJAX 새로 고침 없 이 업로드 하고 파일 이름 바 꾸 기 동작 예제[PHP 배경 수신]

좋은 웹페이지 즐겨찾기