Drag & Drop upload via submit
Hej Eksperter.Jeg har lavet en Drag & Drop side hvor jeg kan droppe filer i en div som så aktiverer en upload funktion, der via en java controller, uploader til et fileshare.
Nu vil jeg gerne have at det sker når jeg trykker på submit i stedet for når jeg hiver filerne hen på div'en. Hvordan gør jeg det??
Dvs. filerne skal på en eller anden måde gemmes på formen og kunne sendes med på når der submittes.
Jsp side:
<CODE>
<html>
<head>
<title>Drag and drop</title>
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div id="status"></div>
<div id="drop"></div>
<div id="list"></div>
<input type="button" onclick="uploadFiles();" value="Upload">
<script>setupDragAndDropEvents();</script>
</body>
</html>
</CODE>
scripts.js
<CODE>
function setupDragAndDropEvents()
{
new uploader('drop', 'status', 'upload.html', 'list');
}
function uploader(place, status, targetPHP, show) {
// Upload image files
upload = function(file) {
// Firefox 3.6, Chrome 6, WebKit
if(window.FileReader) {
// Once the process of reading file
this.loadEnd = function() {
}
// Loading errors
this.loadError = function(event) {
switch(event.target.error.code) {
case event.target.error.NOT_FOUND_ERR:
document.getElementById(status).innerHTML = 'File not found!';
break;
case event.target.error.NOT_READABLE_ERR:
document.getElementById(status).innerHTML = 'File not readable!';
break;
case event.target.error.ABORT_ERR:
break;
default:
document.getElementById(status).innerHTML = 'Read error.';
}
}
// Reading Progress
this.loadProgress = function(event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded * 100) / event.total);
document.getElementById(status).innerHTML = 'Loaded : ' + percentage + '%';
}
}
reader = new FileReader();
// Firefox 3.6, WebKit
if(reader.addEventListener) {
reader.addEventListener('loadend', this.loadEnd, false);
if (status != null)
{
reader.addEventListener('error', this.loadError, false);
reader.addEventListener('progress', this.loadProgress, false);
}
// Chrome 7
} else {
reader.onloadend = this.loadEnd;
if (status != null)
{
reader.onerror = this.loadError;
reader.onprogress = this.loadProgress;
}
}
var preview = new FileReader();
// Firefox 3.6, WebKit
if(preview.addEventListener) {
//preview.addEventListener('loadend', this.previewNow, false);
// Chrome 7
} else {
//preview.onloadend = this.previewNow;
}
// The function that starts reading the file as a binary string
reader.readAsBinaryString(file);
// Preview uploaded files
if (show) {
//preview.readAsDataURL(file);
}
// Safari 5 does not support FileReader
} else {
xhr = new XMLHttpRequest();
xhr.open('POST', targetPHP+'?up=true', true);
xhr.setRequestHeader('UP-FILENAME', file.name);
xhr.setRequestHeader('UP-SIZE', file.size);
xhr.setRequestHeader('UP-TYPE', file.type);
xhr.send(file);
if (status) {
document.getElementById(status).innerHTML = 'Loaded : 100%';
}
if (show) {
var newFile = document.createElement('div');
newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size+' B';
document.getElementById(show).appendChild(newFile);
}
}
}
// Function drop file
this.drop = function(event) {
event.preventDefault();
var data = event.dataTransfer;
var boundary = '------multipartformboundary' + (new Date).getTime();
var dashdash = '--';
var crlf = '\r\n';
// Build RFC2388 string
var builder = '';
builder += dashdash;
builder += boundary;
builder += crlf;
var xhr = new XMLHttpRequest();
// For each dropped file
for (var i = 0; i < data.files.length; i++) {
var file = data.files[i];
// Generate headers
builder += 'Content-Disposition: form-data; name="filedata[]"';
if (file.fileName) {
builder += '; filename="' + file.fileName + '"';
}
builder += crlf;
builder += 'Content-Type: ' + file.type;
//builder += 'Content-Type: application/octet-stream';
builder += crlf;
builder += crlf;
// Append binary data
builder += file.getAsBinary();
builder += crlf;
// Write boundary
builder += dashdash;
builder += boundary;
builder += crlf;
}
// Mark end of the request
builder += dashdash;
builder += boundary;
builder += dashdash;
builder += crlf;
xhr.open("POST", "upload.html?up=true", true);
xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
xhr.sendAsBinary(builder);
// Prevent FireFox opening the dragged file
event.stopPropagation();
}
// The inclusion of the event listeners (DragOver and drop)
this.uploadPlace = document.getElementById(place);
this.uploadPlace.addEventListener("dragover",
function(event) {
event.stopPropagation();
event.preventDefault();
}, true);
this.uploadPlace.addEventListener("drop", this.drop, false);
}
</CODE>
På forhånd tak for hjælpen :)
