小技巧实现修改input-file样式,代理上传

最新推荐文章于 2022-06-22 10:29:49 发布

系咩

最新推荐文章于 2022-06-22 10:29:49 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39650528/article/details/78645331

本文介绍了一种通过隐藏默认inputfile并自定义按钮样式的方法来实现文件上传功能。利用事件代理，点击自定义按钮时触发文件选择对话框，并能够显示所选文件的名称。为确保功能正确运行，文中特别强调了使用unbind()方法的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input file样式是不可以修改的,所以我们做到的是隐藏掉默认的input,

然后自己写一些按钮样式,用事件代理做点击事件完美解决;

//事件代理点击,获取file文件名;
$(document).on("click", ".fileinput>span", function() {
   $(".fileinput>input").click();
   var str = "";
   $("#upfile").unbind().on("change", function() {
      var obj = document.getElementById("upfile");
      var length = obj.files.length;
      console.log(length);
      if(length == 0) {
         str += '<i class="FileArea">' + 未选择任何文件 + '</i>';
      } else {
         for(var i = 0; i < length; i++) {
            $(".FileArea").html("");
            var temp = obj.files[i].name;
            console.log(temp);
            str += '<i class="FileArea">' + temp + '</i>';
         }
      }
      $(".fileinput").append(str);
   });

})