浏览器端的文件上传--以百度云图片识别为例

浏览器端的文件上传主要有两种方式，即通过表单提交和ajax提交。
表单提交，默认会在当前窗口渲染服务端响应的结果，会刷新页面。

本文通过两种方式实现将本地图片上传到百度智能云服务端，并获取服务端的返回结果，并总结不同方式的特点。

本文包含以下问题的答案：

• 如何实现不刷新的文件上传
• 如何设计一个简单的上传（下载）进度条

通过表单上传文件

定义一个form表单，包含type为 file 和 submit 的 input 控件

<form method="post" 
	enctype="multipart/form-data" 
    action="https://path/to/baiduapi/"
    >
    <input type="file" name="image" accept="image/*" ></input>
    <input type="submit" value="upload">
</form>
<iframe id="result" name="result"></iframe>

form标签的enctype只对请求体起作用，method指定为POST时，enctype指定请求体的格式。表单默认的enctype为application/x-www-form-urlencoded，也就是key1=value1&key2=value2的格式。
如果表单中有type为file的控件，method必须指定为POST，enctype必须指定为multipart/form-data。
本例中form标签没有指定target属性，默认会在当前页面渲染服务端返回的结果。
效果如图：

虽然服务端返回了一段错误信息。但我们也完成了上传文件、拿到响应这个过程。通过表单上传文件会刷新当前页面。其实我们也可以设置iframe标签，实现在当前页面显示服务端返回的结果，页面不刷新。

通过表单上传文件，不刷新当前页面

添加一个iframe标签，并把form标签的target属性指向它，代码如下

<form method="post" 
	enctype="multipart/form-data" 
    action="https://path/to/baiduapi/"
    target="result"
    >
    <input type="file" name="image"