利用iframe无刷新上传文件的坑

页面里经常要用到文件上传的功能，而且要求页面不刷新，先说一下原理：页面里放一个file控件和submit按钮，外面用form表单包住，给form表单加上对应的属性值，action、method、entype、name，到这一步，能上传文件了，但是这样上传文件会刷新页面，这不是我们想要的。我们要的是文件上传时不刷新页面，那么也简单，在页面里放一个iframe，设置它的宽高为0，这里有两个坑：

1、需要设置iframe的name值与form的target属性值一样，意思就是把form表单上传文件的刷新转嫁到iframe里去了；

2、form表单的enctype属性值必须设置成multipart/form-data，将文件转换成文件流供后端接收；

代码如下：

页面（这里为了看到效果，就不将iframe的宽高设为0了）：

事情就这么愉快地结束了吗？当然没有，离国庆节还有那么些天，不要着急。

到这里文件能上传了，页面也不会刷新，那么还差什么？当然是精益求精--优化啦。怎么优化？假如页面里有三个地方需要上传不同类型的文件，最好的办法肯定不是在页面里将代码copy三份，然后就这样用，这是普通开发的做法，我们可以利用js动态生成上面这些代码，需要上传文件的地方，一个函数加参数就搞定了，代码如下：