文件上传下载 Content-type 设置整理

最新推荐文章于 2024-07-22 17:34:56 发布

s-0

最新推荐文章于 2024-07-22 17:34:56 发布

阅读量3.2w

点赞数 21

分类专栏：前段后端

原文链接：http://www.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.com.cn

版权

前段同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

后端

1 篇文章 0 订阅

订阅专栏

一、Content-type基本概念

HTTP协议提供了Content-Type实体首部字段来描述报文实体的媒体格式，说明请求或返回的消息是用什么格式进行编码的，在request header和response header里都有存在。用来向服务器或者浏览器说明传输的文件格式，以便服务器和浏览器按照正确的格式进行解析。在最初的的http post请求只支持application/x-www-form-urlencoded,参数是通过浏览器的url进行传递，但此种方法不支持文件上传，所以后来Content-type 扩充了multipart/form-data类型以支持向服务器发送二进制数据，以及随着后面web应用的日益发展增加了application/json的类型

二、MIME类型说明：

语法结构

Content-Type: [type]/[subtype];parameter

1、type 有下面的形式：

Text：用于标准化地表示的文本信息，文本消息可以是多种字符集和或者多种格式的；
Multipart：用于连接消息体的多个部分构成一个消息，这些部分可以是不同类型的数据；
Application：用于传输应用程序数据或者二进制数据；
Message：用于包装一个E-mail消息；
Image：用于传输静态图片数据；
Audio：用于传输音频或者音声数据；
Video：用于传输动态影像数据，可以是与音频编辑在一起的视频数据格式。

2、subtype 用于指定 type的详细形式。“type/subtype”配对的集合和与此相关的参数。下面是最经常用到的一些 MIME 类型：

text/html（HTML 文档）；
text/plain（纯文本）；
text/css（CSS 样式表）；
image/gif（GIF 图像）；
image/jpeg（JPG 图像）；
application/x-javascript（JavaScript 脚本）；
application/x-shockwave-flash（Flash）；
application/x- www-form-urlencoded（使用 HTTP 的 POST方法提交的表单）；
multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）。

3、常用类型

类型	描述	典型示例
`text`	表明文件是普通文本，理论上是人类可读	`text/plain`, `text/html`, `text/css, text/javascript`
`image`	表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型	`image/gif`, `image/png`, `image/jpeg`, `image/bmp`, `image/webp`, `image/x-icon`, `image/vnd.microsoft.icon`
`audio`	表明是某种音频文件	`audio/midi`, `audio/mpeg, audio/webm, audio/ogg, audio/wav`
`video`	表明是某种视频文件	`video/webm`, `video/ogg`
`application`	表明是某种二进制数据	`application/octet-stream`, `application/pkcs12`, `application/vnd.mspowerpoint`, `application/xhtml+xml`, `application/xml`, `application/pdf`

三、常见使用场景

1、提交表单

<form action="/FileUploadServlet"  method="POST">
	<input type="text" name="username"/>
	<input type="password" name="password"/>
	<input type="submit" value="Send"/>
</form>

当我们没有对其指定enctype值或者显示指定enctype="application/x-www-form-urlencoded"值时，Request报文的Content-Type字段值和请求实体如下:

#Content-Type首部字段.
Content-Type:application/x-www-form-urlencoded

#请求实体内容.
username=CYanLong&password=123456

2、文件上传

`multipart/form-data`

multipart/form-data 可用于HTML表单从浏览器发送信息给服务器。作为多部分文档格式，它由边界线（一个由'--'开始的字符串）划分出的不同部分组成。每一部分有自己的实体，以及自己的 HTTP 请求头，Content-Disposition和 Content-Type 用于文件上传领域，最常用的 (Content-Length 因为边界线作为分隔符而被忽略）。

Content-Type: multipart/form-data; boundary=aBoundaryString
(other headers associated with the multipart document as a whole)

--aBoundaryString
Content-Disposition: form-data; name="myFile"; filename="img.jpg"
Content-Type: image/jpeg

(data)
--aBoundaryString
Content-Disposition: form-data; name="myField"

(data)
--aBoundaryString
(more subparts)
--aBoundaryString--

如下所示的表单:

<form action="http://localhost:8000/" method="post" enctype="multipart/form-data">
  <input type="text" name="myTextField">
  <input type="checkbox" name="myCheckBox">Check</input>
  <input type="file" name="myFile">
  <button>Send the file</button>
</form>

会发送这样的请求:

POST / HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
Content-Length: 465

-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myTextField"

Test
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myCheckBox"

on
-----------------------------8721656041911415653955004498
Content-Disposition: form-data; name="myFile"; filename="test.txt"
Content-Type: text/plain

Simple file.
-----------------------------8721656041911415653955004498--

3、JSON数据格式传输 application/json

此类型告诉服务端数据是序列化的json字符串，由于json规范的流行和越来越多的浏览器支持原生JSON.stringfy，此类型也越来越多的被使用。
（最后发送到服务端的数据格式eg:"{'name':'黄晓明','age':'40'}"）

四、例子

1、application/json例子

前段提交

$.ajax({
    url:"../../Notice/LoadForm.do",
    type:"post",
    contentType:"application/json;charset=UTF-8",
    data:JSON.stringify({"id":"1","title":"标题"})
});

后端接收（java-spring）

@RequestMapping(value="Notice/LoadForm")
@ResponseBody
public ResultJO loadForm(@RequestBody Notice notice){

}

2、下载例子（java-spring）

@RequestMapping("/download")
    public void download(HttpServletRequest request, HttpServletResponse response){
 
        File file=new File("filenamepath.xls");
        String fileName=file.getName();
        String ext=fileName.substring(fileName.lastIndexOf(".")+1);
        //判断浏览器类型
        String agent=(String)request.getHeader("USER-AGENT"); 
        try {
            if(agent!=null && agent.indexOf("Fireforx")!=-1) {
            		//UTF-8编码，防止输出文件名乱码
                fileName = new String(fileName.getBytes("UTF-8"), "iso-8859-1");   
            }
            else {
                fileName= URLEncoder.encode(fileName,"UTF-8");
            }
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
 
        BufferedInputStream bis=null;
        OutputStream os=null;
        response.reset();
        response.setCharacterEncoding("utf-8");
        if("doc".equals(ext)) {
            response.setContentType("application/msword"); 
        }else if("pdf".equals(ext)) {
            response.setContentType("application/pdf"); 
        }else if("xls".equals(ext)){
            response.setContentType("application/octet-stream;charset=ISO8859-1");
        }else if("filetype".equals(ext)){
            ..............自行扩展
        }
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
 
        try {
            bis=new BufferedInputStream(new FileInputStream(file));
            byte[] b=new byte[bis.available()+1000];
            int i=0;
            os = response.getOutputStream();  
            while((i=bis.read(b))!=-1) {
                os.write(b, 0, i);
            }
            os.flush();
            os.close();
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if(os!=null) {
                try {
                    os.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
 
    }

五、问题收集

1、在 IE6 IE7 IE8 中，若一个页面被打开时接收到的响应头的content-type 为text/plain，浏览器会尝试嗅探页面文件内实际内容来判断是否可能为一个 HTML 文档，若是则会以 text/html的方式将页面作为 HTML 文档解释，而不是将其作为纯文本内容处理。

解决办法：使用attachment

2、 jpg、tmp、png等格式图片没有办法用 windows 图片和传真查看器直接打开

解决办法：使用attachment

3、docx、pptx等Office2007格式文件可能会被浏览器错误识别为zip格式文件下载或打开

4、SpringMVC在使用JSON时报错信息为：Content type 'application/json;charset=UTF-8' not supported

直接原因是：我的(maven)项目parent父工程pom.xml缺少必要的三个jar包依赖坐标。

解决方法是：在web子模块的pom.xml里面添加springMVC使用JSON实现AJAX请求。

<!--spring mvc-json依赖-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.9</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.9</version>
        </dependency>

六、Mime 类型列表

office 所有后缀对应的 content-type
类型/子类型	扩展名
application/msword	.doc
application/msword	.dot
application/vnd.openxmlformats-officedocument.wordprocessingml.document	.docx
application/vnd.openxmlformats-officedocument.wordprocessingml.template	.dotx
application/vnd.ms-word.document.macroEnabled.12	.docm
application/vnd.ms-word.template.macroEnabled.12	.dotm
application/vnd.ms-excel	.xls
application/vnd.ms-excel	.xlt
application/vnd.ms-excel	.xla
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	.xlsx
application/vnd.openxmlformats-officedocument.spreadsheetml.template	.xltx
application/vnd.ms-excel.sheet.macroEnabled.12	.xlsm
application/vnd.ms-excel.template.macroEnabled.12	.xltm
application/vnd.ms-excel.addin.macroEnabled.12	.xlam
application/vnd.ms-excel.sheet.binary.macroEnabled.12	.xlsb
application/vnd.ms-powerpoint	.ppt
application/vnd.ms-powerpoint	.pot
application/vnd.ms-powerpoint	.pps
application/vnd.ms-powerpoint	.ppa
application/vnd.openxmlformats-officedocument.presentationml.presentation	.pptx
application/vnd.openxmlformats-officedocument.presentationml.template	.potx
application/vnd.openxmlformats-officedocument.presentationml.slideshow	.ppsx
application/vnd.ms-powerpoint.addin.macroEnabled.12	.ppam
application/vnd.ms-powerpoint.presentation.macroEnabled.12	.pptm
application/vnd.ms-powerpoint.presentation.macroEnabled.12	.potm
application/vnd.ms-powerpoint.slideshow.macroEnabled.12	.ppsm
其他后缀对应的 content-type
类型/子类型	扩展名
application/envoy	evy
application/fractals	fif
application/futuresplash	spl
application/hta	hta
application/internet-property-stream	acx
application/mac-binhex40	hqx
application/msword	doc
application/msword	dot
application/octet-stream	*
application/octet-stream	bin
application/octet-stream	class
application/octet-stream	dms
application/octet-stream	exe
application/octet-stream	lha
application/octet-stream	lzh
application/oda	oda
application/olescript	axs
application/pdf	pdf
application/pics-rules	prf
application/pkcs10	p10
application/pkix-crl	crl
application/postscript	ai
application/postscript	eps
application/postscript	ps
application/rtf	rtf
application/set-payment-initiation	setpay
application/set-registration-initiation	setreg
application/vnd.ms-excel	xla
application/vnd.ms-excel	xlc
application/vnd.ms-excel	xlm
application/vnd.ms-excel	xls
application/vnd.ms-excel	xlt
application/vnd.ms-excel	xlw
application/vnd.ms-outlook	msg
application/vnd.ms-pkicertstore	sst
application/vnd.ms-pkiseccat	cat
application/vnd.ms-pkistl	stl
application/vnd.ms-powerpoint	pot
application/vnd.ms-powerpoint	pps
application/vnd.ms-powerpoint	ppt
application/vnd.ms-project	mpp
application/vnd.ms-works	wcm
application/vnd.ms-works	wdb
application/vnd.ms-works	wks
application/vnd.ms-works	wps
application/winhlp	hlp
application/x-bcpio	bcpio
application/x-cdf	cdf
application/x-compress	z
application/x-compressed	tgz
application/x-cpio	cpio
application/x-csh	csh
application/x-director	dcr
application/x-director	dir
application/x-director	dxr
application/x-dvi	dvi
application/x-gtar	gtar
application/x-gzip	gz
application/x-hdf	hdf
application/x-internet-signup	ins
application/x-internet-signup	isp
application/x-iphone	iii
application/x-javascript	js
application/x-latex	latex
application/x-msaccess	mdb
application/x-mscardfile	crd
application/x-msclip	clp
application/x-msdownload	dll
application/x-msmediaview	m13
application/x-msmediaview	m14
application/x-msmediaview	mvb
application/x-msmetafile	wmf
application/x-msmoney	mny
application/x-mspublisher	pub
application/x-msschedule	scd
application/x-msterminal	trm
application/x-mswrite	wri
application/x-netcdf	cdf
application/x-netcdf	nc
application/x-perfmon	pma
application/x-perfmon	pmc
application/x-perfmon	pml
application/x-perfmon	pmr
application/x-perfmon	pmw
application/x-pkcs12	p12
application/x-pkcs12	pfx
application/x-pkcs7-certificates	p7b
application/x-pkcs7-certificates	spc
application/x-pkcs7-certreqresp	p7r
application/x-pkcs7-mime	p7c
application/x-pkcs7-mime	p7m
application/x-pkcs7-signature	p7s
application/x-sh	sh
application/x-shar	shar
application/x-shockwave-flash	swf
application/x-stuffit	sit
application/x-sv4cpio	sv4cpio
application/x-sv4crc	sv4crc
application/x-tar	tar
application/x-tcl	tcl
application/x-tex	tex
application/x-texinfo	texi
application/x-texinfo	texinfo
application/x-troff	roff
application/x-troff	t
application/x-troff	tr
application/x-troff-man	man
application/x-troff-me	me
application/x-troff-ms	ms
application/x-ustar	ustar
application/x-wais-source	src
application/x-x509-ca-cert	cer
application/x-x509-ca-cert	crt
application/x-x509-ca-cert	der
application/ynd.ms-pkipko	pko
application/zip	zip
audio/basic	au
audio/basic	snd
audio/mid	mid
audio/mid	rmi
audio/mpeg	mp3
audio/x-aiff	aif
audio/x-aiff	aifc
audio/x-aiff	aiff
audio/x-mpegurl	m3u
audio/x-pn-realaudio	ra
audio/x-pn-realaudio	ram
audio/x-wav	wav
image/bmp	bmp
image/cis-cod	cod
image/gif	gif
image/ief	ief
image/jpeg	jpe
image/jpeg	jpeg
image/jpeg	jpg
image/pipeg	jfif
image/svg+xml	svg
image/tiff	tif
image/tiff	tiff
image/x-cmu-raster	ras
image/x-cmx	cmx
image/x-icon	ico
image/x-portable-anymap	pnm
image/x-portable-bitmap	pbm
image/x-portable-graymap	pgm
image/x-portable-pixmap	ppm
image/x-rgb	rgb
image/x-xbitmap	xbm
image/x-xpixmap	xpm
image/x-xwindowdump	xwd
message/rfc822	mht
message/rfc822	mhtml
message/rfc822	nws
text/css	css
text/h323	323
text/html	htm
text/html	html
text/html	stm
text/iuls	uls
text/plain	bas
text/plain	c
text/plain	h
text/plain	txt
text/richtext	rtx
text/scriptlet	sct
text/tab-separated-values	tsv
text/webviewhtml	htt
text/x-component	htc
text/x-setext	etx
text/x-vcard	vcf
video/mpeg	mp2
video/mpeg	mpa
video/mpeg	mpe
video/mpeg	mpeg
video/mpeg	mpg
video/mpeg	mpv2
video/quicktime	mov
video/quicktime	qt
video/x-la-asf	lsf
video/x-la-asf	lsx
video/x-ms-asf	asf
video/x-ms-asf	asr
video/x-ms-asf	asx
video/x-msvideo	avi
video/x-sgi-movie	movie
x-world/x-vrml	flr
x-world/x-vrml	vrml
x-world/x-vrml	wrl
x-world/x-vrml	wrz
x-world/x-vrml	xaf
x-world/x-vrml	xof

文章内容来源：
https://www.w3school.com.cn/media/media_mimeref.asp
https://www.cnblogs.com/cyanlong/p/5726793.html
https://www.jianshu.com/p/4b09c260f9b2
https://blog.csdn.net/u013749540/article/details/78195266
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
http://www.mamicode.com/info-detail-2785469.html