Created
May 15, 2019 14:13
-
-
Save RainerRoss/5901b8a824ccb7c64887e45ff04e09a4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Uploader mit Vorschau</title> | |
| <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.min.css"> | |
| <style> | |
| .picture_selector .webix_image { | |
| background-size: contain; | |
| border: 1px solid #A4BED4; | |
| background-position:center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="http://cdn.webix.com/edge/webix.min.js"></script> | |
| <script> | |
| webix.ui({ | |
| rows:[ | |
| { | |
| view:"toolbar", | |
| css:"webix_dark", | |
| elements:[{view:"label", label:"Uploader mit Bildvorschau"}] | |
| }, | |
| { | |
| template:"", | |
| height:10 | |
| }, | |
| { | |
| id: "uploader", | |
| view: "uploader", | |
| type: "imageTop", | |
| datatype: "json", | |
| label: "klicken, um eine Datei auszuwählen<br><br>oder<br><br>Datei auf dieses Feld ziehen", | |
| height: 300, | |
| width: 300, | |
| css: "picture_selector", | |
| multiple: false, | |
| autosend: false, | |
| on: { | |
| onAfterFileAdd: function(file) { | |
| var reader = new FileReader(); | |
| reader.onload = function(e) { | |
| var button = $$("uploader"); | |
| button.config.image = reader.result; | |
| button.config.label = ''; | |
| button.refresh(); | |
| $$("uploadForm").elements.data.setValue(reader.result); | |
| $$("uploadForm").elements.file.setValue(file.name); | |
| } | |
| reader.readAsDataURL(file.file); | |
| } | |
| } | |
| }, | |
| { | |
| template:"", | |
| height:35 | |
| }, | |
| { | |
| view:"form", id:"uploadForm", elements:[ | |
| {view:"text", label:"Pfad:", name:"path", value:"/home/daten/"}, | |
| {view:"text", label:"Datei:", name:"file"}, | |
| {view:"text", label:"Bilddaten:", name:"data"}, | |
| {cols:[ | |
| {view:"button", type:"form", value:"Daten senden", width:200, | |
| click:function(){ | |
| var values = this.getFormView().getValues(); | |
| webix.message({text:'Formulardaten: ' + '<pre>' + JSON.stringify(values, 0, 1) + '</pre>', expire:-1}); //xxx | |
| } | |
| } | |
| ]} | |
| ] | |
| } | |
| ] | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment