jQuery+PHP 이미지 업로드 및 제출 기능 구현

사진 업로드 방향:ajax 를 통 해 사진 업 로드 를 실현 한 다음 에 PHP 가 되 돌아 오 는 그림 주 소 를 숨겨 진 필드 에 추가 하고 마지막 으로 폼 을 통 해 배경 PHP 에 제출 합 니 다.코드 는 다음 과 같 습 니 다.
HTML 코드 zimg.html 파일:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>       </title>
</head>
<body>
 <form action="a.php?action=2" method="post">
 <span>
      
 </span> 
 
 <span>
  <input type="file" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/>
  <a onclick="UpLoadImg()">  </a>
  <input type="hidden" id="url_data" name="url_data"/>
 </span>

 <br>
 <span>
  <input type="submit" value="  ">
 </span>
 </form>
 
</body>
<!--   jq -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<script>
 function UpLoadImg(){
 //      
 var formData = new FormData();
 formData.append('img_url', $('#img_url')[0].files[0]);
 console.log(formData)
 //      
 $.ajax({
  url: 'a.php?action=1',
  type: 'POST',
  cache: false,
  data: formData,
  dataType: "JSON",
  processData: false,
  contentType: false
 }).done(function(res) {
  console.log(res.url);
  if(res.status == 1){
  //     
  $('#url_data').val(res.url);
  alert(res.msg)
  }else{
  alert(res.msg)
  }
 }).fail(function(res) {

 });
 }
</script>

</html>
배경 PHP 코드 a.php:

<?php
if($_GET['action'] == 1){//      
 $img = $_FILES['img_url'];
 //       
 $type = strstr($img['name'], '.');
 $rand = rand(1000, 9999);
 //      
 $pics = date("YmdHis") . $rand . $type; 
 //    
 $pic_path = "img/". $pics;
 //       ,    
 $res = move_uploaded_file($img['tmp_name'], $pic_path);
 if($res){
 echo json_encode(['status' => 1, 'msg' => '    ','url' => $pic_path]);exit;
 }else{
 echo json_encode(['status' => 0, 'msg' => '    ']);exit;
 }
}elseif($_GET['action'] == 2){//      
 echo '<pre>';
 var_dump($_POST);
}
마지막 실현 효 과 는 다음 과 같다.

ps:js 코드 는 jQuery 를 사용 하 는 쓰기 입 니 다.jQuery 코드 라 이브 러 리 파일 을 도입 해 야 합 니 다.
jQuery 에 PHP 를 추가 하여 이미지 업 로드 를 실현 하고 상세 한 설명 을 실현 하 는 글 을 제출 하 는 것 에 대해 소개 합 니 다.더 많은 jQuery 에 PHP 를 추가 하여 이미지 업 로드 를 실현 하고 내용 을 제출 하 는 것 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 를 많이 사랑 해 주세요!

좋은 웹페이지 즐겨찾기