web uploader实现文件的上传和下载功能
var absolutely = '/'
getPath()
function getPath(){
$.ajax({
type : "GET",
url : 'http://localhost:8080/getFilePath?path='+absolutely,
success : function(message){
console.log(message);
if (message.code == 200){
listFile(message)
showWarnMessage('获取列表成功')
}
}
});
}
function showWarnMessage(message){
var warnMessage = $(".warnMessage");
warnMessage.html("<div style='display: block'}>"+message+"<div>")
warnMessage.slideDown(2000);
setTimeout(function(){warnMessage.slideUp(2000);},1000);
}
function createFile(filename){
$.ajax({
type : "GET",
url : 'http://localhost:8080/createFile?path='+absolutely+filename,
success : function(message){
// (message);
if (message.code == 200){
showWarnMessage('创建文件成功')
}
}
});
}
function download(filename){
var url = 'http://localhost:8080/download'
var form = $("<form></form>").attr("action", url).attr("method", "get");
form.append($("<input></input>").attr("type", "hidden").attr("name", "path").attr("value", absolutely+filename));
form.appendTo('body').submit().remove();
}
function listFile(message){
var file = '<div >'
for (let filePath of message.data.files){
file += '<div class="fileImage"> <span class="fileFont">'+filePath+'</span></div>'
}
for (let filePath of message.data.directory){
file += '<div class="directoryImage"> <span class="directoryFont">'+filePath+'</span></div>'
}
file +="</div>"
$('#filePath').html(file)
}
$('body').on('click','#filePath .directoryImage',function (evnet){
let text = $(this).text().trim()
absolutely +=text +'/'
console.log(absolutely)
var name = absolutely
getPath()
})
$('body').on('click','#filePath .fileImage',function (evnet){
let name = $(this).text()
console.log(this.innerHTML)
// let text = ();
var r = confirm("确定下载文件: "+ name)
if (r == true) {
console.log("开始下载")
download(name.trim())
}
})
$('.upperLevel').click(function(event) {
var name = absolutely.substring(absolutely.lastIndexOf('/'))
absolutely = name
getPath()
});
$('.createFile').click(function(event) {
var txt;
var fileName = prompt("请输入文件夹的名称：", "11");
if (fileName != null || fileName.trim() != "") {
createFile(fileName)
getPath()
}
});
$('#upload-container').click(function(event) {
$("#picker").find('input').click();
});
var uploader = WebUploader.create({
auto: true,// 选完文件后，是否自动上传。
swf: '',// swf文件路径
server: 'http://localhost:8080/upload',// 文件接收服务端。
dnd: '#upload-container',
pick: '#picker',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
multiple: true, // 选择多个
chunked: true,// 开启分片上传。
threads: 20, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式，POST或者GET。
fileSizeLimit: 1024*1024*1024*10*1024, //验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileVal:'upload', // [默认值：'file'] 设置文件上传域的name。
formData: { "path": absolutely}
});
uploader.on("beforeFileQueued", function(file,data) {
console.log(file); // 获取文件的后缀
});
uploader.on( 'uploadBeforeSend', function( block, data ) {
// block为分块数据。
// file为分块对应的file对象。
var file = block.file;
// 修改data可以控制发送哪些携带数据。
data.path = absolutely;
});
uploader.on('fileQueued', function(file) {
// 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
console.log(file.ext); // 获取文件的后缀
console.log(file.size);// 获取文件的大小
console.log(file.name);
var html = '<div class="upload-item"><span>文件名：'+file.name+'</span><span data-file_token operator">+file.id+'" class="btn-delete">删除</span><span data-file_token operator">+file.id+'" class="btn-retry">重试</span><div class="percentage '+file.id+'" style="width: 0%;"></div></div>';
$('#upload-list').append(html);
uploader.md5File( file )//大文件秒传
// 及时显示进度
.progress(function(percentage) {
console.log('Percentage:', percentage);
})
// 完成
.then(function(val) {
console.log('md5 result:', val);
});
});
uploader.on('uploadProgress', function(file, percentage) {
console.log(percentage * 100 + '%');
var width = $('.upload-item').width();
$('.'+file.id).width(width*percentage);
});
uploader.on('uploadSuccess', function(file, response) {
console.log(file.id+"传输成功");
getPath()
// showWarnMessage('上传文件成功')
});
uploader.on('uploadError', function(file) {
console.log(file);
console.log(file.id+'upload error')
showWarnMessage('上传文件失败')
});
$('#upload-list').on('click', '.upload-item .btn-delete', function() {
// 从文件队列中删除某个文件id
file_id = $(this).data('file_id');
// (file_id); // 标记文件状态为已取消
uploader.removeFile(file_id, true); // 从queue中删除
console.log(uploader.getFiles());
});
$('#upload-list').on('click', '.btn-retry', function() {
uploader.retry($(this).data('file_id'));
});
uploader.on('uploadComplete', function(file) {
console.log(uploader.getFiles());
});