Dateiupload mit PHP und AJAX

Diskutiere mit über: Dateiupload mit PHP und AJAX im Web-Programmierung Forum

  1. sideshow

    sideshow Thread Starter MacUser Mitglied

    Beiträge:
    92
    Zustimmungen:
    0
    Registriert seit:
    24.01.2005
    tach auch!

    ich möchte einen dateiupload mit php und ajax realsieren. mit php ist das kein problem und hab ich auch schon oft genug gemacht, aber ich möchte das mit ajax realisieren das die datei, wenn sie ausgewählt wurde, sofort übertragen wird. natürlich OHNE seiten-reload.

    dazu würde ich gerne die bibliotheken prototype und scriptaculous nutzen. leider kenne ich mich mit java (noch) viel zu wenig aus. vielleicht kann mir jemand von euch helfen.

    soweit bin ich schon (aber nach 5 stunden geb ich jetzt auf und suche hilfe!)

    index.php
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>PicBrowser</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="inc/prototype.js" type="text/javascript"></script>
    <script src="inc/scriptaculous.js" type="text/javascript"></script>
    
    <script type="text/javascript" language="javascript">
    /*new Effect.Highlight('uploadcontainer', {startcolor:'#ff9900'});*/
    function picUpload(){
    	new Ajax.Request('upload.inc.php', {asynchronous:true, method:'post', postBody:'upfile=' + document.uploadform.upfile.value, onSuccess:handlerFunc, onFailure:errFunc});
    }
    
    var handlerFunc = function(t) {
        alert(t.responseText);
    }
    
    var errFunc = function(t) {
        alert('Error ' + t.status + ' -- ' + t.statusText);
    }
    </script>
    </head>
    
    <body>
    <div id="header">
    	<h1>PicBrowser</h1>
    	<div id="header_right">
    		<span onclick="new Effect.Appear('uploadcontainer');" style="cursor:pointer;">Bild-Upload</span>
    	</div>
    	<div class="cleaner_both"></div>
    </div>
    
    <div id="middle">
    	<div id="uploadcontainer" class="infopanel" style="display:none;">
    		<div class="infopanel_head">Bitte w&auml;hlen Sie ein Bild aus:</div>
    		<div class="infopanel_body">
    		<form action="" id="uploadform" method="post" enctype="multipart/form-data">	
    			<input name="upfile" id="upfile" type="file" onchange="picUpload();" />
    		</form>
    		</div>
    		<div class="infopanel_footer"><input name="close" class="infopanel_button" type="button" value="Abbrechen" onclick="new Effect.Fade('uploadcontainer');" /></div>
    	</div>
    </div>
    
    <div id="footer">
    	<a href="javascript:window.close()" title="Fenster schlie&szlig;en">window close</a>
    </div>
    
    </body>
    </html>
    css file:
    Code:
    body {
    	color:#333;
    	background:#555;
    	margin:0;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	line-height:13px;
    	overflow:hidden;
    	padding:0;
    }
    
    #header {
    	position:fixed;
    	width:100%;
    	top:0;
    	height:35px;
    	overflow:auto;
    	margin:0;
    	padding:5px;;
    }
    
    #header h1 {
    	float:left;
    	font-size:20px;
    	font-weight:bold;
    	margin:0;
    	padding:0;
    	padding-top:5px;
    	color:#eee;
    }
    
    #header_right {
    	float:right;
    	padding-right:5px;
    }
    
    #middle {
    	position:fixed;
    	width:100%;
    	top:35px;
    	bottom:25px;
    	overflow:auto;
    	color:#333;
    	background:#eee;
    }
    
    #footer {
    	position:fixed;
    	bottom:0px;
    	width:100%;
    	height:25px;
    	overflow:auto;
    	text-align:right;
    }
    
    /** Infopanel **/
    .infopanel {
    	margin:5px;
    	margin-top:10px;
    	margin-bottom:10px;
    	border:1px solid #333;
    	width:400px;
    	background:#bbb;	
    }
    
    .infopanel_head {
    	color:#eee;
    	background:#333;
    	padding:2px;
    	margin-bottom:5px;
    	font-weight:bold;
    }
    
    .infopanel_body {
    	padding:5px;
    	margin:5px;
    	margin-bottom:10px;
    }
    
    .infopanel_footer {
    	color:#eee;
    	background:#333;
    	text-align:right;
    }
    
    .infopanel_button {
    	font-size:9px;
    	color:#333;
    	background:#eee;
    	margin:2px;
    }
    
    .cleaner_both {
    	clear:both;
    	visibility:none;
    }
    und die php datei zum bildupload - und da kommt leider nur der name an aber nicht die datei - oder so...
    PHP:
    <?php
    // Bild speichern
    move_uploaded_file($_FILES['upfile']['tmp_name'],"files/" $_FILES['upfile']['name']);
    ?>
     
  2. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    Ich hoffe, du weisst, das du nicht zwingend Ajax benötigst,
    um Dateien "im Hintergrund" hochzuladen?
     
  3. sideshow

    sideshow Thread Starter MacUser Mitglied

    Beiträge:
    92
    Zustimmungen:
    0
    Registriert seit:
    24.01.2005
    meinst du mit dem ganzen iframe zeugs?

    mh... habe mir ein par varianten angesehen und mir ein buch zu ajax gekauft. habe das gelesen und finde es sehr interessant. leider scheitert es dann doch an meinen unzureichenden java script kenntnissen (daher gleich noch ein buch über js gekauft das als nächstes gelesen wird.

    ich würds halt gern über ajax machen - oder was schlägst du vor?

    im grunde genommen funktioniert mein script auch schon ganz ok. wenn ich das datei-feld durch ein normales text-feld ersetze, dann geht es wunderbar und der inhalt wird ohne zu murren an das php script übergeben und kann weiterverarbeitet werden. aber beim dateiupload macht er leider gar nix....
     
  4. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    Ja. ;)
     
  5. sideshow

    sideshow Thread Starter MacUser Mitglied

    Beiträge:
    92
    Zustimmungen:
    0
    Registriert seit:
    24.01.2005
    mh... das hab ich schon mal gecheckt - und das ging auch einigermaßen!
    aber ich hätt das echt gern so wie ich jetzt schon angefangen hab... haste keine idee an was es liegt!!!
     
  6. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    http://community.xajaxproject.org/viewtopic.php?pid=2536

    Siehe #2. Fragt sich, wie ernstzunehmen das ist, es kling jedoch ein-
    leuchtend.
     
  7. sideshow

    sideshow Thread Starter MacUser Mitglied

    Beiträge:
    92
    Zustimmungen:
    0
    Registriert seit:
    24.01.2005
    mh - das werd ich mir zuhause mal genau durchlesen. jetz is erst mal feierabend!
    ich sag danke derweil!!!
     
  8. sideshow

    sideshow Thread Starter MacUser Mitglied

    Beiträge:
    92
    Zustimmungen:
    0
    Registriert seit:
    24.01.2005
    so wie ich die ganze sache sehe funktioniert das nicht so wie ich will...

    "... it isn't possible to upload files directly via an AJAX call because that would require Javascript code to read files from client machines directly (major security risk!)..."

    na dann muss ich eben doch auf die iframe methode ausweichen - macht aber auch nicht wirklich was...

    ich dank dir für deine hilfe!
     
Die Seite wird geladen...
Ähnliche Themen - Dateiupload PHP AJAX Forum Datum
Werte der gleichen Schlüssel summieren (assoziativen Array) Web-Programmierung 25.08.2016
einfaches php. emailformular bei strato Web-Programmierung 08.08.2015
PHP Array in Google Maps Wegpunkte umwandeln Web-Programmierung 13.03.2015
PHP Update auf 5.6 im Terminal für Localhost (MAMP und Laravel) Web-Programmierung 12.09.2014
PHP: Nächster Tag auf Deutsch ausgeben Web-Programmierung 23.01.2014

Diese Seite empfehlen

Benutzerdefinierte Suche