前端经验_上传文件

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

具体的操作呢？
<input tipe=file >的默认效果是：

可以看出真的是非常的丑，我们想要定义自己的样式。

首先我们要定义一个按钮，用来选择文件，
<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;

具体操作如下：

JS：让原始的file文件的value值显示在我们定义的输入框中

如此便成功啦！效果如下：

小技巧：

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

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

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

       var arr = $(this).val().split('\\');

       var filename = arr[arr.length - 1];

       $('#txt').val(filename)

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