DDR爱好者之家 Design By 杰米
做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容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官方文档。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]