|
|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
-
- <style type="text/css">
- img:not([src]) {
- display: none;
- }
- .file {
- position: relative;/*绝对定位!*/
- display: inline-block;/*设置为行内元素*/
- background: #D0EEFF;
- border: 1px solid #99D3F5;
- border-radius: 4px;
- padding: 4px 12px;
- overflow: hidden;
- color: #1E88C7;
- text-decoration: none;
- text-indent: 0;
- line-height: 20px;
- }
- .file input {
- position: absolute;/*相对定位*/
- right: 0;
- top: 0;
- opacity: 0;/*将上传组件设置为透明的*/
- font-size: 100px;
- }
- .file:hover {
- background: #AADDFF;
- border-color: #78C3F3;
- color: #004974;
- text-decoration: none;
- }
- </style>
- <body>
- <form action="http://106.75.224.103:8000/uploadfiles/" enctype="multipart/form-data" method="post" target="frameName">
- <a href="javascript:;" class="file">选择图像
-
- <input name="files" type="file" id="uploadImg" onchange="xmTanUploadImg(this)" >
- </a>
- <a href="javascript:;" class="file">上传图像
-
-
- <input type="submit">
- </a>
- <a href="javascript:void()" download="picture.jpg" id="Download"class = "file">转换下载</a>
-
- </form>
-
-
- <p hidden>
-
- <iframe src="" frameborder="0" name="frameName" display:none></iframe>
- <p>
-
- <table><tr>
- <td> <img src="" id="selectImg" alt = "" width="500">
- </td>
- <td> <img src="" id="transformed" alt = ""width="500" >
- </td>
- </tr></table>
-
-
- <p hidden>
- <a href="javascript:void()" download="picture.jpg" id="xmTanDownload">点此下载</a>
- </p>
-
- </body>
-
-
- <script type="text/javascript">
-
-
- function getBase64(imgUrl) {
- window.URL = window.URL || window.webkitURL;
- var xhr = new XMLHttpRequest();
- xhr.open("get", imgUrl, true);
- xhr.responseType = "blob";
- xhr.onload = function () {
- if (this.status == 200) {
- var blob = this.response;
- console.log("blob", blob)
- let oFileReader = new FileReader();
- oFileReader.onloadend = function (e) {
- let base64 = e.target.result;
-
- var trans_img = document.getElementById("transformed");
- trans_img.src = e.target.result;
- console.log( base64)
- var Download = document.getElementById("Download");
- Download.setAttribute("href",base64); //给a标签设置href
- };
- oFileReader.readAsDataURL(blob);
- }
- }
- xhr.send();
-
- }
-
-
- var origin_url = "";
-
- function xmTanUploadImg(obj) {
- var file = obj.files[0];
- var reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = function (e) { //成功读取文件
- var img = document.getElementById("selectImg");
- img.src = e.target.result; //或 img.src = this.result / e.target == this
-
- //实现点击下载图片功能
- var xmTanDownload = document.getElementById("xmTanDownload");
- xmTanDownload.setAttribute("href", e.target.result); //给a标签设置href
- getBase64("http://106.75.224.103:8000/download/"+file.name);
- };
- }
-
- var pullfiles=function(){
-
-
-
- // 获取到input元素
- var fileInput = document.querySelector("#myfiles");
- var files = fileInput.files;
-
- // 获取到所选文件数量
- var fl=files.length;
- var i=0;
-
- while ( i < fl) {
- var file = files[i];
- alert(file.name);
- i++;
- }
- }
-
-
- </script>
- </html>
|
