wp_handle_upload 함수를 사용하시려면

Ajax 파일 데이터를 넘겨줄 때 실제 파일 형식에 맞춰서 넘겨주셔야 합니다.

워드프레스에서는 $("#upfile1") 코드 대신 jQuery("#upfile1") 이런 식으로 적용해주셔야 합니다.

예제 코드를 만들어 봤습니다.

아래의 코드를 활용해보시겠어요?

<input type="file" id="upfile1" name="upfile1" accept="image/*"/>
<script>
jQuery(document).ready(function() {
    jQuery('#upfile1').on('change', function(e){
        e.preventDefault;

        var formData = new FormData();
        var files_data = jQuery('#upfile1');

		formData.append('upfile1', jQuery(files_data)[0].files[0]);
        formData.append('action', 'set_excel');  

        jQuery.ajax({
            type: 'POST',
            url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response){
				alert(response);
            }
        });
    });
});
</script>

테마 쪽 functions.php 파일에는 아래의 코드를 활용해보세요.

add_action('wp_ajax_set_excel', 'set_excel');
add_action('wp_ajax_nopriv_set_excel', 'set_excel');
function set_excel(){
	if(!function_exists('wp_handle_upload')){
		require_once(ABSPATH . 'wp-admin/includes/file.php');
	}

	$uploadedfile = $_FILES['upfile1'];
	$movefile = wp_handle_upload($uploadedfile, array('test_form' => false));
	
	if($movefile && ! isset($movefile['error'])){
		echo "업로드 되었습니다.";
	}
	else{
		echo $movefile['error'];
	}
	exit;
}

고맙습니다.

안녕하세요~^^

워드프레스의 wp_handle_upload() 함수를 사용해보시겠어요?

아래 예제 코드도 참고해주세요.

if ( ! function_exists( 'wp_handle_upload' ) ) {
    require_once( ABSPATH . 'wp-admin/includes/file.php' );
}

$uploadedfile = $_FILES['file'];

$upload_overrides = array( 'test_form' => false );

$movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

if ( $movefile && ! isset( $movefile['error'] ) ) {
    echo "File is valid, and was successfully uploaded.\n";
    var_dump( $movefile );
} else {
    /**
     * Error generated by _wp_handle_upload()
     * @see _wp_handle_upload() in wp-admin/includes/file.php
     */
    echo $movefile['error'];
}

위의 예제 코드에서 $_FILES['file']; 이 부분은

실제로 <input type="file" name="file"> 코드에서 input의 name과 일치시켜 주시면 됩니다.

form 태그에 enctype="multipart/form-data" 속성이 있는지 확인해보세요.

<form enctype="multipart/form-data"> 이런 형식입니다.

해당 속성 없이는 파일이 전송되지 않습니다.

추가로 PHP의 파일 업로드 방식과 스택 오버플로우에 올라온 질문을 참고해보시면 도움이 되실 듯합니다.

http://php.net/manual/kr/features.file-upload.post-method.php
https://wordpress.stackexchange.com/questions/198781/wordpress-ajax-file-upload-frontend

고맙습니다.

예제를 봐도 잘 모르는 이유는 Form 태그의 Action 값 때문에 그렇습니다

워드프레스는 form에서 데이터를 보낼때 어디 ~.php에 데이터를 보내세요

라는게 안되는걸로 알고 있습니다. 실제로 몇몇 실험 해보고 안됬었구요

그래서 찾은게 Ajax를 이용하여 Action의 function.php의 함수를 실행하고 거기로 데이터를 보내는 식으로 했는데

파일 업로드는 이런식으로 하면 안되는건가요?

올려드린 사이트는 참고용으로 올려드렸습니다.

말씀하신 것처럼 functions.php 쪽에 추가하신 Ajax Action으로 하셔도 됩니다.

functions.php 쪽에 추가하신 코드에

실제 업로드는 워드프레스 내장 함수인 wp_handle_upload() 함수를 사용해보시겠어요?

고맙습니다.

안녕하세요 지금 3일째 붙잡고 있는데 잘 안되고 있습니다.

정리를 하고 싶어서 질문을 올립니다

1. 올려주신 예제를 이런 식으로 쓰는 것이 맞는건지 확인하고 싶습니다

function set_excel() {
	if ( ! function_exists( 'wp_handle_upload' ) ) {
	    require_once( ABSPATH . 'wp-admin/includes/file.php' );
	}

	$uploadedfile = $_FILES['upfile1'];
//	$uploadedfile = $_POST['data'];

//	print_r($uploadedfile);

	$upload_overrides = array( 'test_form' => false );

	$movefile = wp_handle_upload( $uploadedfile, $upload_overrides );

	if ( $movefile && ! isset( $movefile['error'] ) ) {
	    echo "File is valid, and was successfully uploaded.\n";
	    var_dump( $movefile );
	} else {
	    /**
	     * Error generated by _wp_handle_upload()
	     * @see _wp_handle_upload() in wp-admin/includes/file.php
	     */
	    echo $movefile['error'];
	}
}
add_action('wp_ajax_set_excel', 'set_excel'); //logged in.
add_action('wp_ajax_nopriv_set_excel', 'set_excel'); //not logged in.

ajax를 통해 파일을 업로드 하기 위해서 함수를 지정하여서 예제소스를 넣었습니다.

2. jQuery를 이용하여 Ajax를 사용해 파일을 업로드 하려고 합니다.(해당 jQuery는 custom.js에서 사용하고 있습니다)

$("#upfile1").off().on('change', function() {
			var file_data = $("#upfile1").prop("files")[0];   
			var form_data = new FormData();
			form_data.append("files", file_data);

//			var data = $("#upfile").val();   

		    console.log("시작");
			console.log(form_data.get("files"));
			console.log("종료");
		   	$.post(ajax_object.ajax_url, {     //ajax object
				action : 'set_excel',           //hook name
				data : form_data.get("files"),
				processData: false,
    			contentType: false,
    			type: 'POST',
				mimeType: 'multipart/form-data'
			}, function(data) {
				console.log(data);
				alert(data);
			});
		});

해당 소스는 file이 들어왔을 때 자동적으로 실행해서 데이터를 업로드 하려고 구현할 예정입니다

console.log(form_data.get(files)) 을 찍을 경우 해당 로그가 출력이 됩니다

File(158) {name: "mycsv.csv", lastModified: 1532003962671, lastModifiedDate: Thu Jul 19 2018 21:39:22 GMT+0900 (한국 표준시), webkitRelativePath: "", size: 158, …}

소스를 보시면 아시다시피 해당 데이터를 function.php -> set_excel()로 데이터를 보내고 있습니다.

그런데 이 데이터가 형식에 맞게 보내는건지 잘 모르겠습니다

(Ajax가 실행되면 출력되는 해당 오류)

Uncaught TypeError: Illegal invocation
    at e (jquery.js?ver=1.12.4:4)
    at dc (jquery.js?ver=1.12.4:4)
    at dc (jquery.js?ver=1.12.4:4)
    at Function.n.param (jquery.js?ver=1.12.4:4)
    at Function.ajax (jquery.js?ver=1.12.4:4)
    at Function.n.(:8080/wordpress/%eb%ac%b8%ec%a0%9c%ec%b6%9c%ec%a0%9c/anonymous function) [as post] (http://localhost:8080/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4:4:23175)
    at HTMLInputElement.<anonymous> (custom.js?ver=4.9.7:243)
    at HTMLInputElement.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLInputElement.r.handle (jquery.js?ver=1.12.4:3)

3. formdata의 값을 재대로 쓰고 있는지 확인하고 싶습니다.

위 소스를 보시면 눈치 채실수도 있지만 formdata는 enctype="multipart/form-data"를 자동으로 지정해준다고 하여 Form을 따로 지정을 안하고

file에 지정된 ID, Name 값만 가지고 왔습니다. 그래도 오류가 생기길래 값을 보낼때 mimeType : 'multipart/form-data' 로 설정하였으나 아무런 효과가 없었습니다

4. 올려주신 wp_handle_upload 함수가 테마에 따라 적용이 안 될수 있는지 궁금합니다.

지금 제가 사용하는 테마의 이름은 Study Circle 입니다 wp_handle_upload의 관련된 함수가 지정이 안되서

혹시 출력이 안되는게 아닐까 생각도 들고 있습니다. 그런데 이걸 확인해보고 싶어도 어떻게 확인하는지 잘 모르겠습니다.

더 궁금한게 있지만 우선 가장 중요한것은 이 4가지인거 같습니다.

이렇게 되면 파일이 미디어 라이브러리에 들어가야 된다고 생각하며 코드를 짠건데 자꾸 막혀있습니다.

감사합니다 덕분에 무사히 잘 해겼습니다

그런데 죄송하지만 추가적인 질문좀 있습니다.

이 파일을 업로드 했을 때 경로가 필요합니다.

wp_upload_dir()를 사용해보니 제 로컬서버의 절대경로가 나오는데 제가 필요한건 동적인 파일경로가 필요합니다.

예를 들어 미디어라이브러리에서 7월에 저장되면 "http://localhost:XXXX/wordpress/upload/2018/07/FileName.확장자"

9월에 저장되면 "http://localhost:XXXX/wordpress/upload/2018/09/FileName.확장자" 이런 식으로 경로를 필요합니다

이러기 위해서는 어떤 식으로 값을 가져오나요?

안녕하세요.

별 다른 설정을 하지 않으셨다면 wp_upload_dir() 함수를 사용하시면

/wp-content/uploads/년도/월 경로를 표시합니다.

년도와 월은 현재 시간을 기준으로 설정됩니다.

만약 wp_upload_dir('2018/09') 처럼 사용하시면

/wp-content/uploads/2018/09로 표시됩니다.

워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

아래의 코드를 추가해서 확인해보실 수 있습니다.

add_action('init', 'my_init');
function my_init(){
	print_r(wp_upload_dir());
	echo '<br>';
	print_r(wp_upload_dir('2018/09'));
}

고맙습니다.