ws_upload.htm
Template ws_upload.htm
Dieses Template enthält alle notwendigen funktionalen Elemente – Sie müssen es nur noch an Ihr Shop-Design anpassen und einbinden.
Wegweiser: Upload-Modul
<!DOCTYPE html>
<html>
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<base href="~protocol~://~hostname~~baseurl~">
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-design-1.0.0.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.1.0.js"></script>
<script type="text/javascript" src="/$WS/ws_sysdata/js/upload-1.0.0.js"></script>
...
</head>
<body>
<h1>WEBSALE Upload Modul</h1>
<!-- Tag für die Ersetzung von Scripten, die nicht in eine externe Datei ausgelagert werden können -->
~WSUploadScripts~
<!-- Hinweisbereich, der eingeblendet wird, wenn der Browser kein DHTML unterstützt -->
<div id="NoDHTML">
Achtung! <br>
Ihr Browser unterstützt kein DHTML! <br>
Teile der Funktionalitäten dieser Seite stehen deshalb nicht zur Verfügung!
</div>
<!-- Bereich für Fehler- und Hinweismeldungen -->
{Msg}
~Msg~
{/Msg}
<!-- Bereich für die Erfolgsmeldung -->
{UploadSuccess}
Ihr Upload war erfolgreich
{/UploadSuccess}
<!-- ************** -->
{UplIdInput}
<!-- Bereich, wenn der Aufruf des Upload-Moduls ohne Upload-ID oder Auftragsnummer erfolgt -->
<p>Upload-ID-Input</p>
<form name="idform" method="post" action="~cgiurl~" accept-charset="ISO-8859-1">
<table align="center">
<tr>
<th colspan="2">Dateiupload des Shops ~CommonId~</th>
</tr>
<tr>
<td width="48%">
<div align="right">Upload-ID:</div>
</td>
<td width="52%">
<input type="text" name="UploadId" value="~UploadId~">
</td>
</tr>
<tr>
<td width="48%">
<div align="right"><b>oder</b> Ordernumber:</div>
</td>
<td width="52%">
<input type="text" name="Ordernumber" value="~Ordernumber~">
</td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input type="submit" name="OkBtn" value="OK">
</div>
</td>
</tr>
</table>
</form>
{/UplIdInput}
<!-- ************** -->
{ItemList}
<!-- Bereich für die Übersicht aller Bestellpositionen einer Bestellung -->
<p>ItemList</p>
<table align="center">
<tr>
<th>Bestellpositionen des Auftrags ~UploadId~</th>
</tr>
</table>
<table align="center">
<tr >
<th>Produktname</th>
<th>Produktnummer</th>
<th>Upload-Positions-ID</th>
<th colspan="2"> </th>
</tr>
{@PrdData}
<tr>
<td>~PrdName~</td>
<td>~PrdNumber~</td>
<td>~PosID~</td>
<td>
<a href="~PrdEdtLink~">bearbeiten</a>
{PosLocked}
<span>Upload abgeschlossen</span>
{/PosLocked}
{!PosLocked}
{HasFile}Datei vorhanden{/HasFile}
{!HasFile}KEINE Datei vorhanden{/!HasFile}
{/!PosLocked}
</td>
<td>
{SinglePosLock}
<!-- Bereich um den Upload einer einzelnen Bestellposition innerhalb der Klammerung ItemList abzuschließen -->
{!PosLocked}
{HasFile}
<form name="lockForm" method="post" action="~poslockurl~" accept-charset="ISO-8859-1">
<input type="submit" name="LockBtn" id="LockBtn" value="Upload für diese Bestellposition abschließen">
</form>
{/HasFile}
{!HasFile}
{/!HasFile}
{/!PosLocked}
{/SinglePosLock}
</td>
</tr>
{/@PrdData}
</table>
{AllPosLock}
<!-- Bereich um den Upload innerhalb der Klammerung ItemList mit allen Bestellpositionen abzuschließen -->
{HasFiles}
{!UploadLocked}
{UploadsComplete}
<form name="lockform" method="post" action="~ordlockurl~" accept-charset="ISO-8859-1">
<p align=center>
<input type="submit" name="LockBtn" value="Uploads abschließen">
Dieser Button bestätigt uns, dass Sie alle Dateien hochgeladen haben.
Nachdem Sie diesen Button gedrückt haben, können Sie KEINE WEITEREN Daten, die zu diesem Auftrag gehören, an uns versenden.
</form>
{/UploadsComplete}
{!UploadsComplete}
Es liegen noch Bestellpositionen vor, für die keine Dateien hochgeladen wurden.
{/!UploadsComplete}
{/!UploadLocked}
{/HasFiles}
{/AllPosLock}
{/ItemList}
<!-- ************** -->
{Item}
<!-- Detailansicht für den Upload für eine bestimmte Bestellposition -->
<!-- Bereich wird sofort angezeigt, wenn bei einem Auftrag nur eine Bestellposition vorhanden ist -->
<p>Item</p>
<table align="center">
<tr>
<th colspan="2">
<div align="center">Produktdaten</div>
</th>
</tr>
<tr>
<td width="50%">
<div align="right">Produktname:</div>
</td>
<td width="50%">~PrdName~ </td>
</tr>
<tr>
<td width="50%">
<div align="right">Produktnummer:</div>
</td>
<td width="50%">~PrdNumber~ </td>
</tr>
<tr>
<td width="50%">
<div align="right">Upload-Positions-ID:</div>
</td>
<td width="50%">~PosId~</td>
</tr>
{!OrdNumMode}
<tr>
<td width="50%">
<div align="right">Upload-ID:</div>
</td>
<td width="50%">~UploadId~</td>
</tr>
{/!OrdNumMode}
{OrdNumMode}
<tr>
<td width="50%">
<div align="right">Ordernumber:</div>
</td>
<td width="50%">~Ordernumber~</td>
</tr>
{/OrdNumMode}
</table>
<!-- Bereich über die Übersicht der bereits hochgeladenen Dateien -->
<form name="delform" method="post" action="~cgiurl~" accept-charset="ISO-8859-1">
<table align="center">
<tr>
<th colspan="4">Bereits vorhandene Dateien</th>
</tr>
{@Files}
<tr>
<td>~FileName~</td>
<td>~FileSize~ MB</td>
<td style="vertical-align: middle">
<select name="~FileInfoSelName~" id="~FileInfoSelName~"
onchange="fileInfoChanged('~FileName~',$(this).val(),'~FileInfoProcId~');">~fileinfoopts~</select>
<img src="~baseurl~images/ws-loading.gif" style="visibility: hidden;" id="~FileInfoProcId~">
</td>
<td>
<input type="checkbox" name="~FileMarkBoxName~" value="marked">
<input type="hidden" name="~FileNameName~" value="~FileName~">
</td>
</tr>
{/@Files}
{HasFiles}
<!-- Bereich, der angezeigt wird, wenn bereits hochgeladene Dateien vorhanden sind -->
<tr>
<td> </td>
<td>Gesamt: ~TotalSize~ MB (max. ~PositionLimitMB~ MB)</td>
<td> </td>
<td>
<input type="submit" name="DelBtn" id="DelBtn" value="Löschen">
</td>
</tr>
{/HasFiles}
{NoFiles}
<!-- Bereich, der angezeigt wird, wenn noch keine hochgeladenen Dateien vorhanden sind -->
<tr>
<td colspan="4">
<div align="center">Keine Dateien vorhanden</div>
</td>
</tr>
{/NoFiles}
</table>
</form>
{HasFiles}
{SinglePosLock}
<!-- Bereich um den Upload einer einzelnen Bestellposition innerhalb der Klammerung Item abzuschließen -->
{!PosLocked}
<form name="lockForm" method="post" action="~poslockurl~" accept-charset="ISO-8859-1">
<p align="center">
<input type="submit" name="LockBtn" id="LockBtn" value="Upload für diese Bestellposition abschließen">
Hiermit bestätigen Sie, dass Sie für diese Position alle Dateien hochgeladen haben.
Anschließend können keine weiteren Änderungen vorgenommen werden.
</p>
</form>
{/!PosLocked}
{PosLocked}
<p align="center">Uploads für diese Position gesperrt</p>
{/PosLocked}
{/SinglePosLock}
{/HasFiles}
<div id="inputdiv">
{!UploadLocked}
{Web2Print}
Die Druckdaten dieser Bestellung werden über Web2Print erstellt, ein Datei-Upload ist deshalb nicht möglich.
{/Web2Print}
<!-- {!Web2PrintX} -->
<form name="uplform" id="uplform" enctype="multipart/form-data" method="post" action="~uplurl~" accept-charset="ISO-8859-1">
<table align="center">
<tr>
<th colspan="2">Neue Datei hochladen</th>
</tr>
<tr>
<td width="33%">
<div align="right">Name der Datei:</div>
</td>
<td width="67%">
<input type="file" name="uplfile">
</td>
</tr>
<tr>
<td width="33%"> </td>
<td width="67%">
<select name="uplfileinfo" id="uplfileinfo">
~uplfileinfoopts~
</select>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<input type="submit" name="UploadBtn" id="UploadBtn" value="Transfer starten">
</div>
</td>
</tr>
</table>
</form> <!-- uplform -->
<!-- {/!Web2PrintX} -->
{/!UploadLocked}
{AllPosLock}
{Unlock}
<!-- Bereich um den Abschluss des Uploads aller Bestellpositionen aufzuheben -->
<form name="unlockform" enctype="multipart/form-data" method="post" action="~unlockurl~" accept-charset="ISO-8859-1">
<table width="75%" border="1" align="center">
<tr>
<td align="center">
<input type="submit" name="UnlockBtn" value="Abschluss komplett aufheben">
</td>
</tr>
</table>
</form>
{/Unlock}
{/AllPosLock}
{SinglePosLock}
{UnlockPos}
<!-- Bereich um den Abschluss des Uploads einer einzelnen Bestellposition aufzuheben -->
<form name="unlockposform" enctype="multipart/form-data" method="post" action="~unlockposurl~" accept-charset="ISO-8859-1">
<table width="75%" border="1" align="center">
<tr>
<td align="center">
<input type="submit" name="UnlockBtn" value="Abschluss der Bestellposition aufheben">
</td>
</tr>
</table>
</form>
{/UnlockPos}
{/SinglePosLock}
{ItemListLink}
<p align="center"><a href="~ItemListLink~">Zurück zur Liste der Bestellpositionen</a></p>
{/ItemListLink}
</div><!-- #inputdiv -->
<div id="transferdiv" style="display: none;">
<!-- Versteckter Bereich für den Upload-Fortschritt / Fortschrittsanzeige -->
<!-- Wird nur angezeigt, wenn eine Datei gerade hochgeladen wird -->
<table align="center">
<tr>
<th colspan="2">Übertragung</th>
</tr>
<tr>
<td width="49%">
<div align="right">Dateiname:</div>
</td>
<td width="51%"><span id="FileName">???</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Dateigröße:</div>
</td>
<td width="51%"><span id="BytesTotal">???</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Dateigröße übertragen:</div>
</td>
<td width="51%"><span id="BytesSent">0</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Dateigröße verbleibend:</div>
</td>
<td width="51%"><span id="BytesRem">0</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Zeit vergangen:</div>
</td>
<td width="51%"><span id="timeelapsed">0</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Zeit verbleibend:</div>
</td>
<td width="51%"><span id="timerem">0</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Upload abgeschlossen um:</div>
</td>
<td width="51%"><span id="timeend">???</span></td>
</tr>
<tr>
<td width="49%">
<div align="right">Gesamtzeit:</div>
</td>
<td width="51%"><span id="timetotal">???</span></td>
</tr>
</table>
<!-- Ladegrafik - wird erst eingeblendet, wenn das Hochladen länger als 2 Sekunden dauert -->
<div id="ProgressDiv" style="width: 300px; margin: 10px auto;">
<div style="float: left; width: 250px; border-width: 1px; border-style: solid;">
<img src="~baseurl~images/blue_bar.gif" id="ProgressBar" style="width: 0%; height:15px;" alt="">
</div>
<div style="float: left; width: 40px">
<span id="ProgPerText">0%</span>
</div>
</div>
<!-- Bereich für die Anzeige einer Fehlermeldung, wenn eine Fortschrittanzeige nicht möglich ist -->
<div id="ProgressErrorDiv" style="color: #F00; font-weight: bold; width: 300px; margin: 10px auto; text-align: center; display: none;">
Fortschritt kann nicht angezeigt werden.
</div>
<!-- Bereich für die Anzeige des Layers zum Bestätigen des Löschens einer hochgeladenen Datei -->
<div id="CancelDiv" style="text-align: center;">
<form name="cancelform" method="post" action="~cancelurl~" accept-charset="ISO-8859-1">
<input type="hidden" name="uplsid">
<input type="submit" name="CancelUplBtn" id="CancelUplBtn" value="Upload abbrechen" onClick="return cancelUpload();">
</form>
</div><!-- #canceldiv -->
</div><!-- #transferdiv -->
<!-- versteckter Bereich für die Anzeige eines Layers, der sich automatisch einblendet, wenn die Dateigröße überschritten wurde -->
<div id="toolargediv" style="display: none;">
<table width="75%" border="1" align="center">
<tr>
<th>Fehler bei Übertragung</th>
</tr>
<tr>
<td align="center"><font color="red"><b>Es können nur Dateien bis zur einer Größe von ~FileLimitMB~MB hochgeladen werden</b></font></td>
</tr>
<tr>
<td align="center"><a href="~NewUplLink~">Neuer Upload</a></td>
</tr>
</table>
</div>
<!-- Bereich um den Upload für alle Bestellpositionen innerhalb der Klammerung Item (Detailansicht) abzuschließen -->
{AllPosLock}
{HasFiles}
{!UploadLocked}
{UploadsComplete}
<form name="lockform" method="post" action="~lockurl~" accept-charset="ISO-8859-1">
<p align=center>
<input type="submit" name="LockBtn" value="Uploads abschließen">
Dieser Button bestätigt uns, dass Sie alle Dateien hochgeladen haben.
Nachdem Sie diesen Button gedrückt haben, können Sie KEINE WEITEREN Daten, die zu diesem Auftrag gehören, an uns versenden.
</form>
{/UploadsComplete}
{!UploadsComplete}
Es liegen noch Bestellpositionen vor, für die keine Dateien hochgeladen wurden.
{/!UploadsComplete}
{/!UploadLocked}
{/HasFiles}
{/AllPosLock}
{Logging}
<!-- Protokoll-Bereich zur Anzeige der Daten für die bereits durchgeführten Aktionen -->
<table align="center">
<tr>
<th colspan="3">Durchgeführte Übertragungen</th>
</tr>
{@LogLines}
<tr>
<td width="16%">~Date~ ~Time~</td>
<td width="24%">~Type~</td>
<td width="60%">~FileName~</td>
</tr>
{/@LogLines}
</table>
{/Logging}
{/Item}
<!-- ************** -->
</body>
</html>