143 řádky
4.0 KiB

<!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>