文件上传二三事

摘要：选择文件谈到文件上传，不得不提，中文名叫表单。当需要使用回调函数来处理上传完成后后端返回的数据时，需要和后端预先达成约定，如，回调函数名，参数列表，等等。后端可以根据边界的检验，识别上传的文件，读取元数据中的文件属性，从而为验证提供数据。

其实很早就开始酝酿这一篇了，无奈总是发现有缺漏的地方，遂努力恶补前端+后端+底层相关知识。今天终于可以发表了。

--跟生孩子一样啊。

谈到文件上传，不得不提 form，中文名叫表单。它可以包含一个用来选择文件的东东，叫做 file。

file:

action 表示表单的数据发送的目标地址，method 表示发送表单所使用的 http 方法（get / post），enctype表示数据的编码方式，对于文件上传，必须为 multipart/form-data。

具体的定义参见 form。

下面是对应的页面，可以看到，有一个提示选择文件的按钮

点击按钮，就可以选择文件啦。

小贴士：文件选择好之后，可以通过 FileReader 进行预览，或者简单的编辑。

简单的上传，只需要提交对应的 form 就可以了。是不是很简单，O(∩_∩)O哈哈哈~。

上面介绍的都太简单粗暴肤浅了，实际项目中老板，客户100%会投反对票。因为实在是太简陋了。

浏览器提供的原生控件实在是丑的不忍心看，可以自己画一个好看的按钮。

.chooseFile{
    min-width: 30px;
    min-height: 15px;
    width: 106px;
    height: 29px;
    background-color: #B6E2C9;
    color: black;
    font-family: monospace;
    font-weight: 400;
    border-color: white;
    border-radius: 17px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

记得把原来的form隐藏掉。

接下来你需要做的是给这个按钮绑定 click listener ，当它被点击时，触发 form 中的 file 的 click 事件。

有些时候，希望上传时不刷新当前页面。但是使用 form 是避免不了页面刷新的。怎么办？

第一个想出这个办法的肯定是个头脑灵活的家伙--使用隐藏的 iframe 上传。

原理是，在当前页面（父页面）中添加 iframe，iframe 的页面（子页面）中包含 form 和相关的函数（验证，预处理等等）。当用户在父页面点击选择文件的按钮时，去触发子页面中 file 控件的 click 事件。

当用户提交时，提交子页面中的 form。这时，子页面跳转，而父页面没有刷新。

这个方案有个缺点，就是需要前后端协同工作。

当需要使用回调函数来处理上传完成后后端返回的数据时，需要和后端预先达成约定，如，回调函数名，参数列表，等等。这对前后端完全分离的开发场景(比如，你只是开发前端UI)是一个挑战。（出现全栈工程师的原因，是不是就是因为前端工程师想把这些依赖但是却又无法完全控制的工作给抢过来？）

比如，父页面须定义回调函数

function uploadSuccess (result){
...
}

后端须对action（上面form中定义的/upload）返回html，html包含对回调函数的调用，以及制定参数。

...