在客户端代码中需要使用<input type='file' name='file' />来选择要上传的文件,并上传,代码如下:
<form action="servlet/UploadFile" method="post" enctype="multipart/form-data">
<input type="file" name="file1" id="file1" />
<input type="file" name="file2" id="file2" />
<input type="submit" value="上传" />
</form>
从上面的代码可以看出,有两个文件选择框(
file1
和
file2
),在上传文件时,
<form>
标签必须加上
enctype="multipart/form-data"
,否则浏览器无法将文件内容上传到服务端。
form表单
enctype属性说明:
值 | 描述 |
---|---|
application/x-www-form-urlencoded | 在发送前编码所有字符(默认) |
multipart/form-data | 不对字符编码。 在使用包含文件上传控件的表单时,必须使用该值。 |
text/plain | 空格转换为 "+" 加号,但不对特殊字符编码。 |
提交表单,文件就会上传到指定url,但这种方式,页面会刷新,有时候,并不能满足需求,如果需要无刷新上传文件,只需要新建一个隐藏的iframe,把上述form的target设置成iframe的name即可。
<
iframe
name
=
"targetIfr" style="display:none"
></
iframe
>
<form action="servlet/UploadFile" method="post" enctype="multipart/form-data" target="targetIfr">
<input type="file" name="file1" id="file1" />
<input type="file" name="file2" id="file2" />
<input type="submit" value="上传" />
</form>
<input type="file" name="file2" id="file2" />
<input type="submit" value="上传" />
</form>
另外,input.value可以获取上传文件路径。
参考资料:
multipart/form-data规 范原文:
http://www.ietf.org/rfc/rfc2388.txt
Form-based File Upload in HTML: http://www.ietf.org/rfc/rfc1867.txt
Form-based File Upload in HTML: http://www.ietf.org/rfc/rfc1867.txt