前端获取文件input框的美化操作

前面我们说了一种利用input框和js的当时获取本地文件内容的情况-详细信息参考 2017年11月8日前端用js获取本地文件的内容   

以上方式获取的按钮是系统默认的显示，有时候我们需要对按钮的外观进行美化。具体的方式如下：

<a href="javascript:;" >
<input  type="file"  οnchange="upload(this)" />
<img src="assets/common/img/riskControl/icon_upload_small.png" />
<span class="upload_common_span" id="resultsapn_upload_userid">点击这里上传文件</span>
</a>

 js代码没有变化，这里只讲html的代码， input 还是需要保持不变，添加了a标签和img和span标签 ，img负责修改上传前后的图片显示问题，你可以根据自己的喜好选择上传前后的图片，span用来显示前后的提示信息，这些都是根据需要可以删除掉的

唯一不能删除的就是a和input 。其他的根据情况显示即可。

 

转载于:https://www.cnblogs.com/wujiajia/p/7902601.html