Bei Seitenaufruf Dateiauswahl öffnen - JavaScript

Schönen guten Abend

Ich bräuchte kurz Hilfe bei einem Script das Automatisch beim aufrufen den Auswahl-Dialog für Dateien öffnen soll, das ganze dann hochladen soll und noch mit Statusanzeige (nur im Titel der Seite, wie der rest aussieht ist egal).

Keine sorge ich hab soweit alles bis das Datei auswählen beim Aufruf.
(Bitte nicht erschlagen

, ich weiß selbst das das Script der Horror sein muss, ich kenn mich noch nicht wirklich mit JavaScript und jQuery aus)

index.html

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>  
  

<script>
function _(el){
	return document.getElementById(el);
}
function uploadFile(){
	var file = _("yourinputname").files;  
	//alert(file.name+" | "+file.size+" | "+file.type);  
	var formdata = new FormData();
	formdata.append("yourinputname", file);  
	var ajax = new XMLHttpRequest();
	ajax.upload.addEventListener("progress", progressHandler, false);  
	ajax.addEventListener("load", completeHandler, false);  
	ajax.addEventListener("error", errorHandler, false);  
	ajax.addEventListener("abort", abortHandler, false);  
	ajax.open("POST", "file_upload_parser.php");  
	ajax.send(formdata);
}
function progressHandler(event){
	_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;  
	var percent = (event.loaded / event.total) * 100;
	document.title = percent;
	_("progressBar").value = Math.round(percent);  
	_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";  
}
function completeHandler(event){
	_("status").innerHTML = event.target.responseText;  
	_("progressBar").value = 0;  
}
function errorHandler(event){
	_("status").innerHTML = "Upload Failed";  
}
function abortHandler(event){
	_("status").innerHTML = "Upload Aborted";  
}

</script>
</head>

<body>


<script type='text/javascript'>  
$(function(){
    $('#id').on('click', function() {  
        $('#yourinputname').trigger('click');  
    });
});//]]>  

</script>


</head>
<body>
  <button id="id">Open</button>  
  <form id="upload_form" enctype="multipart/form-data" method="post">  
<input id="yourinputname" type="file" name="yourinputname" onchange="uploadFile()" />  
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>  
  <h3 id="status"></h3>  
  <p id="loaded_n_total"></p>  
</form>
</body>
</html>

file_upload_parser.php

<?php
$fileName = $_FILES["yourinputname"]["name"]; // The file name  
$fileTmpLoc = $_FILES["yourinputname"]["tmp_name"]; // File in the PHP tmp folder  
$fileType = $_FILES["yourinputname"]["type"]; // The type of file it is  
$fileSize = $_FILES["yourinputname"]["size"]; // File size in bytes  
$fileErrorMsg = $_FILES["yourinputname"]["error"]; // 0 for false... and 1 for true  
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";  
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){  
    echo "$fileName upload is complete";  
} else {
    echo "move_uploaded_file function failed";  
}
?>

Ich hoffe ihr könnt mir helfen

mfg Jonas

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 238810

Url: https://administrator.de/contentid/238810

Ausgedruckt am: 24.11.2024 um 16:11 Uhr

8 Kommentare

Neuester Kommentar

Hallo Jonas,
für einen Aufruf des Dateiauswahldialogs beim Aufruf der Seite müsste das reichen:

$(document).ready(function(e) {
    $('#yourinputname').trigger('click');  
});

Grüße Uwe

Leider nicht -.-

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>  
  

<script>
$(document).ready(function(e) {
    $('#yourinputname').trigger('click');  
});
function _(el){
	return document.getElementById(el);
}
function uploadFile(){
	var file = _("yourinputname").files;  
	//alert(file.name+" | "+file.size+" | "+file.type); 
	var formdata = new FormData();
	formdata.append("yourinputname", file);  
	var ajax = new XMLHttpRequest();
	ajax.upload.addEventListener("progress", progressHandler, false);  
	ajax.addEventListener("load", completeHandler, false);  
	ajax.addEventListener("error", errorHandler, false);  
	ajax.addEventListener("abort", abortHandler, false);  
	ajax.open("POST", "file_upload_parser.php");  
	ajax.send(formdata);
}
function progressHandler(event){
	_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;  
	var percent = (event.loaded / event.total) * 100;
	document.title = percent;
	_("progressBar").value = Math.round(percent);  
	_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";  
}
function completeHandler(event){
	_("status").innerHTML = event.target.responseText;  
	_("progressBar").value = 0;  
}
function errorHandler(event){
	_("status").innerHTML = "Upload Failed";  
}
function abortHandler(event){
	_("status").innerHTML = "Upload Aborted";  
}

</script>
</head>

<body>


<script type='text/javascript'>  
 

</script>


</head>
<body>
  <button id="id">Open</button>  
  <form id="upload_form" enctype="multipart/form-data" method="post">  
<input id="yourinputname" type="file" name="yourinputname" onchange="uploadFile()" />  
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>  
  <h3 id="status"></h3>  
  <p id="loaded_n_total"></p>  
</form>
</body>


</html>

also bei mir geht das öffnen des Dialogs ... vorhin mit Firefox getestet, oder willst du das eine Datei automatisch ausgewählt wird ?

Hast du einen Popupblocker aktiv ? Der wird dabei normalerweise getriggert.

Zitat von @colinardo:

also bei mir geht das öffnen des Dialogs ... vorhin mit Firefox getestet, oder willst du das eine Datei automatisch
ausgewählt wird ?

Hast du einen Popupblocker aktiv ? Der wird dabei normalerweise getriggert.

Adblocker und Popup blocker im Chrome :D Ich habs aber mit Nightly (Firefox 64x) versucht, ging nicht.

öhm jetzt wo ih mir deinen Code mal näher ansehe ist doch einiges unstimmig, hier fehlt dir z.B. das http:

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>  

und in deinem HTML-Code ist auch einiges doppelt gemoppelt (doppelter Head und doppelter Body) !

Mal auf die wesentliche Funktion um die es hier geht reduziert, geht das einwandfrei ...

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script>  
<script>
$(document).ready(function(e) {
    $('#yourinputname').trigger('click');  
});
</script>
</head>
<body>
<input id="yourinputname" type="file" name="yourinputname" />  
</body>
</html>

Zitat von @colinardo:

öhm jetzt wo ih mir deinen Code mal näher ansehe ist doch einiges unstimmig, hier fehlt dir z.B. das http:

> <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>  
> 

und in deinem HTML-Code ist auch einiges doppelt gemoppelt (doppelter Head und doppelter Body) !

Mal auf die wesentliche Funktion um die es hier geht reduziert, geht das einwandfrei ...

> <!DOCTYPE html>
> <html>
> <head>
>   <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script>  
> <script>
> $(document).ready(function(e) {
>     $('#yourinputname').trigger('click');  
> });
> </script>
> </head>
> <body>
> <input id="yourinputname" type="file" name="yourinputname" />  
> </body>
> </html>
> 

Auf keinem der Computer, in keinem Browser (Nightly, Chrome, Safari)... (auch nicht am Handy)
document ready geht übrings so schon, ich habe es mit einer simplen Textausgabe versucht, aber er öffnet es einfach nicht

Aber herzlichen Dank für deine Hilfe...

dann stimmt bei dir was nicht oder du kopierst den code nicht über Quelltext, hier geht es überall, ich kann dir gerne morgen ein Video schicken, egal ob Firefox, IE unter Windows oder der IE auf einem RT-Tablet. Ich bin ja nicht besch...

Naja dann noch viel Erfolg
Grüße Uwe