메뉴 건너뛰기

프로그래밍


JQuery를 이용하여 이미지 파일을 업로드 하는 간단한 코드입니다.


This is the way how to upload image file on PHP server by using JQuery.


HTML 내용


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>	
<body>
<script type="text/javascript">	
$(document).ready(function() {
	
	$("#myform").submit( function(e){
		e.preventDefault();
	 		
		var datas, xhr;
	
	    datas = new FormData();
	    datas.append( 'service_image', $( '#service_image' )[0].files[0] );
	
	    $.ajax({
	        url: someurl, // url where upload the image
	        contentType: 'multipart/form-data', 
	        type: 'POST',
	        data: datas,   
	        dataType: 'json',     
	        mimeType: 'multipart/form-data',
	        success: function (data) {	        	 
	        	 alert( data.url );                
	        },
	        error : function (jqXHR, textStatus, errorThrown) {
	        	alert('ERRORS: ' + textStatus);
	        },
	        cache: false,
	        contentType: false,
	        processData: false
	    });         
	});
	
});

</script>

<form id="myform" name="myform" method="post" enctype="multipart/form-data">
    <input  id="service_image" name="service_image" type="file" />
    <input type=submit value="submit" />
</form>
</body>
</html>


PHP 내용

<?php

$path = "./uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
$data	= array(); 
$data['success'] = false;

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
	$name = $_FILES['service_image']['name'];
	$size = $_FILES['service_image']['size'];
	
	
	if(strlen($name))
	{		
		list($txt, $ext) = explode(".", $name);
		if(in_array($ext,$valid_formats))
		{
			if($size < ( 1024*1024 )) // Image size max 1 MB
			{
				$actual_image_name = time()."-image.".$ext;
				$tmp = $_FILES['service_image']['tmp_name'];
				if(move_uploaded_file($tmp, $path.$actual_image_name))
				{		
					$data['success'] = true;
					$data['url']  = "http://yoururl/uploads/".$actual_image_name;	
				}
				else
				{
					$data['success'] = false;
					$data['error'] = "error";
				}
					
			}
			else
				$data['error'] = "Image file size max 1 MB";
		}
		else
			$data['error'] = "Invalid file format..";
	}
	else
		$data['error'] = "Please select image..!";
}

echo json_encode($data);

?>

Good Luck !




번호 제목 글쓴이 날짜 조회 수
공지 [TIP] PYTHON 에서 "UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 6987: illegal multibyte sequence" 오류 날때... [14] 파이팅건맨 2016.02.20 37686
» [TIP] JQuery와 PHP로 이미지 파일을 업로드 하는 간단한 소스 (How to upload image file on PHP server by using JQuery) 파이팅건맨 2015.04.03 6584
공지 [TIP] php로 기상청에서 제공하는 기상정보 API 호출하기 파이팅건맨 2017.01.17 3856
81 PE 화일의 헤더구조를 보여주는 소스 입니다. 파이팅건맨 2003.09.04 326
80 VB에서 프로세스 실행시 우선순위 주기 파이팅건맨 2003.08.22 343
79 데브피아에 글을 올린 김태완입니다. [1] 김태완 2003.08.21 327
78 필요한 모든 파일 합쳐서 하나의 .exe 파일 만들기 파이팅건맨 2003.08.27 1122
77 [MFC]GIF Animation Control 파이팅건맨 2003.08.05 1249
76 [GCC] C에서 밀리세컨드 구하는 법 (2) 파이팅건맨 2003.07.29 579
75 인터넷 익스플로러 툴바(툴밴드) 관련 소스링크 파이팅건맨 2003.07.23 331
74 scanf, printf와 같이 다수의 파라메터 처리 방법(MSDN) 파이팅건맨 2003.08.20 284
73 PHP,ASP,PERL에서 파일사이즈 알아내는 방법(For GunClient...) 파이팅건맨 2003.05.30 328
72 CRC 체크 C 소스 입니다. 파이팅건맨 2003.03.24 1007
71 HTTP프로토콜을 이용한 파일 업로드 파이팅건맨 2002.12.24 968
70 [Tip] CTRL-ALT-DEL키 막는법(NT,2000,XP,98) 파이팅건맨 2002.07.11 439
69 [Tip]Default 스크린세이버 가동 방법 파이팅건맨 2002.07.11 309
68 TCHAR, UNICODE, 그리고 윈도우 NT 파이팅건맨 2002.02.26 443
67 [C]밀리초를 구현하는 방법 파이팅건맨 2001.08.07 678
66 [TIP]외부 프로그램 실행방법 파이팅건맨 2001.03.15 419
65 [TIP]Convex Hull 알고리즘 파이팅건맨 2000.10.10 358
64 [소켓 2]송신시 바이트 단위로 보내기 파이팅건맨 2000.09.18 617
63 Lex와 Yacc의 사용법 강좌 파이팅건맨 2000.10.09 619
62 비주얼 C++과 MASM 사용하기 파이팅건맨 2000.09.07 565
위로