j-PictureUploadExpert

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Avancerad användning
drag och drop stöd
Stöd för multiple
Stöd för EXIF-orientation
Flera bilder skickas en efter en
Stöd för j-Loading

Konfigurera:

url {String} (IMPORTANT) Ladda upp URL (behövs)
width {Number} en bildbredd (kravad)
height {Number} en bildhöjd (kravad)
background {String} (alternativ) en bakgrundsfärg (default: vit)
schema {String} förberedd objekt för sändning (default: {file:base64,filename:filename}, base64 + filename är ett värde från förhandsvisning)
quality {Number} JPEG kvalitet (default: 90)
customize {Boolean} återställer bilden till den totala definierade storleken (default: true)
disabled {Boolean} inaktiverar bildupptagning (default: false)
clickselector {String} en klass för anpassad klickselektor (default: none)
dropselector {String} en klass för anpassad drop selector (default: none)
class {String} toggles klass på dropselector om drag över utfärdas (default: over)
error {String} en väg till metoden method(err) när ett fel kastas

Använd den med <ui-component name="pictureuploadexpert">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Denis Granec. källor: den Componentator Komponenterna i lager, MIT licens.

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>