PHP jQuery Ajax는 여러 이미지 업로드 효과를 구현합니다.

오늘 제가 여러분과 공유할 내용은 PHP jQuery Ajax를 사용하여 페이지를 새로 고치지 않고도 여러 이미지를 업로드하는 효과를 얻는 것입니다. 사용자는 업로드할 이미지를 클릭하기만 하면 해당 이미지가 자동으로 서버에 업로드되어 페이지에 표시됩니다.

HTML

페이지에 양식을 배치하고 post를 사용하여 이를 백그라운드 PHP 핸들러 upload.php에 제출합니다. enctype 속성 설정은 파일 업로드를 지원해야 합니다. #preview는 업로드 후 이미지를 표시하는 데 사용됩니다. 이 글에는 CSS 스타일 설정에 대한 설명이 없습니다. 다운로드 패키지의 소스 코드를 참고하세요.

코드 복사 코드는 다음과 같습니다.

> >       이미지 추가           

양식>

최대 100KB, jpg, gif, png 형식을 지원합니다.

jQuery
이 예제는 jQuery를 기반으로 하므로 jquery 라이브러리와 jquery.wallform.js를 페이지에 로드해야 합니다.

코드 복사

코드는 다음과 같습니다.

'이미지 추가' 버튼을 클릭하면 업로드할 이미지를 선택한 후 파일 선택 대화상자가 팝업됩니다. 그런 다음 #imageform 양식은 jquery.wallform.js의 ajaxForm() 메서드를 호출하고, 처리를 위해 양식 데이터를 백그라운드 PHP에 제출하고, 반환된 결과에 따라 페이지 요소 표시를 처리합니다. 업로드가 성공하면 페이지에 이미지가 하나씩 표시됩니다. ajaxForm() 사용에 관해서는 이 사이트의 Ajax 양식 제출 플러그인 jqery 양식 문서를 참조할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

$(함수(){

$('#photoimg').die('클릭').live('변경', function(){         var status = $("#up_status")       var btn = $("#up_btn")           $("#imageform").ajaxForm({ 대상 : '#preview',               beforeSubmit:function(){ 상태.쇼()

                    btn.hide()

             },
                성공:기능(){
상태.숨기기()
                    btn.show()
             },
            오류:기능(){
상태.숨기기()
                    btn.show()
           } }).submit()
})
})

PHP

upload.php는 이미지 업로드를 처리하고 업로드된 이미지를 uploads/ 디렉터리에 저장합니다. 해당 디렉터리에는 쓰기 권한이 있어야 합니다. 먼저 POST 모드로 제출되었는지 확인한 다음 이미지 형식과 이미지 크기가 요구 사항을 충족하는지 확인한 다음 move_uploaded_file()을 사용하여 이미지를 업로드하고 이미지 이름을 time().rand 형식으로 변경해야 합니다. (100,999).

코드 복사 코드는 다음과 같습니다.

$path = "업로드/"
$extArr = array("jpg", "png", "gif")
if(isset($_POST) 및 $_SERVER['REQUEST_METHOD'] == "POST"){
$이름 = $_FILES['photoimg']['이름']
$size = $_FILES['photoimg']['크기']
If(비어 있음($name)){
echo '업로드할 이미지를 선택해주세요'; 종료
}
$ext = 연장($이름)
If(!in_array($ext,$extArr)){
echo '사진 형식이 잘못되었습니다! '; 종료
}
If($size>(100*1024)){
echo '이미지 크기는 100KB를 초과할 수 없습니다'; 종료
}
$image_name = time().rand(100,999).".".$ext
$tmp = $_FILES['photoimg']['tmp_name']
If(move_uploaded_file($tmp, $path.$image_name)){
echo ''; }그밖에{
echo '업로드 오류! '; }
종료
}
//파일 형식 접미사 가져오기
함수 확장($file_name){
$extend = 경로정보($file_name)
$extend = strtolower($extend["extension"])
$extend 반환
}



물론 실제 애플리케이션에서는 데이터베이스와 사용자 센터를 결합해 사용자가 업로드한 이미지를 데이터 테이블에 저장하는 것도 가능하다.

위 내용은 이 글에서 공유한 모든 내용입니다. 마음에 드셨으면 좋겠습니다.