bootstrap-fileinput--看这篇就够了

详细的教程都在这里： –Ajax 上传和非 Ajax 上传，各种 Option 和事件都在这里 –表单上传/Ajax上传/非Ajax上传的实例在这里，找到符合自己需求的直接拿过来用，真香~ –支持各种文件的预览/初始化绑定设置看这里 –有时候图标显示不出来可能是主题设置出错，就看这篇 –同步上传和异步上传的事件不一样， 例如： 设置了 uploadAsync: false,，表示设置了同步上传，上传多文件的时候只会请求一次uploadUrl中的地址，而异步上传有几个文件就会请求几次。 它们上传成功后的回调也不一样，同步是filebatchuploadsuccess，异步是fileuploaded 接下来是我自己做的demo

需求

需求:上传多文件，并将表单数据一起上传到后台保存到数据库 。下面是我的页面。点击“申请”，验证文件是否上传和一些必填项目之后提交到后台进行保存。

具体步骤

前几天写了一篇，但在后期总是有问题，所以研究了一番之后。 使用ajax上传文件，这样选择多文件的时候不会被覆盖，文件上传的同时 使用 uploadExtraData这个option，它可以附加数据到文件。 下面是我参考的官方页面，，里面有比较详细系统的解说。点击“Upload”就能实现表单提交文件和其他数据。

代码

注意:

我的其他数据是在form表单里,表单取消默认提交,form标签里添加onsubmit="return false" button 提交按钮不要加type="submit",总之就是阻止表单的默认提交

按钮的点击事件:只需触发文件上传就行

$("#submit").on("click", function () {
          
   
       $("#input-freqd-3").fileinput(upload);
   });

注意下面uploadExtraData,一定要传输这种格式,当然我也是按照官方给的案例做的,我是获取name属性,官方是获取input元素的id,不囊括下拉框,所以还是根据name属性获取比较靠谱,下面是初始化. 这部分比较复杂,需要处理下拉框,单选按钮,复选框的数据,因为只根据name去获取他们的value最后获取的值始终是最后一个或全选中. 下面是初始化 这里是表单的其他数据放在uploadExtraData这个option里

后台获取

获取文件和表单数据如下,

HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
   apply.NPPP = Request["nppp"];

多文件上传遍历并保存

总结

就是要多看官方教程，那里是最详细错误最少的

今日份鸡汤: 求知若渴 虚心若愚