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.
229 lines
7.8 KiB
229 lines
7.8 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>上传文件</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script>
|
|
function parse_url(url) {
|
|
var pattern = /(\w+)=([^\#&]*)/ig;
|
|
var parames = {};
|
|
url.replace(pattern, function (attr, key, value) {
|
|
parames[key] = decodeURI(value);
|
|
});
|
|
return parames;
|
|
};
|
|
window.params = parse_url(window.location.href);
|
|
var Cookie = {
|
|
get: function (k) {
|
|
return ((new RegExp(["(?:; )?", k, "=([^;]*);?"].join(""))).test(document.cookie) && RegExp["$1"]) || "";
|
|
},
|
|
set: function (k, v, e, d) {
|
|
var date = new Date();
|
|
var expiresDays = e || 30;
|
|
date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000);
|
|
document.cookie = k + "=" + v + "; expires=" + (e != '' ? date.toGMTString() : "GMT_String") + ";path=/;domain=" + (d || document.domain);
|
|
|
|
},
|
|
del: function (k, d) {
|
|
document.cookie = k + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;domain=" + (d || _options.domain);
|
|
document.cookie = k + "=v; expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/";
|
|
}
|
|
};
|
|
window.Cookie = Cookie;
|
|
if (params._educoder_session_login) {
|
|
Cookie.set("_educoder_session_login", params._educoder_session_login)
|
|
Cookie.set("_educoder_session", params._educoder_session)
|
|
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
const API_SERVER = decodeURIComponent(params.api);
|
|
if (location.href.startsWith("http")) {
|
|
let api = 'https://test-data.educoder.net'
|
|
const domain = document.domain
|
|
let str = document.domain.split(".")
|
|
str[0] = str[0] + "-data";
|
|
// if (domain !== 'localhost') {
|
|
// api = api.replace("test-data.educoder.net", str.join("."))
|
|
// }
|
|
return api
|
|
}
|
|
function fileSelected() {
|
|
document.body.focus()
|
|
var count = document.getElementById('fileToUpload').files.length;
|
|
document.getElementById('details').innerHTML = "";
|
|
for (var index = 0; index < count; index++) {
|
|
var file = document.getElementById('fileToUpload').files[index];
|
|
var fileSize = 0;
|
|
if (file.size > 1024 * 1024)
|
|
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
|
|
else
|
|
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
|
|
document.getElementById('details').innerHTML += '文件名: ' + file.name + '<br>大小: ' + fileSize + '<br>类型: ' + file.type;
|
|
document.getElementById('details').innerHTML += '<p>';
|
|
}
|
|
}
|
|
window.fileSelected = fileSelected
|
|
|
|
function uploadFile() {
|
|
var fd = new FormData();
|
|
var count = document.getElementById('fileToUpload').files.length;
|
|
if (count <= 0) {
|
|
alert("请先选择文件")
|
|
return;
|
|
}
|
|
for (var index = 0; index < count; index++) {
|
|
var file = document.getElementById('fileToUpload').files[index];
|
|
fd.append('editormd-image-file', file)
|
|
fd.append('file_param_name', 'editormd-image-file')
|
|
fd.append('byxhr', 'true')
|
|
fd.append('hash_val', params.key)
|
|
}
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.withCredentials = true
|
|
xhr.upload.addEventListener("progress", uploadProgress, false);
|
|
xhr.addEventListener("load", uploadComplete, false);
|
|
xhr.addEventListener("error", uploadFailed, false);
|
|
xhr.addEventListener("abort", uploadCanceled, false);
|
|
|
|
xhr.open("POST", API_SERVER + "/api/attachments.json");
|
|
xhr.send(fd);
|
|
}
|
|
|
|
function uploadProgress(evt) {
|
|
if (evt.lengthComputable) {
|
|
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
|
|
document.getElementById('progress').innerHTML = percentComplete.toString() + '%';
|
|
}
|
|
else {
|
|
document.getElementById('progress').innerHTML = 'unable to compute';
|
|
}
|
|
}
|
|
function uploadComplete(evt) {
|
|
/* This event is raised when the server send back a response */
|
|
alert(evt.target.responseText);
|
|
}
|
|
|
|
function uploadFailed(evt) {
|
|
alert("There was an error attempting to upload the file.");
|
|
}
|
|
|
|
function uploadCanceled(evt) {
|
|
alert("The upload has been canceled by the user or the browser dropped the connection.");
|
|
}
|
|
</script>
|
|
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
|
|
<div class="wrapper">
|
|
<div class="file-upload">
|
|
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" />
|
|
<i class="fa fa-arrow-up">
|
|
<svg t="1667903907040" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="2711" width="100" height="100">
|
|
<path
|
|
d="M153.6 902.656a32.256 32.256 0 0 1 0-64h716.8a32.256 32.256 0 0 1 0 64z m390.656-665.6v494.592a32.256 32.256 0 0 1-64 0V237.056L236.032 481.28a31.744 31.744 0 1 1-45.056-45.056l294.912-295.424a36.864 36.864 0 0 1 51.2 0l294.912 294.912a31.744 31.744 0 0 1-45.056 45.056z"
|
|
fill="#fff" p-id="2712"></path>
|
|
</svg>
|
|
</i>
|
|
</div>
|
|
</div>
|
|
<!-- <div>
|
|
<label for="fileToUpload">选择文件</label><br />
|
|
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*"
|
|
capture="camera" />
|
|
</div> -->
|
|
<div id="details"></div>
|
|
<div>
|
|
<input type="button" onclick="uploadFile()" value="开始上传" />
|
|
</div>
|
|
<div id="progress"></div>
|
|
</form>
|
|
<style>
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
|
|
background-color: #2590EB;
|
|
height: 100%;
|
|
}
|
|
|
|
form {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
}
|
|
|
|
#details,
|
|
#progress {
|
|
color: white;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.file-upload {
|
|
|
|
height: 200px;
|
|
width: 200px;
|
|
border-radius: 100px;
|
|
position: relative;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
border: 4px solid #FFFFFF;
|
|
overflow: hidden;
|
|
background-image: linear-gradient(to bottom, #2590EB 50%, #FFFFFF 50%);
|
|
background-size: 100% 200%;
|
|
transition: all 1s;
|
|
color: #FFFFFF;
|
|
font-size: 100px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.file-upload:hover {
|
|
|
|
/* backgrounXor: #2590EB; */
|
|
|
|
}
|
|
|
|
input[type='file'] {
|
|
|
|
height: 200px;
|
|
width: 200px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
input[type="button"] {
|
|
background: none;
|
|
color: white;
|
|
font-size: 16px;
|
|
margin-top: 20px;
|
|
appearance: none;
|
|
border: none;
|
|
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html> |