Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

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, 2740 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 ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(8)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
IDE & Editoren
USB STICK Datei AUTOMATISCH beim anschliessen auf fremden PC öffnen (9)

Frage von Jwanner83 zum Thema IDE & Editoren ...

Microsoft Office
gelöst Makro wird beim öffnen Vorlage nicht ausgeführt (8)

Frage von Sunny89 zum Thema Microsoft Office ...

JavaScript
gelöst Range (Slider) Javascript mit Plus-Minus Buttons (3)

Frage von internet2107 zum Thema JavaScript ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
gelöst Server erkennt Client nicht wenn er ausserhalb des DHCP Pools liegt (28)

Frage von Mar-west zum Thema LAN, WAN, Wireless ...

Outlook & Mail
gelöst Outlook 2010 findet ost datei nicht (19)

Frage von Floh21 zum Thema Outlook & Mail ...

Netzwerkmanagement
gelöst Anregungen, kleiner Betrieb, IT-Umgebung (18)

Frage von Unwichtig zum Thema Netzwerkmanagement ...

Windows Server
Server 2008R2 startet nicht mehr (Bad Patch 0xa) (18)

Frage von Haures zum Thema Windows Server ...