做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容IE 8。[纳尼,没遇到过,那你们产品和UI对你也忒好了吧。
遇到这种需求,如果项目不是很赶,可以自己用iframe来做,如果项目比较赶的话,就可以使用jquery-form.js插件来实现,方便快捷。
一、举个栗子
1.先下载 JQuery-form.js文件并引入,也可以使用CDN,因为是jquery插件,所以需要先引入jquery。
2.html 部分:
<form action='' enctype="multipart/form-data" method="post" name="fileForm"> <input type="file" class="file" name="filename"> </form> <button class="btn btn-primary" onclick="subimtBtn();">提交</button>
3.js部分:
function subimtBtn() { var form = $("form[name=fileForm]"); var options = { url:'/upload', //上传文件的路径 type:'post', success:function(data){ console.log(data); //.... //异步上传成功之后的操作 } }; form.ajaxSubmit(options); }
这样异步上传就完成了,至于后台对上传的文件的获取,跟前台直接提交表单上传文件的方法是一样的。
二、进一步
"htmlcode">
<label for="upload"> <img src="/UploadFiles/2021-04-02/upload.png">啊,不对,上面的写法依然不能兼容IE 8,再改改:
<label for="upload"> <input type="file" id="upload" class="file" name="filename" style='opacity:0;filter:alpha(opacity=0);'> </label>嗯,就是这样,至于那个好看的点击上传的图片,就作为label元素的背景吧。
相信我,这样真的可以了,兼容IE 8完全没问题。
三、更进一步
可能你还需要判断一下上传的文件类型啥的,比如只让上传excel文件,那请这样写:
$(".file").bind("change",function(){ var fileType = $(this).val().substring($(this).val().lastIndexOf(".") + 1); if(fileType != "xls" && fileType != "xlsx"){ alert("只能上传excel文件"); } });四、小结
嗯,也没啥可小结的,其实form.js是一个全,面支持表单的jQuery插件,有很多表单相关的给你,本篇只是介绍了其中一种功能的用法而已,其他更多的用法,请参照https://github.com/jquery-form/form官方文档。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 曾轶可.2011-一只猫的旅行【天娱传媒】【WAV+CUE】
- 黑神话悟空上品狼刺客精魄获取方法一览|上品狼刺客精魄收集攻略
- 视觉小说《神椿市建设中REGENERATE》将于2025年2月20日发售
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】