input文件上傳（上傳單個文件/多選文件/文件夾、拖拽上傳、分片上傳）
//上傳單個/多個文件 <input title="點擊選擇文件" id="h5Input1" multiple="" accept="*/*" type="file" name="html5uploader" style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;"> //上傳文件夾 <input title="點擊選擇文件夾" id="h5Input2" multiple="" webkitdirectory="" accept="*/*" type="file" name="html5uploader" style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;cursor:pointer;">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>uploadFile</title>
<script src="http://lib04.xesimg.com/lib/jQuery/1.11.1/jquery.min.js?1514549590"></script>
<style type="text/css">
.upload-default {
border: 1px dashed red;
}
.upload-default.upload_drag_hover{
border: 1px dashed green;
}
input{
appearance: textfield;
-moz-appearance: textfield;
-webkit-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>
</head>
<body>
<input type="number" min="1" max="10000" step="1">
<input title="點擊選擇多個文件" id="h5Input1" multiple="" accept="*/*" type="file" name="html5uploader">
<input title="點擊選擇文件夾" id="h5Input2" multiple="multiple" webkitdirectory="" directory accept="*/*" type="file" name="html5uploader" >
<input title="點擊選擇單個文件" id="h5Input3" accept="*/*" type="file" name="file" webkitRelativePath>
<div id="fileDragArea" style="float: left;width: 300px;height: 300px;" class="upload-default">或者將圖片拖到此處</div>
</body>
</html>
<script type="text/javascript">
window.onload = function (){
document.getElementById('h5Input2').addEventListener('change', function (ev) {
console.log(ev)
//預覽，主要是文件轉換爲base64，或者blob，或者canvas
//file -> base64
// file爲前面得到的
console.log(document.getElementById('h5Input2').files[0])
var file = ev.target.files[0]
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image;
img.src = this.result; // this.result 爲base64
//console.log(this.result)
// 加到dom
};
reader.readAsDataURL(file);
//file -> blob
// file爲前面得到的
var url = window.URL.createObjectURL(file);
var img = new Image;
img.src = url;
//console.log(img)
// 加到dom
console.log(file)
// 上傳 須要用到FormData模擬表單數據 或直接form上傳
// var formData = new FormData();
// formData.append('resourceId', '');
// // formData.append('file', '');
// // formData.append('filename', file)
// formData.append("file", file);
// var xhr = new XMLHttpRequest();
// //上傳文件進度條
// xhr.upload.addEventListener("progress", function(e){
// console.log('9999')
// if (e.total > 0) {
// console.log('----進度-----')
// console.log(e.loaded, e.total)
// e.percent = Math.round(e.loaded / e.total * 100);
// console.log( e.percent)
// console.log('----進度-----')
// }
// }, false);
// var url = 'http://courseware.xesv5.com/api/OnlineEdit/upload'
// xhr.open('post', url, true);
// xhr.onload = function () {
// console.log(4566666)
// }
// xhr.send(formData);
/*********************************************嘗試分片，建立多個上傳的xhr對象****************************************/
var bytesPerPiece = 1024 * 1024; // 每一個文件切片大小定爲1MB
var totalPieces;
var blob = file;
var start = 0;
var end;
var index = 0;
var filesize = blob.size;
var filename = blob.name;
//計算文件切片總數
totalPieces = Math.ceil(filesize / bytesPerPiece);
while(start < filesize) {
//判斷是不是最後一片文件，若是是最後一篇就說明整個文件已經上傳完成
if (index == totalPieces) {
console.log('整個文件上傳完成');
return false;
}
end = start + bytesPerPiece;
if(end > filesize) {
end = filesize;
}
var chunk = blob.slice(start,end);//切割文件
var sliceIndex = index;
var formData = new FormData();
formData.append("file", chunk, filename);
formData.append("total", totalPieces); //總片數
formData.append("index", sliceIndex); //當前是第幾片
var xhr = new XMLHttpRequest();
//上傳文件進度條
xhr.upload.addEventListener("progress", function(e){
if (e.total > 0) {
console.log('----進度-----')
//e.percent = Math.round(e.loaded / e.total * 100);
//(e.loaded當前片文件上傳的上傳的進度 start是前面分片已經上傳完成的文件大小
e.percent = 100*(e.loaded+start)/file.size;
if(e.pecent > 100){
e.percent = 100;
}
console.log( e.percent)
console.log('----進度-----')
}
}, false);
var url = 'http://courseware.xesv5.com/api/OnlineEdit/upload'
xhr.open('post', url, true);
console.log(5)
xhr.onload = function () {
console.log(45)
}
xhr.send(formData);
start = end;
index++;
}
/*********************************************嘗試分片****************************************/
})
}
var dragDrop = document.getElementById('fileDragArea');
//拖拽上傳文件
dragDrop.addEventListener("dragover", function(e) {
e.stopPropagation();
//必須阻止默認事件
e.preventDefault();
$(this).addClass("upload_drag_hover");
}, false);
dragDrop.addEventListener("dragleave", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass("upload_drag_hover");
}, false);
dragDrop.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
//取消鼠標通過樣式
$(this).removeClass("upload_drag_hover");
//獲取文件列表對象和文件相對路徑
var files = e.target.files || e.dataTransfer.files;
var dragDrop = document.getElementById('fileDragArea')
var items = e.dataTransfer.items
console.log(items.length)
for (var i = 0; i < items.length; i++) {
var item = items[i].webkitGetAsEntry();
console.log(item)
if (item) {
//判斷是否爲文件夾
if (item.isDirectory) {
traverseFileTree(item)
} else {
// this.$alert('只支持上傳文件夾', '提示', {
// confirmButtonText: '肯定'
// })
}
}
}
}, false);
function traverseFileTree (item, path) {
path = path || ''
if (item.isFile) {
// Get file
item.file((file) => {
let obj = {
file: file,
path: path + file.name
}
})
} else if (item.isDirectory) {
// Get folder contents
var dirReader = item.createReader()
readDir (dirReader, item, path)
}
}
function readDir (dirReader, item, path) {
dirReader.readEntries((entries) => {
console.log(entries.length)
if (entries.length) {
let obj = {
name: item.name,
process: 0,
total: entries.length
}
for (let i = 0; i < entries.length; i++) {
console.log(entries[i])
traverseFileTree(entries[i], path + item.name + '/')
}
// entries長度不爲0，繼續調用解析，直至長度爲0。由於chrome瀏覽器只支持一次解析100個
readDir(dirReader, item, path)
}
},function (e) {
console.log(e)
})
}
dragDrop.addEventListener("dragend", function(e) {
console.log(9999999999999999999999)
console.log(e)
})
</script>
相關文章
- 1. flask 文件上傳（單文件上傳、多文件上傳）--
- 2. PHP的單個文件上傳、多個單文件上傳、多文件上傳
- 3. 文件拖拽上傳
- 4. jq 拖拽上傳文件
- 5. html5文件拖拽上傳
- 6. springboot文件上傳： 單個文件上傳 和 多個文件上傳
- 7. 文件上傳(拖拽文件)
- 8. 拖拽上傳文件夾的實現
- 9. 單文件上傳、多文件上傳和文件下載
- 10. 上傳文件夾
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • R XML 文件 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. flask 文件上傳（單文件上傳、多文件上傳）--
- 2. PHP的單個文件上傳、多個單文件上傳、多文件上傳
- 3. 文件拖拽上傳
- 4. jq 拖拽上傳文件
- 5. html5文件拖拽上傳
- 6. springboot文件上傳： 單個文件上傳 和 多個文件上傳
- 7. 文件上傳(拖拽文件)
- 8. 拖拽上傳文件夾的實現
- 9. 單文件上傳、多文件上傳和文件下載
- 10. 上傳文件夾