• home > webfront > SGML > html >

    MIME类型:从限定选择文件类型看MIME类型 前后端设置

    Author:zhoulujun@live.cn Date:

    前端限定选择文件类型—让input type=file只获取图片,通过accept= "image gif,image jpeg,image x-png " 就可以搞定了。其实就是限定文件类型(MIME),这里不止前端,服务器端也需要考量

    在前端开发时候,我们让用户上传文件,但是,怎么去限制用户选择文件的类型?

    比如,我只让用户选择图片上传!

    当然,选择其它文件后,让用户判断是否是图片……

    但是,我选择的时候,就限制用户的选择范围,……可以如此!

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

    这样,就只能选择 gif,jpg,png格式的图片了

    电脑图片选择限制

    其实,就是给input指定 媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )

    媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化。

    互联网号码分配机构(IANA)是负责跟踪所有官方MIME类型的官方机构,您可以在媒体类型页面中找到最新的完整列表。

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

    下面是个人增补的表格:

    类型描述典型示例
    text表明文件是普通文本,理论上是人类可读text/plaintext/htmltext/css, text/javascript,application/json
    image表明是某种图像。不包括视频,但是动态图(比如动态gif)也使用image类型image/gifimage/pngimage/jpegimage/bmpimage/webpimage/x-iconimage/vnd.microsoft.icon,image/tiff
    audio表明是某种音频文件audio/midiaudio/mpeg, audio/webm, audio/ogg, audio/wav
    video表明是某种视频文件video/webmvideo/ogg,video/x-mpeg2,video/quicktime,video/x-msvideo
    application表明是某种二进制数据

    application/octet-streamapplication/pkcs12application/vnd.mspowerpointapplication/xhtml+xmlapplication/xml,  application/pdf

    其他常见的类型:

    文件流

    application/octet-stream:这是应用程序文件的默认值。意思是 未知的应用程序文件 ,浏览器一般不会自动执行或询问执行。浏览器会像对待 设置了HTTP头Content-Disposition 值为 attachment 的文件一样来对待这类文件。

    表单部分

    具体参看 《from属性EncType提交数据的格式详解—在angular中的应用

    服务器端,设置,看截图

    nginx媒体类型配置




    转载本站文章《MIME类型:从限定选择文件类型看MIME类型 前后端设置》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/htmlBase/2017_0215_7949.html