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.
143 lines
4.0 KiB
143 lines
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>
|