sho: fileupload html5 :-(

Beitrag lesen

SELF-Forum

fileupload html5 :-(

sho
– Informationen zu den Bewertungsregeln

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..

Beitrag melden
–
Informationen zu den Bewertungsregeln