메뉴 건너뛰기

프로그래밍


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" 오류 날때... [48] 파이팅건맨 2016.02.20 108620
공지 [TIP] R에서 페이스북 페이지 정보 크롤링 하기 [6] 파이팅건맨 2017.02.11 15769
공지 [TIP] TensorFlow를 윈도우에서 사용하기 (A way to use TensorFlow on Windows) [3] 파이팅건맨 2016.04.16 14700
145 [TIP] The function size must be used with a prefix when a default namespace is not specified 오류 해결하기 파이팅건맨 2017.08.02 2240
144 [TIP] 페이스북 개인 담벼락의 좋아요수 크롤링하기 파이팅건맨 2017.07.15 1291
143 [TIP] 자바스크립트와 PHP코드간에 암호화 통신하기 (Encrypt with Javascript, Decrypt with PHP) [2] 파이팅건맨 2017.03.16 3649
142 [TIP] GUNMAN의 영화 점수 테이블을 이용한 딥러닝 예제 파이팅건맨 2017.02.15 876
141 [TIP] R에서 페이스북 페이지 정보 크롤링 하기 [6] 파이팅건맨 2017.02.11 15769
140 [TIP] 네이버 영화 정보와 전문가 평점 얻어오기 파이팅건맨 2017.02.10 6159
139 [TIP] 네이버 오픈 API를 로컬 PC에서 호출하기 파이팅건맨 2017.02.01 2846
138 [TIP] php로 기상청에서 제공하는 기상정보 API 호출하기 파이팅건맨 2017.01.17 8367
137 [TIP] node 에서 Basic authentication 인증과 함께 http, https 요청하기 파이팅건맨 2016.09.01 1023
136 [TIP] node의 lambda-local 테스트 팁 파이팅건맨 2016.08.19 700
135 [TIP] 데이터를 Node에서 암호화하고 PHP에서 복호화 하기 파이팅건맨 2016.08.19 742
134 [TIP] Docker상의 Syntaxnet 결과 포맷을 수정하기 파이팅건맨 2016.08.07 1867
133 [TIP] SyntaxNet을 Windows에서 실행하기 [1] 파이팅건맨 2016.05.25 891
132 [TIP] TensorFlow를 윈도우에서 사용하기 (A way to use TensorFlow on Windows) [3] 파이팅건맨 2016.04.16 14700
131 [TIP] 파이선으로 TED에서 가장많이 사용된 단어들 줄세우기 파이팅건맨 2016.04.03 1692
130 [TIP] 파이선에서 구글 스프레드시트 사용하기 [5] 파이팅건맨 2016.03.27 4765
129 [TIP] 파이선에서 리스트를 사용하는 재미있는 예제 파이팅건맨 2016.03.15 884
128 [TIP] PYTHON 에서 "UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 6987: illegal multibyte sequence" 오류 날때... [48] 파이팅건맨 2016.02.20 108620
127 [TIP] 퍼포먼스를 높여주는 몇가지 코딩 예 파이팅건맨 2016.01.22 591
» [TIP] JQuery와 PHP로 이미지 파일을 업로드 하는 간단한 소스 (How to upload image file on PHP server by using JQuery) 파이팅건맨 2015.04.03 11709
위로