You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
4.0 KiB

3 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <style type="text/css">
  8. img:not([src]) {
  9. display: none;
  10. }
  11. .file {
  12. position: relative;/*绝对定位!*/
  13. display: inline-block;/*设置为行内元素*/
  14. background: #D0EEFF;
  15. border: 1px solid #99D3F5;
  16. border-radius: 4px;
  17. padding: 4px 12px;
  18. overflow: hidden;
  19. color: #1E88C7;
  20. text-decoration: none;
  21. text-indent: 0;
  22. line-height: 20px;
  23. }
  24. .file input {
  25. position: absolute;/*相对定位*/
  26. right: 0;
  27. top: 0;
  28. opacity: 0;/*将上传组件设置为透明的*/
  29. font-size: 100px;
  30. }
  31. .file:hover {
  32. background: #AADDFF;
  33. border-color: #78C3F3;
  34. color: #004974;
  35. text-decoration: none;
  36. }
  37. </style>
  38. <body>
  39. <form action="http://106.75.224.103:8000/uploadfiles/" enctype="multipart/form-data" method="post" target="frameName">
  40. <a href="javascript:;" class="file">选择图像
  41. <input name="files" type="file" id="uploadImg" onchange="xmTanUploadImg(this)" >
  42. </a>
  43. <a href="javascript:;" class="file">上传图像
  44. <input type="submit">
  45. </a>
  46. <a href="javascript:void()" download="picture.jpg" id="Download"class = "file">转换下载</a>
  47. </form>
  48. <p hidden>
  49. <iframe src="" frameborder="0" name="frameName" display:none></iframe>
  50. <p>
  51. <table><tr>
  52. <td> <img src="" id="selectImg" alt = "" width="500">
  53. </td>
  54. <td> <img src="" id="transformed" alt = ""width="500" >
  55. </td>
  56. </tr></table>
  57. <p hidden>
  58. <a href="javascript:void()" download="picture.jpg" id="xmTanDownload">点此下载</a>
  59. </p>
  60. </body>
  61. <script type="text/javascript">
  62. function getBase64(imgUrl) {
  63. window.URL = window.URL || window.webkitURL;
  64. var xhr = new XMLHttpRequest();
  65. xhr.open("get", imgUrl, true);
  66. xhr.responseType = "blob";
  67. xhr.onload = function () {
  68. if (this.status == 200) {
  69. var blob = this.response;
  70. console.log("blob", blob)
  71. let oFileReader = new FileReader();
  72. oFileReader.onloadend = function (e) {
  73. let base64 = e.target.result;
  74. var trans_img = document.getElementById("transformed");
  75. trans_img.src = e.target.result;
  76. console.log( base64)
  77. var Download = document.getElementById("Download");
  78. Download.setAttribute("href",base64); //给a标签设置href
  79. };
  80. oFileReader.readAsDataURL(blob);
  81. }
  82. }
  83. xhr.send();
  84. }
  85. var origin_url = "";
  86. function xmTanUploadImg(obj) {
  87. var file = obj.files[0];
  88. var reader = new FileReader();
  89. reader.readAsDataURL(file);
  90. reader.onload = function (e) { //成功读取文件
  91. var img = document.getElementById("selectImg");
  92. img.src = e.target.result; //或 img.src = this.result / e.target == this
  93. //实现点击下载图片功能
  94. var xmTanDownload = document.getElementById("xmTanDownload");
  95. xmTanDownload.setAttribute("href", e.target.result); //给a标签设置href
  96. getBase64("http://106.75.224.103:8000/download/"+file.name);
  97. };
  98. }
  99. var pullfiles=function(){
  100. // 获取到input元素
  101. var fileInput = document.querySelector("#myfiles");
  102. var files = fileInput.files;
  103. // 获取到所选文件数量
  104. var fl=files.length;
  105. var i=0;
  106. while ( i < fl) {
  107. var file = files[i];
  108. alert(file.name);
  109. i++;
  110. }
  111. }
  112. </script>
  113. </html>