【问题标题】:Show only image files In input type file browse window? [duplicate]仅显示图像文件在输入类型文件浏览窗口中? [复制]
【发布时间】:2013-05-30 09:19:17
【问题描述】:

所以基本上如何过滤弹出窗口以仅在我单击输入类型文件时显示图像文件

 <input type="file" />

感谢任何帮助,我尝试为此找到解决方案

谢谢

【问题讨论】:

  • 出错了?我不关注,你能提供更多细节吗,弹出窗口等等。
  • 这是无法使用默认文件浏览器控制的。 accept="image/*" 属性可能对接受的文件类型有用,但就仅显示特定文件类型而言,我相信 javascript 解决方案是唯一的方法。

标签: php jquery html


【解决方案1】:

您可以使用它,但它不适用于所有浏览器:

<input type="file" accept="image/*">

在 Chrome 中,您甚至可以指定允许的格式:

<input type="file" accept="image/x-png, image/gif, image/jpeg" />

LIVING DEMO

如果你想在客户端限制图片类型you can still use JavaScript to validate it

当然你也应该用 PHP 在服务器端检查它:

//defining the allowed extensions and types for our system.
$allowedMimes = array('image/gif', 'image/jpeg', 'image/jpg', 'image/png', 'image/bmp', 'image/wbmp');
$allowedExtensions = array('jpg', 'gif', 'jpeg', 'png', 'bmp', 'wbmp');

$extension = end(explode('.',$imgFile));

//is the extension allowed?
if(in_array($extension, $allowedExtensions)){

    //getting the mime type (it can be different from the extension) Be careful!
    $imgInfo = getimagesize('yourPath/'.$imgFile);
    $type = strtolower($imgInfo['mime']);

    //checking the mime type
    if(!in_array($type, $allowedMimes)){
         // is an allowed image type
    }
}

【讨论】:

  • 您测试过自己的演示吗?您发现它适用于哪些浏览器?
  • @Dagon 我只在 Chrome 上测试过。你说的对。它不适用于其他人。
  • 我发现它适用于 IE,但不适用于 FF
  • @Dagon,无论如何,image/* 也不适用于所有浏览器。更多关于验证。
  • 扩展是没有意义的并且 ereg_replace 已经被贬值了。
【解决方案2】:

我想你正在寻找接受参数。试试这个作品

<input type="file" accept="image/*" />

有关 mime 类型的列表,请查看以下链接:

http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

【讨论】:

  • ..非常感谢它的工作正常
【解决方案3】:

这是不可能的。这是浏览器用户界面的一部分,JavaScript 无法控制它。正如其他提到的,您可以使用 accept 属性,但尚未为此目的创建该属性。

如果type属性的值为fileaccept属性表示服务器接受的文件类型;否则将被忽略。该值必须是以逗号分隔的唯一内容类型说明符列表。

【讨论】:

  • ic 感谢您提供的信息
【解决方案4】:

图片举例:

<input type="file" accept="image/*">

See this answer

【讨论】:

    猜你喜欢
    • 2023-04-09
    • 1970-01-01
    • 2014-04-10
    • 1970-01-01
    • 2020-04-17
    • 2013-08-29
    • 2010-10-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多