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


Ajax upload script + file type filtering

我有一个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;
    }
}
?>

抱歉,我是新手,代码块对我不起作用。如果有人可以更新,那就太好了。

客户端

更改输入文件字段 这仅适用于现代浏览器 IE10+谷歌浏览器 8.0+ 和火狐 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
   }

您可以在服务器端检查文件扩展名或 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;
}