zoukankan      html  css  js  c++  java
  • 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片(可实现多张图片上传和预览移除)

    一,基本原理:

      通过表单的input type="file"控件可以实现本地文件的选择,然后通过form表单提交到服务器端实现上传。注意此时表单需要添加内容属性: enctype="multipart/form-data",并且该form表单是post方式提交。

    示例一:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
     6     <title>上传图片预览示例一</title>
     7     <meta name="author" content="熊仔其人-2017年3月3日" />
     8     <meta name="keywords" content="" />
     9     <meta name="description" content="示例一展示了前端图片上传预览基本功能的实现" />
    10     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    11 </head>
    12 <body>
    13     <form id="Form1" method="post" enctype="multipart/form-data">
    14         <input id="file_upload" type="file" accept="image/jpeg,image/png,image/gif" />
    15         <div class="image_container">
    16             <img id="preview" style="height:130px;117px;border-0px;" />
    17         </div>
    18     </form>
    19 
    20     <script type="text/javascript">
    21         $(function () {
    22             $("#file_upload").change(function () {
    23                 var $file = $(this);
    24                 var fileObj = $file[0];
    25                 var windowURL = window.URL || window.webkitURL;
    26                 var dataURL;
    27                 var $img = $("#preview");
    28 
    29                 if (fileObj && fileObj.files && fileObj.files[0]) {
    30                     dataURL = windowURL.createObjectURL(fileObj.files[0]);
    31                     $img.attr('src', dataURL);
    32                 } else {
    33                     dataURL = $file.val();
    34                     var imgObj = document.getElementById("preview");
    35                     // 两个坑:
    36                     // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
    37                     // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
    38                     imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    39                     imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
    40 
    41                 }
    42             });
    43         });
    44     </script>
    45 </body>
    46 </html>

      示例一展示了前端图片上传预览基本功能的实现。其好处主要是选择本地图片在前端直接预览,而不需要先上传到服务器。缺点是该预览方式需要依赖浏览器兼容支持(目前实际测试IE7以上,Chrome 52以上,及Firefox 大多数浏览器都支持)。

    二,实际运用多张图片上传和预览,可设置默认图片,且可移除选择

      在实际运用中可能需要多张图片上传和预览,并且实现可移除选择,可以点击设置默认图片等功能。

    示例二:

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
      6     <title>上传图片预览示例二</title>
      7     <meta name="author" content="熊仔其人-2017年3月3日" />
      8     <meta name="keywords" content="" />
      9     <meta name="description" content="实际运用多张图片上传和预览,可设置默认图片,且可移除选择" />
     10 
     11     <style type="text/css">
     12         .image_container {
     13             display: inline-block;
     14             float: left;
     15         }
     16 
     17             #tdRoomPicture a, .image_container a {
     18                 text-align: center;
     19                 vertical-align: middle;
     20                 text-decoration: none;
     21             }
     22 
     23         a.addImg {
     24             width: 100px;
     25             height: 100px;
     26             line-height: 100px;
     27             display: inline-block;
     28             font-size: 50px;
     29             background-color: #dae6f3;
     30         }
     31 
     32         .image_container a.previewBox {
     33             background-color: #dae6f3;
     34             margin: 0 3px 0 0;
     35             display: none;
     36             /*display: inline-block;*/
     37         }
     38 
     39         .image_container .delImg {
     40             position: absolute;
     41             color: #f00;
     42             margin: 0 0 0 84px;
     43             font-size: 16px;
     44             width: 16px;
     45             height: 16px;
     46             line-height: 16px;
     47             text-align: center;
     48             vertical-align: middle;
     49             background-color: #c3c3c3;
     50         }
     51 
     52         .defaultImg {
     53             border: 1px solid #f90303;
     54         }
     55 
     56             .defaultImg:before {
     57                 content: "默认图片";
     58                 float: left;
     59                 position: absolute;
     60                 color: #f90303;
     61                 font-size: 14px;
     62             }
     63 
     64             .defaultImg:after {
     65                 content: "";
     66             }
     67     </style>
     68 
     69     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
     70 
     71 </head>
     72 <body>
     73     <form id="Form1" method="post" enctype="multipart/form-data">
     74         <div id="tdRoomPicture">
     75 
     76             <!--<div class="image_container" data-picId="1">
     77                 <input id="RoomInfo1_RoomPicture1" name="RoomInfo1_RoomPicture1" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" />
     78                 <input id="RoomInfo1_RoomPictureHidDefault1" name="RoomInfo1_RoomPictureHidDefault1" type="hidden" value="0" />
     79                 <a href="javascript:;" id="previewBox1" class="previewBox defaultImg">
     80                     <div class="delImg">&times;</div>
     81                     <img id="preview1" style="height: 100px;  100px; border- 0px;" />
     82                 </a>
     83             </div>-->
     84 
     85             <a href="javascript:;" class="addImg" data-picid="0">+</a>
     86         </div>
     87     </form>
     88 
     89     <script type="text/javascript">
     90         $(function () {
     91             var picId = 0;
     92             var pictureUploading = false;
     93             $("#Form1").delegate(".addImg", "click", function () {
     94                 if (!!pictureUploading) return;
     95                 pictureUploading = true;
     96 
     97                 picId = parseInt($(this).attr("data-picId"));
     98                 picId++;
     99                 $(this).attr("data-picId", picId);
    100 
    101                 $(this).before("<div class="image_container" data-picId="" + picId + "">"
    102                                 + "<input id="RoomInfo1_RoomPicture" + picId + "" name="RoomInfo1_RoomPicture" + picId + "" type="file" accept="image/jpeg,image/png,image/gif" style="display: none;" />"
    103                                 + "<input id="RoomInfo1_RoomPictureHidDefault" + picId + "" name="RoomInfo1_RoomPictureHidDefault" + picId + "" type="hidden" value="0" />"
    104                                 + "<a href="javascript:;" id="previewBox" + picId + "" class="previewBox">"
    105                                     + "<div class="delImg">&times;</div>"
    106                                     + "<img id="preview" + picId + "" style="height:100px;100px;border-0px;" />"
    107                                 + "</a>"
    108                             + "</div>");
    109 
    110                 $("#RoomInfo1_RoomPicture" + picId).change(function () {
    111                     var $file = $(this);
    112                     var fileObj = $file[0];
    113                     var windowURL = window.URL || window.webkitURL;
    114                     var dataURL;
    115 
    116                     $("#previewBox" + picId).css("display", "inline-block");
    117                     var $img = $("#preview" + picId);
    118                     //var $img = $("#preview1");
    119 
    120                     if (fileObj && fileObj.files && fileObj.files[0]) {
    121                         dataURL = windowURL.createObjectURL(fileObj.files[0]);
    122                         $img.attr('src', dataURL);
    123                     } else {
    124                         dataURL = $file.val();
    125                         var imgObj = $img; //document.getElementById("preview");
    126                         // 两个坑:
    127                         // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
    128                         // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
    129                         imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    130                         imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
    131                     }
    132 
    133                     if (1 === picId) {
    134                         defaultImg(picId, true);
    135                     }
    136                     pictureUploading = false;
    137 
    138                 });
    139                 $("#RoomInfo1_RoomPicture" + picId).click();
    140 
    141                 //设置默认图片
    142                 $(".previewBox").click(function () {
    143                     var _picId = parseInt($(this).parent(".image_container").attr("data-picId"));
    144                     $(".image_container").each(function () {
    145                         var i = parseInt($(this).attr("data-picId"));
    146                         if (i === _picId)
    147                             defaultImg(i, true);
    148                         else
    149                             defaultImg(i, false);
    150                     });
    151                 });
    152 
    153                 //删除上传的图片
    154                 $(".delImg").click(function () {
    155                     var _picId = parseInt($(this).parent().parent(".image_container").attr("data-picId"));
    156                     $(".image_container[data-picid='" + _picId + "']").remove();
    157                     if ($(".image_container").length > 0 && $(".defaultImg").length < 1) {
    158                         $(".image_container").each(function () {
    159                             var i = parseInt($(this).attr("data-picId"));
    160                             defaultImg(i, true);
    161                             return false;
    162                         });
    163                     }
    164 
    165                 });
    166 
    167             });
    168 
    169             function defaultImg(picId, selected) {
    170                 if (!picId) return;
    171                 if (!!selected) {
    172                     $("#RoomInfo1_RoomPictureHidDefault" + picId).val(1);
    173                     $("#previewBox" + picId).addClass("defaultImg");
    174                 }
    175                 else {
    176                     $("#RoomInfo1_RoomPictureHidDefault" + picId).val(0);
    177                     $("#previewBox" + picId).removeClass("defaultImg");
    178                 }
    179             }
    180         });
    181     </script>
    182 </body>
    183 </html>

    示例二实际测试可用。

  • 相关阅读:
    容器跨主机网络通信学习笔记(以Flannel为例)
    Kubernetes控制器Job和CronJob
    记一次使用Flannel插件排错历程
    Kubernetes控制器Deployment
    Kubernetes如何通过StatefulSet支持有状态应用?
    react18 来了,我 get 到...
    gojs 实用高级用法
    vuecli3 vue2 保留 webpack 支持 vite 成功实践
    calibre 报错 This application failed to start because no Qt platform plugin could be initialized. Reinstalling the application may fix this problem. 解决
    unable to recognize "*.yaml": no matches for kind "RoleBinding" in version "rbac.authorization.k8s.io/v1beta1"
  • 原文地址:https://www.cnblogs.com/xiongzaiqiren/p/6495240.html
Copyright © 2011-2022 走看看