j-PictureUploadExpert

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Προηγμένη χρήση
Δράση και υποστήριξη
Υποστήριξη multiple
Υποστηρίζει την προσανατολισμό
Πολλές εικόνες αποστέλλονται μία με μια
Υποστήριξη j-Loading

ΕΠΙΤΡΟΦΗ:

url {String} (IMPORTANT) upload URL (απαιτείται)
width {Number} πλάτος εικόνας (αναγκαία)
height {Number} ύψος εικόνας (αναγκαία)
background {String} (επιλεγμένο) ένα χρώμα υπόβαθρου (προεπιλογή: λευκό)
schema {String} προετοιμασμένο αντικείμενο για αποστολή (προεπιλογή: {file:base64,filename:filename}, base64 + filename είναι μια τιμή από την προβολή)
Ποιότητα quality {Number} JPEG (προεπιλεγμένη: 90)
Το customize {Boolean} αναζωογονεί την εικόνα στο σύνολο του καθορισμένου μεγέθους (προεπιλεγμένο: true)
disabled {Boolean} απενεργοποιεί την αναβάθμιση εικόνας (προεπιλεγμένη: false)
clickselector {String} μια κατηγορία για προσαρμοσμένο επιλεγόμενο κλικ (προεπιλογή: none)
dropselector {String} μια κατηγορία για προσαρμοσμένο επιλεκτή πτώσης (προεπιλεγμένη: none)
Η τάξη class {String} λειτούργησε στο dropselector εάν εκπέμπεται η λήψη (προεπιλεγμένη: over)
error {String}: Ο δρόμος προς τη μέθοδο method(err) όταν ρίχνεται ένα σφάλμα

Χρησιμοποιήστε το με <ui-component name="pictureuploadexpert">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Denis Granec. Πηγή: The Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

example.html

<style>
	.dragdrop-message { margin-top:35px; text-align:center; font-weight:bold; }
	.dragdrop-container { height:100px; background:#EFEFEF; border:2px dashed #CCC; border-radius: 2px; }
	.over { border-color: #000 !important; }
</style>

<ui-component name="loading" class="hidden"></ui-component>

<div style="padding:50px;max-width:300px">
	<ui-component name="pictureuploadexpert" path="pictures" config="width:200;height:200;url:/api/upload/base64/;dropselector:.dragdrop-container" class="link m">Click to upload</ui-component>
	<div class="dragdrop-container m">
		<div class="dragdrop-over">
			<div class="dragdrop-message">Drop images here</div>
		</div>
	</div>
</div>

<script>
	var pictures = [];
</script>