8
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
file_upload_parser.php
Ich hoffe ihr könnt mir helfen
mfg Jonas
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
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 238810
Url: https://administrator.de/contentid/238810
Printed on: April 19, 2024 at 21:04 o'clock
8 Comments
Latest comment
Hallo Jonas,
für einen Aufruf des Dateiauswahldialogs beim Aufruf der Seite müsste das reichen:
Grüße Uwe
für einen Aufruf des Dateiauswahldialogs beim Aufruf der Seite müsste das reichen:
$(document).ready(function(e) {
$('#yourinputname').trigger('click');
});
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.
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.
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:
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 ...
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> 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:
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 ...
ö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>
> 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
Naja dann noch viel Erfolg
Grüße Uwe
