无需调用Flash,从课程平台上传附件,不必为了传作业多装一个浏览器!
目前為
// ==UserScript==
// @name 免Flash文件上传
// @name:en Upload without Flash
// @namespace https://greasyfork.org/zh-CN/users/605474
// @version 0.1
// @description 无需调用Flash,从课程平台上传附件,不必为了传作业多装一个浏览器!
// @description:en No need to call Flash, upload accessories from the course platform, do not have to make multiple browsers for the homework!
// @author Ziu
// @match *://cc.bjtu.edu.cn:81/*
// @match *://cc.bjtu.edu.cn:81/meol/common/hw/student/write.jsp?hwtid=*
// @icon https://gitee.com/ziuc/utool-filebed/raw/master//20210907-173652-0524.png
// @require http://libs.baidu.com/jquery/2.0.0/jquery.min.js
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
let frontTag = "<li><a id='add_button' title='上传作业' onclick=location='http://cc.bjtu.edu.cn:81/meol/common/hw/student/hwtask.jsp?tagbug=client&strStyle=new06'><span>上传作业</span></a></li>";
$('#tmenu').append(frontTag);
let uploadBox = "<tr><td><div style='margin-left: 10px'>上传附件:<div id='cssDiv' style='height: 100px; width: 300px; border: 1px dashed; border-radius:5px;'><div id='inputArea' title='拖拽文件以上传'><label for='currentFile'><div id='textShow' style='margin-top: 8px; text-align: center;'><p> </p><p>选择文件</p><p>(支持拖拽)</p><p> </p></div><input id='currentFile' type='file' multiple='multiple' style='display:none;' </input></label></div></div><div id='filenames' style='font-size: 13px; margin-top: 5px; margin-left: 10px'></div></div></td></tr>"
$('.infotable:last>tbody>tr:first').after(uploadBox);
// 文件点击上传
$('#currentFile').change(fileChangedByInput);
// 文件拖拽上传
$('#inputArea').on('dragover',function(event){
event.preventDefault()
}).on('drop',function(event){
event.preventDefault();
// 数据在event的dataTransfer对象中
for(let i=0;i<event.originalEvent.dataTransfer.files.length/2;i++){
let oData = new FormData();
let filelist = event.originalEvent.dataTransfer.files;
// 加filenames
for(let i=0;i<filelist.length;i++){
let item = filelist[i];
if(item.size<1000000){
$('#filenames').append('<div id="fileObject'+(i+1)+'"><a class="fileindex" style="background: #b5cce0">[*]</a><a class="filename" style="background: #b5cce0">'+item.name+' ('+(item.size/1024).toFixed(2)+'KB)'+'</a><p class="processBar" id="processBar'+(i+1)+'">上传进度:[0%]</p></div>');
}
else if(item.size>1000000&&item.size<1000000000){
$('#filenames').append('<div id="fileObject'+(i+1)+'"><a class="fileindex" style="background: #b5cce0">[*]</a><a class="filename" style="background: #b5cce0">'+item.name+' ('+(item.size/1048576).toFixed(2)+'MB)'+'</a><p class="processBar" id="processBar'+(i+1)+'">上传进度:[0%]</p></div>');
}
}
// 加上传按钮
$('#filenames').after("<div id='buttonDiv' style='font-size: 13px; margin-top: 10px'></div>");
$('#buttonDiv').append("<a id='uploadtrigger' title='上传' style='padding-top: 2.5px; padding-bottom: 2.5px; padding-right: 5px; padding-left: 5px; background-color: #c6f062; border: 1px solid; margin-left: 10px'>上传</a>");
$('#uploadtrigger').click(function (){
// 构造请求
let oData = new FormData();
for(let i=0;i<filelist.length;i++){
let currentfile = filelist[i];
uploadFile(currentfile).then(function(result){
oData.append('Filename',currentfile.name);
oData.append('Filedata',currentfile);
// 执行文件上传
let oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("POST", "http://cc.bjtu.edu.cn:81/meol/servlet/SerUpload");
oReq.upload.onprogress = progressFunction;
oReq.send(oData);
})
}
$('#buttonDiv').remove();
})
}
})
function fileChangedByInput(){
// 文件缓存出现改变 读取文件 将文件加入到缓存列表
let oData = new FormData();
let filelist = $('#currentFile')[0].files;
if($('#filenames>div').length>=1){
$('#filenames').empty();
for(let i=0;i<filelist.length;i++){
let item = filelist[i];
if(item.size<1000000){
$('#filenames').append('<div id="fileObject'+(i+1)+'"><a class="fileindex" style="background: #b5cce0">[*]</a><a class="filename" style="background: #b5cce0">'+item.name+' ('+(item.size/1024).toFixed(2)+'KB)'+'</a><p class="processBar" id="processBar'+(i+1)+'">上传进度:[0%]</p></div>');
}
else if(item.size>1000000&&item.size<1000000000){
$('#filenames').append('<div id="fileObject'+(i+1)+'"><a class="fileindex" style="background: #b5cce0">[*]</a><a class="filename" style="background: #b5cce0">'+item.name+' ('+(item.size/1048576).toFixed(2)+'MB)'+'</a><p class="processBar" id="processBar'+(i+1)+'">上传进度:[0%]</p></div>');
}
}
$('#buttonDiv').remove();
}
else {
for(let i=0;i<filelist.length;i++){
let item = filelist[i];
if(item.size<1000000){
$('#filenames').append('<div id="fileObject'+(i+1)+'"><a class="fileindex" style="background: #b5cce0">[*]</a><a class="filename" style="background: #b5cce0">'+item.name+' ('+(item.size/1024).toFixed(2)+'KB)'+'</a><p class="processBar" id="processBar'+(i+1)+'">上传进度:[0%]</p></div>');
}
else if(item.size>1000000&&item.size<1000000000){
$('#filenames').append('<div id="fileObject'+(i+1)+'"><a class="fileindex" style="background: #b5cce0">[*]</a><a class="filename" style="background: #b5cce0">'+item.name+' ('+(item.size/1048576).toFixed(2)+'MB)'+'</a><p class="processBar" id="processBar'+(i+1)+'">上传进度:[0%]</p></div>');
}
}
$('#buttonDiv').remove();
}
$('#filenames').after("<div id='buttonDiv' style='font-size: 13px; margin-top: 10px'></div>");
$('#buttonDiv').append("<a id='uploadtrigger' title='上传' style='padding-top: 2.5px; padding-bottom: 2.5px; padding-right: 5px; padding-left: 5px; background-color: #c6f062; border: 1px solid; margin-left: 10px'>上传</a>");
$('#uploadtrigger').click(function (){
// 构造请求
let oData = new FormData();
for(let i=0;i<filelist.length;i++){
let currentfile = filelist[i];
uploadFile(currentfile).then(function(result){
oData.append('Filename',currentfile.name);
oData.append('Filedata',currentfile);
// 执行文件上传
let oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("POST", "http://cc.bjtu.edu.cn:81/meol/servlet/SerUpload");
oReq.upload.onprogress = progressFunction;
oReq.send(oData);
})
}
$('#buttonDiv').remove();
})
}
function uploadFile(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
reader.readAsArrayBuffer(file)
reader.onload = function() {
resolve(this.result)
}
})
}
function reqListener() {
// 构建超链接 插入到编辑器
let constructor = '<p><a data-cke-saved-href="/meol/'+this.responseText+'" href="/meol/'+this.responseText+'">[附件]</a></p>'
// 遍历页面中iframe找到编辑器插入附件超链接
// 学习笔记中iframe为双层iframe嵌套
for(let i=0;i<document.getElementsByTagName("iframe").length;i++){
let tmpiframe = document.getElementsByTagName("iframe")[i].contentWindow;
let tmpDom = tmpiframe.document.getElementsByClassName('cke_show_borders');
if(tmpDom.length&&($(tmpDom).attr('spellcheck')==false)){
// 第一层iframe找到编辑器了
// 用spellcheck="false"属性判断是否为编辑器所在iframe 避免错误插入
let iframe = document.getElementsByTagName("iframe")[i].contentWindow;
let textarea = iframe.document.getElementsByClassName('cke_show_borders');
$(textarea).append(constructor);
}
else {
// 第二层iframe中找编辑器
for(let j=0;j<tmpiframe.document.getElementsByTagName("iframe").length;j++){
let smalliframe = tmpiframe.document.getElementsByTagName("iframe")[j].contentWindow;
let smallDom = smalliframe.document.getElementsByClassName('cke_show_borders');
if(smallDom.length&&($(tmpDom).attr('spellcheck')==false)){
// 第二层iframe找到编辑器了
let iframe = document.getElementsByTagName("iframe")[j].contentWindow;
let textarea = iframe.document.getElementsByClassName('cke_show_borders');
$(textarea).append(constructor);
}
else {console.log('摆烂了,不找了');}
}
}
}
}
function progressFunction(event){
let percentage;
if(event.lengthComputable){
percentage = event.loaded/event.total;
console.log('Percentage: '+(percentage*100).toFixed(0)+'%');
$('.processBar').html('上传进度:['+(percentage*100).toFixed(0)+'%]');
if(event.loaded == event.total){
alert("附件上传完成!");
$('.fileindex').html('[√]');
}
}
}
})();