Ajax上传脚本+文件类型过滤

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+ 谷歌浏览器 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;
}