Ajax 업로드 스크립트 + 파일 유형 필터링

Question

나는 아래 게시 할 아약스 업로드 스크립트가 있습니다. 모든 확장명의 파일을 업로드합니다. 나는 그것이 .png 파일 만 업로드하고 싶지만 그것을 어떻게하는지 모른다.

이

<h1>Ajax File Upload Demo</h1> 

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data"> 

Name it: 
<input type="text" name="upload_name"> 

<br> 
    <input type="file" size="60" name="myfile"> 
    <input type="submit" value="Ajax File Upload"> 
</form> 

<div id="progress"> 
     <div id="bar"></div> 
     <div id="percent">0%</div > 
</div> 
<br/> 

<div id="message"></div> 

<script> 
$(document).ready(function() 
{ 

    var options = { 
    beforeSend: function() 
    { 
     $("#progress").show(); 
     //clear everything 
     $("#bar").width('0%'); 
     $("#message").html(""); 
     $("#percent").html("0%"); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) 
    { 
     $("#bar").width(percentComplete+'%'); 
     $("#percent").html(percentComplete+'%'); 

    }, 
    success: function() 
    { 
     $("#bar").width('100%'); 
     $("#percent").html('100%'); 

    }, 
    complete: function(response) 
    { 
     $("#message").html("<font color='green'>"+response.responseText+"</font>"); 
    }, 
    error: function() 
    { 
     $("#message").html("<font color='red'> ERROR: unable to upload files</font>"); 

    } 

}; 

    $("#myForm").ajaxForm(options); 

}); 

</script> 

PHP :

<?php 

$upload_name = $_POST['upload_name']; 

$idx = strpos($_FILES['myfile']['name'],'.'); 
$ext = substr($_FILES['myfile']['name'],$idx); 

$file_name = $upload_name . $ext; 

$output_dir = "uploads/"; 

if(isset($_FILES["myfile"])) 

{ 
    //Filter the file types , if you want. 

    if ($_FILES["myfile"]["error"] > 0) 

    { 
     echo "Error: " . $_FILES["file"]["error"] . "<br>"; 

    } 
    else 
    { 
     //move the uploaded file to uploads folder; 

//  move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]); 

//  echo "Uploaded File :".$_FILES["myfile"]["name"]; 


move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$file_name); 

echo "Uploaded File :" . $file_name; 

    } 

} 
?> 

미안 해요, 난 새로운 코드 블록 늘 나를 위해 작동하고있어 여기에

내 파일입니다. 누군가가 업데이트 할 수 있다면 좋을 것입니다.

Answer 1

클라이언트 측

변경하여 입력 파일 필드 현대적인 브라우저에 대한이 유일한 작품 IE10 + 구글 크롬 8.0 이상 및 Firefox 4.0 이상

<input type="file" size="60" name="myfile" accept="image/png" /> 

PHP

$ext = pathinfo($file_name , PATHINFO_EXTENSION); 

    if(strtolower($ext) == 'png' && $_FILES["file"]['type'] == "image/png") 
    { 
     // upload file 
    } else{ 
     // not allowed 
    } 

Answer 2

요 서버 측에서 파일 확장자 또는 MIME 유형을 확인할 수 있습니다.

// check extension 
$info = new SplFileInfo($_FILES['myfile']['name']); 
if ($info->getExtension() !== 'png') { 
    // return error 
} 

// or check file mime type 
if (mime_content_type($_FILES['myfile']['name']) !== 'image/png') { 
    // return error 
} 

예 PHP :이 동일한 경우

$output_dir = "uploads/"; 
$upload_name = $_POST['upload_name']; 

if(isset($_FILES["myfile"])) { 
    // Check upload errors 
    if ($_FILES["myfile"]["error"] > 0) { 
     echo "Error: " . $_FILES["file"]["error"] . "<br>"; 
     return; 
    } 

    // Check extensions 
    $info = new SplFileInfo($_FILES['myfile']['name']); 
    if ($info->getExtension() !== 'png') { 
     echo "Error: Only .png files are allowed"; 
     return; 
    } 

    // Upload file 
    $file_name = $upload_name . $info->getExtension(); 
    move_uploaded_file($_FILES["myfile"]["tmp_name"], $output_dir . $file_name); 
    echo "Uploaded File :" . $file_name; 
}