Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Bei Seitenaufruf Dateiauswahl öffnen - JavaScript

Frage Entwicklung JavaScript

Mitglied: justanumber44

justanumber44 (Level 1) - Jetzt verbinden

21.05.2014, aktualisiert 22:47 Uhr, 3077 Aufrufe, 8 Kommentare

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
01.
<!DOCTYPE html> 
02.
<html> 
03.
<head> 
04.
  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> 
05.
   
06.
 
07.
<script> 
08.
function _(el){ 
09.
	return document.getElementById(el); 
10.
11.
function uploadFile(){ 
12.
	var file = _("yourinputname").files[0]; 
13.
	//alert(file.name+" | "+file.size+" | "+file.type); 
14.
	var formdata = new FormData(); 
15.
	formdata.append("yourinputname", file); 
16.
	var ajax = new XMLHttpRequest(); 
17.
	ajax.upload.addEventListener("progress", progressHandler, false); 
18.
	ajax.addEventListener("load", completeHandler, false); 
19.
	ajax.addEventListener("error", errorHandler, false); 
20.
	ajax.addEventListener("abort", abortHandler, false); 
21.
	ajax.open("POST", "file_upload_parser.php"); 
22.
	ajax.send(formdata); 
23.
24.
function progressHandler(event){ 
25.
	_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; 
26.
	var percent = (event.loaded / event.total) * 100; 
27.
	document.title = percent; 
28.
	_("progressBar").value = Math.round(percent); 
29.
	_("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; 
30.
31.
function completeHandler(event){ 
32.
	_("status").innerHTML = event.target.responseText; 
33.
	_("progressBar").value = 0; 
34.
35.
function errorHandler(event){ 
36.
	_("status").innerHTML = "Upload Failed"; 
37.
38.
function abortHandler(event){ 
39.
	_("status").innerHTML = "Upload Aborted"; 
40.
41.
 
42.
</script> 
43.
</head> 
44.
 
45.
<body> 
46.
 
47.
 
48.
<script type='text/javascript'> 
49.
$(function(){ 
50.
    $('#id').on('click', function() { 
51.
        $('#yourinputname').trigger('click'); 
52.
    }); 
53.
});//]]>   
54.
 
55.
</script> 
56.
 
57.
 
58.
</head> 
59.
<body> 
60.
  <button id="id">Open</button> 
61.
  <form id="upload_form" enctype="multipart/form-data" method="post"> 
62.
<input id="yourinputname" type="file" name="yourinputname" onchange="uploadFile()" /> 
63.
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> 
64.
  <h3 id="status"></h3> 
65.
  <p id="loaded_n_total"></p> 
66.
</form> 
67.
</body> 
68.
</html>
file_upload_parser.php
01.
<?php 
02.
$fileName = $_FILES["yourinputname"]["name"]; // The file name 
03.
$fileTmpLoc = $_FILES["yourinputname"]["tmp_name"]; // File in the PHP tmp folder 
04.
$fileType = $_FILES["yourinputname"]["type"]; // The type of file it is 
05.
$fileSize = $_FILES["yourinputname"]["size"]; // File size in bytes 
06.
$fileErrorMsg = $_FILES["yourinputname"]["error"]; // 0 for false... and 1 for true 
07.
if (!$fileTmpLoc) { // if file not chosen 
08.
    echo "ERROR: Please browse for a file before clicking the upload button."; 
09.
    exit(); 
10.
11.
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ 
12.
    echo "$fileName upload is complete"; 
13.
} else { 
14.
    echo "move_uploaded_file function failed"; 
15.
16.
?>
Ich hoffe ihr könnt mir helfen
mfg Jonas
Mitglied: colinardo
22.05.2014, aktualisiert um 10:17 Uhr
Hallo Jonas,
für einen Aufruf des Dateiauswahldialogs beim Aufruf der Seite müsste das reichen:
01.
$(document).ready(function(e) { 
02.
    $('#yourinputname').trigger('click'); 
03.
});
Grüße Uwe
Bitte warten ..
Mitglied: justanumber44
22.05.2014, aktualisiert um 16:47 Uhr
Leider nicht -.-
01.
<!DOCTYPE html> 
02.
<html> 
03.
<head> 
04.
  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> 
05.
   
06.
 
07.
<script> 
08.
$(document).ready(function(e) { 
09.
    $('#yourinputname').trigger('click'); 
10.
}); 
11.
function _(el){ 
12.
	return document.getElementById(el); 
13.
14.
function uploadFile(){ 
15.
	var file = _("yourinputname").files[0]; 
16.
	//alert(file.name+" | "+file.size+" | "+file.type); 
17.
	var formdata = new FormData(); 
18.
	formdata.append("yourinputname", file); 
19.
	var ajax = new XMLHttpRequest(); 
20.
	ajax.upload.addEventListener("progress", progressHandler, false); 
21.
	ajax.addEventListener("load", completeHandler, false); 
22.
	ajax.addEventListener("error", errorHandler, false); 
23.
	ajax.addEventListener("abort", abortHandler, false); 
24.
	ajax.open("POST", "file_upload_parser.php"); 
25.
	ajax.send(formdata); 
26.
27.
function progressHandler(event){ 
28.
	_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; 
29.
	var percent = (event.loaded / event.total) * 100; 
30.
	document.title = percent; 
31.
	_("progressBar").value = Math.round(percent); 
32.
	_("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; 
33.
34.
function completeHandler(event){ 
35.
	_("status").innerHTML = event.target.responseText; 
36.
	_("progressBar").value = 0; 
37.
38.
function errorHandler(event){ 
39.
	_("status").innerHTML = "Upload Failed"; 
40.
41.
function abortHandler(event){ 
42.
	_("status").innerHTML = "Upload Aborted"; 
43.
44.
 
45.
</script> 
46.
</head> 
47.
 
48.
<body> 
49.
 
50.
 
51.
<script type='text/javascript'> 
52.
  
53.
 
54.
</script> 
55.
 
56.
 
57.
</head> 
58.
<body> 
59.
  <button id="id">Open</button> 
60.
  <form id="upload_form" enctype="multipart/form-data" method="post"> 
61.
<input id="yourinputname" type="file" name="yourinputname" onchange="uploadFile()" /> 
62.
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> 
63.
  <h3 id="status"></h3> 
64.
  <p id="loaded_n_total"></p> 
65.
</form> 
66.
</body> 
67.
 
68.
 
69.
</html> 
70.
 
Bitte warten ..
Mitglied: colinardo
22.05.2014, aktualisiert um 17:35 Uhr
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.
Bitte warten ..
Mitglied: justanumber44
22.05.2014, aktualisiert um 20:59 Uhr
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.
Bitte warten ..
Mitglied: colinardo
22.05.2014, aktualisiert um 21:47 Uhr
öhm jetzt wo ih mir deinen Code mal näher ansehe ist doch einiges unstimmig, hier fehlt dir z.B. das http:
01.
<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 ...
01.
<!DOCTYPE html> 
02.
<html> 
03.
<head> 
04.
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script> 
05.
<script> 
06.
$(document).ready(function(e) { 
07.
    $('#yourinputname').trigger('click'); 
08.
}); 
09.
</script> 
10.
</head> 
11.
<body> 
12.
<input id="yourinputname" type="file" name="yourinputname" /> 
13.
</body> 
14.
</html>
Bitte warten ..
Mitglied: justanumber44
22.05.2014 um 22:09 Uhr
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:
01.
> <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> 
02.
> 
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 ...
01.
> <!DOCTYPE html> 
02.
> <html> 
03.
> <head> 
04.
>   <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.2.js'></script> 
05.
> <script> 
06.
> $(document).ready(function(e) { 
07.
>     $('#yourinputname').trigger('click'); 
08.
> }); 
09.
> </script> 
10.
> </head> 
11.
> <body> 
12.
> <input id="yourinputname" type="file" name="yourinputname" /> 
13.
> </body> 
14.
> </html> 
15.
> 

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...
Bitte warten ..
Mitglied: colinardo
22.05.2014, aktualisiert um 22:26 Uhr
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
Bitte warten ..
Mitglied: 114757
29.05.2014, aktualisiert um 15:15 Uhr
Servus,
also bei mir geht der Code von @colinardo auch problemlos.

Gruß jodel32
Bitte warten ..
Ähnliche Inhalte
Batch & Shell
Dateiauswahl mit dialog
Frage von lasterBatch & Shell

Hallo, ich will ein Dateiauswahldialog (Linux Shell) mit dialog (Version 1.1-20120215) verwenden. Die Funktion fselect ist ja nicht wirklich ...

Apache Server
JavaScript wird nicht ausgeführt
Frage von schneerunzelApache Server

Hallo zusammen ich wollte gerade das Tool open3A installieren. Dabei bekomme ich einen Fehler die Dateien sind alle mit ...

JavaScript
Javascript Array
gelöst Frage von internet2107JavaScript2 Kommentare

Ich habe folgendes Problem. Ersetze ich die folgenden Zahlen gegen Variablenwerte, bekomme ich nicht das Ergebnis, wie mit festen ...

JavaScript
Javascript Funktionen
gelöst Frage von agowa338JavaScript5 Kommentare

Hallo, habe gerade mehrere schönen Javascripte per mail bekommen und frage mich gerade, was eigentlich folgendes in einem Javascript ...

Neue Wissensbeiträge
Viren und Trojaner

Deaktivierter Keylogger in HP Notebooks entdeckt

Information von bitcoin vor 12 StundenViren und Trojaner1 Kommentar

Ein Grund mehr warum man Vorinstallationen der Hersteller immer blank bügeln sollte Der deaktivierte Keylogger findet sich im vorinstallierten ...

Router & Routing

Lets Encrypt kommt auf die FritzBox

Information von bitcoin vor 15 StundenRouter & Routing

In der neuesten Labor-Version der FB7490 integriert AVM unter anderem einen Let's Encrypt Client für Zugriffe auf das Webinterface ...

Internet

Was nützt HTTPS, wenn es auch von Phishing Web-Seiten genutzt wird

Information von Penny.Cilin vor 3 TagenInternet17 Kommentare

HTTPS richtig einschätzen Ob man eine Webseite via HTTPS aufruft, zeigt ein Schloss neben der Adresse im Webbrowser an. ...

Webbrowser

Bugfix für Firefox Quantum released - Installation erfolgt teilweise nicht automatisch!

Erfahrungsbericht von Volchy vor 4 TagenWebbrowser8 Kommentare

Hallo zusammen, gem. dem Artike von heise online wurde mit VersionFirefox 57.0.1 sicherheitsrelevante Bugs behoben. Entgegen der aktuellen Veröffentlichung ...

Heiß diskutierte Inhalte
Batch & Shell
Trusted Sites für alle User auf dem PC einpflegen
Frage von xXTaKuZaXxBatch & Shell12 Kommentare

Aufgabestellung: Es sollen auf 1 PC (bzw. mehreren PCs) vertrauenswürdige Sites per Powershell eingetragen werden, die für alle User ...

Voice over IP
Telefonstörung - Ortsrufnummern kein Verbindungsaufbau
Frage von Windows10GegnerVoice over IP10 Kommentare

Hallo, sowohl bei uns als auch beim Opa ist es über VoIP nicht möglich Ortsrufnummern anzurufen. Es kommt nach ...

Vmware
DOS 6.22 in VMWare mit CD-ROM
gelöst Frage von hesperVmware10 Kommentare

Hallo zusammen! Ich hab ein saublödes Problem. Es ist eine VMWare mit DOS 6.22 zu erstellen auf dem ein ...

Cloud-Dienste
PIM als SaaS Nutzungsgebühr
Frage von vanTastCloud-Dienste8 Kommentare

Moin, wir haben uns ein PIM (Product Information Management) nach unseren Ansprüchen für viel Geld als SaaS-Lösung bauen lassen. ...