BloodySword: Multi-Uploader mit Fortschrittsanzeige

Beitrag lesen

Ich verstehe nicht, wieso es bei mir nicht geht...

Der Code meiner PHP passt hier leider nicht rein :(

Einige Sachen können verschoben sein, da ich mit einem anderen Editor arbeite, der irgendwie Tabs und Leerzeichen beliebig mischt -_-.

Hier die Javascripts:

<script type="text/javascript" src="js/ajax/loadpage.js"></script>  
<script type="text/javascript" src="upload/swfupload.js"></script>  
<script type="text/javascript" src="upload/plugins/swfupload.speed.js"></script>

Script für die swfupload initialisation:

        var swfu;  
        function fileDialogComplete() {  
        	this.startUpload();  
        }  
        function uploadStart(file) {  
        	try {  
        		updateDisplay.call(this, file);  
        		document.getElementById("btnCancel").style.display="inline";  
        	}  
        	catch (ex) {  
        		this.debug(ex);  
        	}  
        }  
        function uploadProgress(file, bytesLoaded, bytesTotal) {  
        	try {  
        		updateDisplay.call(this, file);  
        	} catch (ex) {  
        		this.debug(ex);  
        	}  
        }  
        function uploadError(file, errno, message) {  
          switch (errno) {  
            case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:  
              alert("Die Datei, die Du hochladen wolltest ist zu groß!");  
              break;  
            case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:  
              alert("Der Server gab einen Fehler zurück! Verbindung fehlgeschlagen!");  
              break;  
            case SWFUpload.UPLOAD_ERROR.IO_ERROR:  
              alert("Die Verbindung ist unerwartet abgebrochen!");  
              break;  
            case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:  
              alert("Der Server hat den Upload zurückgewiesen! Wende dich an einen Administrator!");  
              break;  
            case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:  
              alert("Die Datei entspricht nicht den angegebenen Dateitypen! Wähle eine Datei in den angegebenen Formaten!");  
              break;  
            case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:  
              alert("Upload abgebrochen!");  
              break;  
            case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:  
              alert("Upload abgebrochen!");  
              break;  
            }  
            document.getElementById("btnCancel").style.display="none";  
        }  
        function uploadSuccess(file, serverData) {  
        	try {  
        		this.customSettings.tdCurrentSpeed.innerHTML = SWFUpload.speed.formatBPS(file.averageSpeed);  
            this.customSettings.tdTimeRemaining.innerHTML = "0 s";  
        		this.customSettings.tdPercentUploaded.innerHTML = SWFUpload.speed.formatPercent(file.percentUploaded) + ", Erfolgreich!";  
        	} catch (ex) {  
        		this.debug(ex);  
        	}  
        }  
        function uploadComplete(file) {  
        	if(this.getStats().successful_uploads) {  
            this.customSettings.tdPercentUploaded.innerHTML = "100%, Erfolgreich!";  
  
      		  //Hochgeladenes Bild darstellen  
      		  ajaxLoadPage("'.$uploadphp.'?where=get_profile_picture","img");  
          }  
  
          document.getElementById("btnCancel").style.display="none";  
        }  
        function updateDisplay(file) {  
        	this.customSettings.tdCurrentSpeed.innerHTML = SWFUpload.speed.formatBPS(file.currentSpeed);  
        	this.customSettings.tdTimeRemaining.innerHTML = SWFUpload.speed.formatTime(file.timeRemaining);  
        	this.customSettings.tdPercentUploaded.innerHTML = SWFUpload.speed.formatPercent(file.percentUploaded);  
        }  
        window.onload = function () {  
          var settings = {  
          				file_dialog_complete_handler: fileDialogComplete,  
          				upload_start_handler : uploadStart,  
          				upload_progress_handler : uploadProgress,  
          				upload_success_handler : uploadSuccess,  
          				upload_complete_handler : uploadComplete,  
          				upload_error_handler : uploadError,  
                  upload_url : "'.$uploadphp.'",  
                  flash_url : "upload/swfupload.swf",  
                  file_size_limit : "'.$filesizelimit.'",  
                  file_types : "'.$filetypes.'",  
                  file_types_description : "'.$ftdescrip.'",  
                  file_upload_limit : '.$maxfiles.',  
                  file_queue_limit : 0,  
                  custom_settings : {  
          					tdCurrentSpeed : document.getElementById("tdCurrentSpeed"),  
          					tdTimeRemaining : document.getElementById("tdTimeRemaining"),  
          					tdPercentUploaded : document.getElementById("tdPercentUploaded")  
          				},  
          				file_post_name : "file",  
                  post_params : {  
                    "uploaded" : "yes",  
                    "PHPSESSID" : "'.session_id().'"  
                  },  
                  use_query_string : true,  
                  preserve_relative_urls : false,  
                  // Button settings  
                  button_image_url: "images/btnupload.png",  
                  button_width: "80",  
                  button_height: "24",  
                  button_placeholder_id: "spanButtonPlaceHolder"  
          };  
          swfu = new SWFUpload(settings);  
          document.getElementById("btnCancel").style.display="none";  
        };

Ich finde es auch sehr unsicher die Sessionid mitten in die HTML-Ausgabe zu setzten...

Template:

<div class="tabcont">  
  {foreach from=$tabs item=tab}  
    <ul class="tabs">  
      <li class="tab{$tab.sel}{$tab.class}"><div id="tab{$tab.id}" class="tab{$tab.sel}{$tab.class}" onClick="{$tab.onClick}">{$tab.title}</div></li>  
    </ul>  
  {/foreach}  
  <div class="tabcontent" id="tabcontent">  
    <h2>{$gtitle}</h2>  
    <p>  
      {if $profilepic!="error:nopic;"}  
      Aktuelles Profilbild:<br />  
      <div class="transparent" id="img"><img src="{$profilepic}" alt="Profilbild" /></div>  
      {else}  
      <div class="transparent" id="img">Du hast noch kein Profilbild hochgeladen!</div>  
      {/if}  
    </p>  
		<table class="cpres" width="480px">  
      <tr>  
				<td class="cpres">Fortschritt:</td>  
				<td id="tdPercentUploaded" class="cpres"  colspan="3"></td>  
      </tr>  
			<tr class="cpres">  
				<td class="cpres" width="25%">Übertragunsrate:</td>  
				<td id="tdCurrentSpeed" class="cpres" width="25%"></td>  
				<td class="cpres" width="25%">Verbleibende Zeit:</td>  
				<td id="tdTimeRemaining" class="cpres" width="25%"></td>  
			</tr>  
			<tr class="cpres">  
				<td class="cpres" colspan="2">  
          <span id="spanButtonPlaceHolder"></span>  
        </td>  
				<td class="cpres" style="text-align:right;" colspan="2">  
          <input id="btnCancel" type="button" class="button" value="Abbrechen" onclick="swfu.cancelQueue();" disabled="" />  
        </td>  
			</tr>  
		</table>  
    <h3>Bedingungen</h3>  
  	<ul>  
      <li>Es sind Bilder in den Formaten PNG, GIF und JPG erlaubt.</li>  
      <li>Die maximale Dateigröße beträgt {$filesizelimit}.</li>  
      <li>Die maximale Bildgröße beträgt 4000x4000 Pixel.</li>  
      <li>Das Bild wird anschließend automatisch auf {$img_size} Pixel verkleinert, das Seitenverhälntnis wird beibehalten!</li>  
    </ul>  
    <p>  
      Hinweis: Das Bild wird in deiner Gallerie hochgeladen und als "profilbild" makiert.<br />  
      Du kannst dort dieses Bild allerdings weder sehen, noch bearbeiten,<br />es kann nur hier geändert  
      oder gelöscht werden.  
    </p>  
  </div>  
</div>