文件上传封装

网友投稿 945 2022-11-25

文件上传封装

文件上传封装

1.文件上传样式与功能

1.1.文件上传的表现

文件上传控件的代码比较简单,功能都是浏览器封装好的,实际上也没啥不好的,就是难看

你做出来这个样子,产品经理肯定跟你急!!

代码也蛮容易的,如下:

1

不多说了,反正我自己都看不过去(公司没专职产品经理,我是个混合职业!)

1.2.需求描述

2.封装思路

2.1.隐藏 file 控件

第一反应是style=“display:none”

然而网上搜了一下,竟然很多人说style="opacity: 0",然后将制作后的控件的z-index提前,

同时调整相对位置,将原控件覆盖。

提供这种方案的,你有病么?哪里抄的?透明度为0但是还占位,东西还存在,还要写很多内容

来调整位置。。。

脑袋有泡。

2.2.click事件联动调用

隐藏的type=“file”的input元素,然后调用其click事件,这样就能够完成上传功能。

2.3.上传的文件路径显示

文件是否选择成功,选择的什么文件,需要有一个“空间”来接收并显示,浏览器自身的上传控件后面,

会在选择了文件以后,显示文件名的。

使用console.log($("#fileInput").val()),和console.log($("#fileInput"))打印的内容如下图:

展开jquery对象后,在value属性中找到了上述信息,如下图:

因此获取文件名也不是啥难事了。

3.代码

3.1.HTML代码如下:

1         2

3
4 5 6 7 8 9 10 11 12
13

3.2.JS代码如下:

1      $(function() { 2   fileUploadListener("fileUploadList"); //初始化- 3 }) 4 /** 5 * - 6 */ 7 function fileUploadListener(id) { 8 $("#" + id + " .btn").unbind("click"); //移除- 9 //文本框绑定-10 $("#" + id + " .fileUpload").change(function() {11 $(this).next().next().val($(this).val());12 })13 //选择文件按钮-14 $("#" + id + " .chooseFile").click(function() {15 $(this).parent().prev().click();16 console.log($(this).parent().prev())17 });18 //修改按钮-19 $("#" + id + " .modifyChooseFile").click(function() {20 $(this).parent().prev().click();21 console.log($(this).parent().prev())22 });23 //上传按钮-24 $("#" + id + " .fileUploadSubmit").click(function() {25 var dom = $(this).parent().prev();26 testUpload(dom);27 });28 }

3.3.异步文件上传代码如下:

代码自己看,反正内容不多!!

4.效果

好歹能看了,css自己改去吧。文件已经躺在本地了!

以上!!

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:vue3 reactive函数用法
下一篇:快速获取url中的参数值
相关文章

 发表评论

暂时没有评论,来抢沙发吧~