212N3rD
Cadet 4th Year
- Registriert
- Juli 2008
- Beiträge
- 70
ich möchte dateien hochladen per chunk upload und leider will es nicht klappen.
beim upload steht immer "starting..." sonst passiert nichts.
beim upload steht immer "starting..." sonst passiert nichts.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<style>
#progressbar .ui-progressbar-value {
background-color: #ccc;
}
</style>
<title>JS Bin</title>
<script>
// my URL to load the file to
var uri = "www.homepage.de/upload/";
// 1Mb chunk sizes
var chunkSize = 1024*1024;
// track the number of chunks
var chunks = 0;
// track how much has been sent
var bytesUploaded=0;
// the file to load
var selectedFile;
$(document).ready(function () {
$("#file").bind('change', handleFileSelect);
if (! ( window.File && window.FileReader && window.FileList && window.Blob)) {
alert('The File APIs are not fully supported in this browser.');
}
});
//Read the file and find out how many blocks we would need to split it.
function handleFileSelect(e) {
var files = e.target.files;
selectedFile = files[0];
$("#fileName").text(selectedFile.name);
$("#fileSize").text(selectedFile.size + " bytes");
$("#fileDate").text(selectedFile.lastModifiedDate);
// number of chunks
chunks = Math.ceil(selectedFile.size/chunkSize);
$("#chunks").text(chunks);
}
function sendChunk(chunkNumber){
var reader = new FileReader();
var start = chunkSize * (chunkNumber-1);
var end = start + chunkSize -1;
var fileContent = selectedFile.slice(start, end);
var length = fileContent.size;
reader.readAsArrayBuffer(fileContent);
$.ajax({
url: uri,
type: "POST",
data: fileContent,
processData: false,
beforeSend: function(xhr) {
xhr.setRequestHeader('x-chunknumber', chunkNumber);
xhr.setRequestHeader('x-filename', selectedFile.name);
xhr.setRequestHeader('x-offset', start );
xhr.setRequestHeader('x-chunksize', length );
xhr.setRequestHeader('x-content-type', selectedFile.type );
},
success: function (data, status) {
console.log(data);
console.log(status);
bytesUploaded += length;
var percentComplete = ((bytesUploaded / selectedFile.size) * 100).toFixed(2);
$("#fileUploadProgress").text(percentComplete + " %");
$("#downloadLink").html("<a href='http://www.homepage.de/upload/" + selectedFile.name + "' target='_new'>New File</a>");
if ( chunkNumber < chunks ) {
sendChunk(chunkNumber+1);
}
},
error: function(xhr, desc, err) {
console.log(desc);
console.log(err);
}
});
}
function sendIt(){
$("#fileUploadProgress").text("Starting......");
bytesUploaded=0;
sendChunk(1);
}
</script>
</head>
<body>
<form>
<div style="margin-left: 20px;">
<h1>APEX Listener Chunked File Upload</h1>
<p>
<span class="input-control text">
<input type="file" id="file" name="file" style="width: 50%"/>
</span>
</p>
<div id="output">
<h1>File Details:</h1><br />
<table><tr><td>Name:</td><td><span id="fileName"></span></td></tr>
<tr><td>File Date:</td><td><span id="fileDate"></span></td></tr>
<tr><td>File Size:</td><td><span id="fileSize"></span></td></tr>
<tr><td>Number of Chunks:</td><td><span id="chunks"></span></td></tr>
</table>
<p>
<input type="button" value="Upload File" onclick="sendIt()"/>
</p>
<p>
<strong>Progress</strong>: <span id="fileUploadProgress">0.00 %</span>
<div id="progressbar"></div>
</p>
New URL: <span id="downloadLink"></span>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
