Ajax upload script + фильтрация файлов

Question

У меня есть сценарий загрузки ajax, который я опубликую ниже. Он будет загружать любой файл с любым расширением. Я хочу, чтобы он загружал только файлы .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 + Google Chrome 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

Yo u может проверить расширение файла или тип 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; 
}