前端经验_上传文件

￡神魔★判官ぃ 2022-05-21 04:38 223阅读 0赞

如果我们上传文件，不用框架自己写，用到`<input tyrpe="file">`

具体的操作呢？  
`<input tipe=file >`的默认效果是：  
![这里写图片描述][70]  
可以看出真的是非常的丑，我们想要定义自己的样式。

首先我们要定义一个按钮，用来选择文件，  
`<input type="button" class="select ">` 给这个按钮加一个好看的样式

`<input type="file" class="file">`还是需要这个文件选择功能的，样式太丑，我们把它隐藏 `.file{opacity:0;}`，让它定位到我们自制的按钮select下，点击select实际上触发的这个隐藏的按钮。

当然它自带的val:未选择任何文件，我们可以用一个输入框来显示内容

<input type="text" class="txt">     txt.val = .file.val;

具体操作如下：  
![这里写图片描述][70 1]  
JS：让原始的file文件的value值显示在我们定义的输入框中  
![这里写图片描述][70 2]  
如此便成功啦！效果如下：  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]

小技巧：

1.首先我们隐藏的原始按钮，要和我们定义的选择按钮在同一位置，这样我们点击我们定义的按钮，实际上点击的是隐藏的原始按钮，

为了防止点击别处也会弹出选择文件，我们要定义原始按钮和我们定义的按钮一样大小，就不会出现这种bug了。

2.我们定义输入框来显示文件的名字，默认情况下是由带路径地址的，所以我们要处理一下再显示：

var arr = $(this).val().split('\\');
    
           var filename = arr[arr.length - 1];
    
           $('#txt').val(filename)

3.jquery 事件触发对象当指向自己的时候，用的是$(this)，而原生JS是直接的this。

[70]: /images/20220521/983e949f85fd4036a22dc3d1ed8252ef.png
[70 1]: /images/20220521/da717aaacbcd4adc82beea4d6337667b.png
[70 2]: /images/20220521/149094cb9a244501b27f6a4976d7164d.png
[70 3]: /images/20220521/be965b41ed44452299d0af51b6b46d1b.png
[70 4]: /images/20220521/af2cf8ef35f94b8f9b4e1f5a1fa9b8f5.png