메뉴 건너뛰기

프로그래밍


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 !




profile
제목 날짜
[TIP] PYTHON 에서 "UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 6987: illegal multibyte sequence" 오류 날때... 4 2016.02.20
[TIP] JQuery와 PHP로 이미지 파일을 업로드 하는 간단한 소스 (How to upload image file on PHP server by using JQuery) 2015.04.03
[TIP] R에서 페이스북 페이지 정보 크롤링 하기 2 2017.02.11
[TIP] 데이터를 Node에서 암호화하고 PHP에서 복호화 하기 2016.08.19
[TIP] Docker상의 Syntaxnet 결과 포맷을 수정하기 2016.08.07
[TIP] SyntaxNet을 Windows에서 실행하기 1 2016.05.25
[TIP] TensorFlow를 윈도우에서 사용하기 (A way to use TensorFlow on Windows) 3 2016.04.16
[TIP] 파이선으로 TED에서 가장많이 사용된 단어들 줄세우기 2016.04.03
[TIP] 파이선에서 구글 스프레드시트 사용하기 5 2016.03.27
[TIP] 파이선에서 리스트를 사용하는 재미있는 예제 2016.03.15
[TIP] PYTHON 에서 "UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 6987: illegal multibyte sequence" 오류 날때... 4 2016.02.20
[TIP] 퍼포먼스를 높여주는 몇가지 코딩 예 2016.01.22
[TIP] JQuery와 PHP로 이미지 파일을 업로드 하는 간단한 소스 (How to upload image file on PHP server by using JQuery) 2015.04.03
자작 커널을 위한 인터럽트 벡터 수정 (EZ-2410보드 대상) 2013.05.04
위치추적 1 2013.04.06
[TIP] MySQL - NaviCat 사용시 에러 확인방법 2010.02.23
[TIP] 설치된 코덱 리스트 얻어오기 2010.02.18
[TIP] VFW 에서 영상 압축을 위한 코덱을 코드상에서 선택하여 실시간 저장하는 방법입니다. 2010.02.04
[TIP] Visual Studio App Wizard 만들기 관련 2009.12.17
[TIP] C# 에서 Win32 DLL 을 사용하기 위한 방법 2009.07.16
[TIP] WMI 이용, 사용가능한 모뎀 포트 알아내기 2009.07.05
[TIP] Excel Ole 를 사용시 Hidden 열 혹은 행인지 알아내는 방법 2009.05.17
[TIP] Win32 API를 사용하여 응용 프로그램 열거하기 2009.01.15
태그 목록
위로