XQ-Tools - jQuery Plugin Compilation

Upload Progress Layer Category Tree Request Link Cookie     Download Lizenz

 


 

xqUpload Plugin einbinden

Syntax
object $.xqUpload([options]);
return: Es wird das xqUpload Objekt zurückgegeben
Javascript:
Code
$(function() { $('#xqUpload').xqUpload(); });


CSS:
Code
table.xqUploadQueue { border-spacing: 0; border: 1px solid #c0c0c0; margin-bottom: 10px; } table.xqUploadQueue td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xqUpload .remove { cursor: pointer; background-image: url(/images/remove.png); background-repeat: no-repeat; width: 16px; height: 16px; display: inline-block; } .xqUploadProgress { width: 100px; height: 16px; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 2px 2px 2px #000; line-height: 22px; text-align: center; overflow: hidden; background-image: url(/images/upload_progress_bar.png); background-repeat: no-repeat; background-position: 0 0; } .xqUploadProgress div { width: 0; height: 16px; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 2px 2px 2px #000; line-height: 22px; text-align: center; overflow: hidden; background-image: url(/images/upload_progress_bar.png); background-repeat: no-repeat; background-position: 0 -36px; } /** * The upload button */ .xqUploadButton { background-color: #222; border: 1px solid #c0c0c0; padding: 2px 5px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; } /** * Error message */ .xqUploadMessage { background-color: #AF0003; background-color: rgba(175, 0, 3, 0.8); padding: 2px 5px; color: #fff; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px; } .status { display: block; width: 100px; overflow: hidden; }



HTML:
Code
<div id="xqUpload" class="xqUpload"> <table class="xqUploadQueue"> <tbody> <tr> <td width="25px" class="remove"></td> <td width="300px" class="file"></td> <td width="150px" class="mime"></td> <td width="100px" align="right" class="size"></td> <td width="100px" align="center" class="progress"></td> </tr> </tbody> </table> <form action="/trash" method="post" enctype="multipart/form-data"> <input type="file" name="upload" multiple="multiple" /> <button class="submit" type="submit">Upload</button> <button class="cancle" type="button">Cancle</button> </form> </div>



Der Server muss diesen JSON code zurückgeben:
Code
{ files: { error: '', //Error code name: 'filename.jpg' //The filename size: 54983, //Filesize in byte type: 'image/jpeg', //Mime Type temp: 'temp0943834.jpg' //Temp Filename } }



PHP Beispiel:
Code
<?php /** * Gets the error code * @see http://www.php.net/manual/en/features.file-upload.errors.php * * @param int php error number * @return string error code */ function getErrorCode($errorNumber) { switch ($errorNumber) { case '0': $err = ''; break; case '1': $err = 'file_size_error'; break; case '2': $err = 'file_size_error'; break; case '3': $err = 'transfer_error'; break; case '4': $err = 'no_file_uploaded'; break; case '90': $err = 'file_type_error'; break; default: $err = 'internal_error'; } return $err; } if (isset($_FILES['upload']['name'])) { $dataArray = array('file' => array( 'error' => getErrorCode($_FILES['upload']['error']), 'name' => $_FILES['upload']['name'], 'size' => $_FILES['upload']['size'], 'type' => $_FILES['upload']['type'], 'temp' => $_FILES['upload']['tmp_name'], )); } echo json_encode($dataArray); ?>