S
sideshow
Mitglied
Thread Starter
- Dabei seit
- 24.01.2005
- Beiträge
- 92
- Reaktionspunkte
- 0
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
css file:
und die php datei zum bildupload - und da kommt leider nur der name an aber nicht die datei - oder so...
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ä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ß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']);
?>
