图片预览

「爱情、让人受尽委屈。」 2021-12-22 09:21 832阅读 0赞

定制上传按钮：

ExpandedBlockStart.gif

复制代码

  1. <div
  2.                         style="position: relative;display: inline-block;height: 50px;min-width: 300px;overflow: hidden;">
  3.                     <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;">
  4.                         <i class="fa fa-cloud-upload" aria-hidden="true"></i>
  5.                         <span>点击上传文件</span>
  6.                     </div>
  7.                     <input name="customer_excel" type="file" id="excelFile"
  8.                            style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
  9.                 </div>
  12. $(function () {
  13.             $('#excelFile').change(function (e) {
  14.                 var fileName = e.currentTarget.files[0].name;
  15.                 $(this).prev().find('span').text(fileName);
  16.             })
  17.         })

复制代码

ExpandedBlockStart.gif

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <form method="POST" enctype="multipart/form-data">
  10.         {% csrf_token %}
  11.         <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
  12.             <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
  13.                  src="/static/imgs/default.png">
  14.             <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;" id="avatarImg"
  15.                    name="avatar_img" type="file" class="img-file"/>
  16.         </div>
  17.         <div>点击图片更换(<a href="#">撤销</a>)</div>
  19.         <p>
  20.             <input type="text" placeholder="用户名">
  21.         </p>
  22.         <p>
  23.             <input type="text" placeholder="密码">
  25.         </p>
  26.     </form>
  27. </div>
  28. </body>
  29. </html>

复制代码

预览

ExpandedBlockStart.gif

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <form method="POST" enctype="multipart/form-data">
  10.         {% csrf_token %}
  11.         <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
  12.             <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
  13.                  src="/static/imgs/default.png">
  14.             <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
  15.                    name="avatar" type="file" class="img-file"/>
  16.         </div>
  17.         <div>点击图片更换(<a href="#">撤销</a>)</div>
  19.         <p>
  20.             <input type="text" placeholder="用户名">
  21.         </p>
  22.         <p>
  23.             <input type="text" placeholder="密码">
  24.         </p>
  25.         <input type="submit" value="提交">
  26.     </form>
  27.     <script src="/static/jquery-1.12.4.js"></script>
  28.     <script>
  29.         $(function () {
  30.             bindChangeAvatar1();
  31.         });
  33.         function bindChangeAvatar1() {
  34.             $('#avatarImg').change(function () {
  35.                 var file_obj = $(this)[0].files[0];
  36.                 var blob = window.URL.createObjectURL(file_obj);
  37.                 document.getElementById('previewImg').src = blob;
  38.                 $('#previewImg').load(function () {
  39.                     window.URL.revokeObjectURL(blob);
  40.                 })
  41.             })
  42.         }
  43.     </script>
  44. </div>
  45. </body>
  46. </html>

复制代码

ExpandedBlockStart.gif

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <form method="POST" enctype="multipart/form-data">
  10.         {% csrf_token %}
  11.         <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
  12.             <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
  13.                  src="/static/imgs/default.png">
  14.             <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
  15.                    name="avatar" type="file" class="img-file"/>
  16.         </div>
  17.         <div>点击图片更换(<a href="#">撤销</a>)</div>
  19.         <p>
  20.             <input type="text" placeholder="用户名">
  21.         </p>
  22.         <p>
  23.             <input type="text" placeholder="密码">
  24.         </p>
  25.         <input type="submit" value="提交">
  26.     </form>
  27.     <script src="/static/jquery-1.12.4.js"></script>
  28.     <script>
  29.         $(function () {
  30.             bindChangeAvatar2();
  31.         });
  33.         function bindChangeAvatar2() {
  34.             $('#avatarImg').change(function () {
  35.                 var file_obj = $(this)[0].files[0];
  36.                 var reader = new FileReader();
  37.                 reader.readAsDataURL(file_obj);
  38.                 reader.onload = function (e) {
  39.                     $('#previewImg')[0].src = this.result;
  40.                 };
  41.             })
  42.         }
  43.     </script>
  44. </div>
  45. </body>
  46. </html>

复制代码

ExpandedBlockStart.gif

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <form method="POST" enctype="multipart/form-data">
  10.         {% csrf_token %}
  11.         <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
  12.             <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
  13.                  src="/static/imgs/default.png">
  14.             <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
  15.                    name="avatar" type="file" class="img-file"/>
  16.         </div>
  17.         <div>点击图片更换(<a href="#">撤销</a>)</div>
  19.         <p>
  20.             <input type="text" placeholder="用户名">
  21.         </p>
  22.         <p>
  23.             <input type="text" placeholder="密码">
  24.         </p>
  25.         <input type="submit" value="提交">
  26.     </form>
  27.     <script src="/static/jquery-1.12.4.js"></script>
  28.     <script>
  29.         $(function () {
  30.             bindChangeAvatar3();
  31.         });
  33.         function bindChangeAvatar3() {
  34.             $('#avatarImg').change(function () {
  35.                 var file_obj = $(this)[0].files[0];
  36.                 var form = new FormData();
  37.                 form.add('img_upload', file_obj);
  38.                 $.ajax({
  39.                     url: '',
  40.                     data: form,
  41.                     processData: false,  // tell jQuery not to process the data
  42.                     contentType: false,  // tell jQuery not to set contentType
  43.                     success: function (arg) {
  44.                         // 给img标签设置src属性，预览
  45.                     }
  46.                 })
  47.             })
  48.         }
  49.     </script>
  50. </div>
  51. </body>
  52. </html>

复制代码

ExpandedBlockStart.gif

复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  10.     <div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
  11.         <iframe style="display: none;" id="upload_iframe" name="upload_iframe"></iframe>
  12.         <form method="POST" action="上传地址" enctype="multipart/form-data" target="upload_iframe">
  13.             <img style="height: 100%;width: 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
  14.                  src="/static/imgs/default.png">
  15.             <input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
  16.                    name="avatar" type="file" class="img-file"/>
  17.         </form>
  18.     </div>
  19.     <div>点击图片更换(<a href="#">撤销</a>)</div>
  21.     <form method="POST" enctype="multipart/form-data">
  22.         {% csrf_token %}
  23.         <p>
  24.             <input type="text" placeholder="图片路径">
  25.         </p>
  26.         <p>
  27.             <input type="text" placeholder="用户名">
  28.         </p>
  29.         <p>
  30.             <input type="text" placeholder="密码">
  31.         </p>
  32.         <input type="submit" value="提交">
  33.     </form>
  35.     <script src="/static/jquery-1.12.4.js"></script>
  36.     <script>
  37.         $(function () {
  38.             bindChangeAvatar4();
  39.         });
  41.         function bindChangeAvatar4() {
  42.             $('#avatarImg').change(function () {
  43.                 $(this).parent().submit();
  44.                 $('#upload_iframe').load(function () {
  45.                     var iframeContents = this.contentWindow.document.body.innerText;
  46.                     iframeContents = JSON.parse(iframeContents);
  47.                     if (iframeContents.status) {
  48.                         $('#previewImg').attr('src', '/' + iframeContents.data);
  49.                     }
  50.                 })
  52.             })
  53.         }
  54.     </script>
  55. </div>
  56. </body>
  57. </html>

复制代码

参考兼容性：

  • https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  • https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
  • https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

转载于:https://www.cnblogs.com/bai-max/p/9355845.html

发表评论

表情：
评论列表 （有 0 条评论，832人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uniapp预览图片

    一、需求 最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。 点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

    以你之姓@以你之姓@/ 0 赞/ 1400 阅读