jq图片上传实现

最新推荐文章于 2025-07-09 16:36:03 发布

monkey_zero

最新推荐文章于 2025-07-09 16:36:03 发布

阅读量8.1k

点赞数 1

分类专栏： jq 文章标签： jq

jq 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的图片上传功能，并通过jQuery实现了点击预览的效果。通过隐藏实际的文件输入框并利用点击事件触发其打开，使得用户体验更加友好。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <script type="text/javascript" src="jq路径" ></script>
       <title>确认订单</title>
       <style>
           .pic{
               width: 100px;
               height: 100px;
               background-image: url(图片路径);
               background-size: cover;

           }
       </style>
   </head>
   <body>
       <div>
      <img class="pic">
      <input class="upload" name="file" type="file" style="display: none"/>
</div>

</body>
</html>
<script>
       $(function() {
          $(".pic").click(function () {
            $(this).parent().find(".upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
              $(this).parent().find(".upload").on("change",function(){
              var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
              if (objUrl) {
                $(this).parent().find(".pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
              }
            });
          });
       });

       function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
       }
</script>
   </body>
</html>