nicht angemeldet
fileupload html5 :-(
hello!
hui-ich versuche den filereader der file api von html5 auszuprobieren, um dateien hochzuladen.. es gibt ja schon einige drag&drop-workarounds mit h5utils.js um alle events "einzutakten" zum beispiel, die man sich kopieren kann, aber ich hab mal jquery für die DnD aktion gewählt. nun bekomme ich die daten per uri, soweit so gut. ich habe überlegt, dass es doch möglich sein müsste, den pfad zu bekommen, sowie er im input-file-feld erscheint.. ich würde gerne per drag&drop die uri bzw. dann den PFAD zum filesystem irgendwie in das input-feld übergeben, um den upload mit den gedroppten dateien zu machen...
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<title>Multi File Upload :-)</title>
<style>
<!--
body {
font-family: Verdana, Arial, sans-serif;
min-height: 600px;
text-align: center;
}
h1, h2 {
color: #e8e8e8;
}
h1 {
border:1px solid #c4c4c4;
border-radius:2px;
}
div#data{
width:200px;
height:auto;
background:#ffffff;
}
p a {
bottom: 0;
color: #03d4f5;
font-size: 14px;
position: relative;
text-decoration: none;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery(function(){
jQuery.event.props.push('dataTransfer');
var body = jQuery('body')
.bind( 'dragenter dragover', false)
.bind( 'drop', function( e ) {
e.stopPropagation();
e.preventDefault();
jQuery.each( e.dataTransfer.files, function(index, file){
var fileReader = new FileReader();
fileReader.onload = (function(file) {
return function(e) {
body.append('<div id="data">' + file.fileName + e.target.result + '</div>')
body.append(
'<form action="upload.php" method="post" id="uploadData" enctype="multipart/form-data">'+
'<input type="file" name="files[]" multiple="multiple" min="1" max="999" placeholder="'+e.target.result+'"/>'+
'<input type="submit" value="upload" />'+
'</form>'
)
};
})(file);
fileReader.readAsDataURL(file);
});
});
});
});
</script>
</head>
<body>
<h1>Drag Files here!</h1>
</body>
</html>
mein ursprünglicher php-code um ohne drag&drop die files aus dem input hochzuladen:
<?php
foreach($_FILES['files']['tmp_name'] as $key => $tmp_name){
move_uploaded_file($tmp_name, "uploaded_files/{$_FILES['files']['name'][$key]}");
}
?>
habt ihr ideen oder tipps?
danke..
-
Hallo,
ich habe überlegt, dass es doch möglich sein müsste, den pfad zu bekommen, sowie er im input-file-feld erscheint..
Das Problem hatte ich auch mal und habe viel gegooglet deswegen. Wenn ich mich recht erinnere, geht das aus Sicherheitsgründen aber nicht. Upload-Felder unterliegen nämlich gewissen Sicherheitsbeschränkungen, z.B. lassen sie sich auch nicht ohne weiteres per CSS umstylen.
Gruß, Don P
-
ich habe überlegt, dass es doch möglich sein müsste, den pfad zu bekommen, sowie er im input-file-feld erscheint..
Das ist nicht möglich.
ich würde gerne per drag&drop die uri bzw. dann den PFAD zum filesystem irgendwie in das input-feld übergeben, um den upload mit den gedroppten dateien zu machen...
Das ist nicht möglich.
Aber das beides egal: Der Pfad ist für den Upload uninteressant. Beim Drag and Drop bekommst du direkt Zugriff auf das oder die File-Objekt(e). Diese kannst du direkt mit XMLHttpRequest hochladen, ohne die Hilfe eines klassischen Datei-Upload-Formulars:
</archiv/2011/3/t204009/#m1380767>
http://blog.timc.idv.tw/wp-content/uploads/HTML5_AJAX_File_Upload.pdfMathias