image upload and preview in asp.net - asp.net

I want to browse image from client computer as soon as image is uploaded, it will display preview and when client(I) saves details, it will be saved in the database.
as well as that image will be displayed in page
I have fileuploader
<style type="text/css">
#newPreview
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css "
rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js "></script>
<script language="javascript" type="text/javascript">
function PreviewImg(imgFile) {
if (navigator.appName != "Netscape") {
var newPreview = document.getElementById("newPreview");
newPreview.style.display = "";
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "250px";
newPreview.style.height = "200px";
}
else {
if (imgFile.files && imgFile.files[0]) {
var reader = new FileReader();
$('[id*=divFirfox]').css("display", "block");
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(250)
.height(200);
};
reader.readAsDataURL(imgFile.files[0]);
}
}
}
</script>
now what should i do to retrive image from database?
something like link

Related

Replacing code with link to a file in ghost blog hbs

I am using the file_html function in bokeh to produce html that I want to embed into a ghost blog website.
If I load the id in a html card on the site, and then paste the head and body of the file into a code injection/header window, the output is fine.
But the html files can be long. So, rather than pasting the code, I want to save the file in my theme, and then include a link to that file. I've tried different ways, but can't get the chart to show.
This is what pasting the head/body into the code injection header looks like:
script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<script type="application/json" id="1653">
{"1f335636-847c-44ca-ac3d-a39e52279a15":{"defs":[],"roots":{"references":[{"attributes":{"line_alpha":0.2,"line_color":"blue","x":{"field":"Date"},"y":{"field":"A"}},"id":"1474","type":"Line"},{"attributes":{"coordinates":null,"formatter":{"id":"1483"},"group":null,"major_label_policy":{"id":"1484"},"ticker":{"id":"1449"}},"id":"1448","type":"LinearAxis"},{"attributes":{},"id":"1483","type":"BasicTickFormatter"},{"attributes":{"coordinates":null,"formatter":{"id":"1480"},"group":null,"major_label_policy":{"id":"1481"},"ticker":{"id":"1453"}},"id":"1452","type":"LinearAxis"},{"attributes":{"data":{"A":{"__ndarray__":"q2jSD7sDvr+pDX3hPMntvxSFJEWY1eg/MVje9zOj8L+47dbtoFzTPw4XszUKu+0/","dtype":"float64","order":"little","shape":[6]},"B":{"__ndarray__":"1i8GC4Oi8D+uLg3FLEbsvwTnKftsKAPArl2CHJBq5L9l8duvR2/hPzi+J1DhqPA/","dtype":"float64","order":"little","shape":[6]},"C":{"__ndarray__":"hrXr9J6Xdr+t0s/xTnjKvxrjdAWjo/k/9U9XIzQq5D9rBurlogrxP0qoktgjAPg/","dtype":"float64","order":"little","shape":[6]},"D":{"__ndarray__":"s0qFVyjEtL+e/bFQtfTdv46B45hT4Mq/ftVSa9MK7b+DcTodgFj5P8Bs4A3NS/e/","dtype":"float64","order":"little","shape":[6]},"Date":{"__ndarray__":"AAAA57Nrd0IAAMBMBmx3QgAAgLJYbHdCAABAGKtsd0IAAAB+/Wx3QgAAwONPbXdC","dtype":"float64","order":"little","shape":[6]}},"selected":{"id":"1486"},"selection_policy":{"id":"1485"}},"id":"1437","type":"ColumnDataSource"},{"attributes":{},"id":"1440","type":"DataRange1d"},{"attributes":{"line_alpha":0.1,"line_color":"blue","x":{"field":"Date"},"y":{"field":"A"}},"id":"1473","type":"Line"},{"attributes":{},"id":"1484","type":"AllLabels"},{"attributes":{"coordinates":null,"data_source":{"id":"1437"},"glyph":{"id":"1491"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1493"},"nonselection_glyph":{"id":"1492"},"view":{"id":"1495"}},"id":"1494","type":"GlyphRenderer"},{"attributes":{},"id":"1459","type":"SaveTool"},{"attributes":{},"id":"1442","type":"DataRange1d"},{"attributes":{"line_color":"blue","x":{"field":"Date"},"y":{"field":"A"}},"id":"1472","type":"Line"},{"attributes":{},"id":"1453","type":"BasicTicker"},{"attributes":{},"id":"1457","type":"WheelZoomTool"},{"attributes":{"below":[{"id":"1448"}],"center":[{"id":"1451"},{"id":"1455"},{"id":"1488"}],"left":[{"id":"1452"}],"renderers":[{"id":"1475"},{"id":"1494"}],"title":{"id":"1470"},"toolbar":{"id":"1463"},"x_range":{"id":"1440"},"x_scale":{"id":"1444"},"y_range":{"id":"1442"},"y_scale":{"id":"1446"}},"id":"1439","subtype":"Figure","type":"Plot"},{"attributes":{"axis":{"id":"1452"},"coordinates":null,"dimension":1,"group":null,"ticker":null},"id":"1455","type":"Grid"},{"attributes":{"overlay":{"id":"1462"}},"id":"1458","type":"BoxZoomTool"},{"attributes":{"tools":[{"id":"1456"},{"id":"1457"},{"id":"1458"},{"id":"1459"},{"id":"1460"},{"id":"1461"},{"id":"1508"}]},"id":"1463","type":"Toolbar"},{"attributes":{},"id":"1485","type":"UnionRenderers"},{"attributes":{"source":{"id":"1437"}},"id":"1476","type":"CDSView"},{"attributes":{"label":{"value":"A"},"renderers":[{"id":"1475"}]},"id":"1489","type":"LegendItem"},{"attributes":{},"id":"1486","type":"Selection"},{"attributes":{"bottom_units":"screen","coordinates":null,"fill_alpha":0.5,"fill_color":"lightgrey","group":null,"left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1462","type":"BoxAnnotation"},{"attributes":{},"id":"1456","type":"PanTool"},{"attributes":{},"id":"1446","type":"LinearScale"},{"attributes":{"coordinates":null,"group":null,"text":"Trial"},"id":"1470","type":"Title"},{"attributes":{},"id":"1480","type":"BasicTickFormatter"},{"attributes":{"coordinates":null,"group":null,"items":[{"id":"1489"},{"id":"1507"}]},"id":"1488","type":"Legend"},{"attributes":{},"id":"1444","type":"LinearScale"},{"attributes":{"line_alpha":0.2,"line_color":"green","x":{"field":"Date"},"y":{"field":"B"}},"id":"1493","type":"Line"},{"attributes":{},"id":"1460","type":"ResetTool"},{"attributes":{"callback":null,"formatters":{"#Date":"datetime"},"tooltips":[["Date","#Date{%F}"],["A","#{A}{0,0.0}"],["B","#{B}{0,0.0}"]]},"id":"1508","type":"HoverTool"},{"attributes":{},"id":"1461","type":"HelpTool"},{"attributes":{"line_alpha":0.1,"line_color":"green","x":{"field":"Date"},"y":{"field":"B"}},"id":"1492","type":"Line"},{"attributes":{},"id":"1449","type":"BasicTicker"},{"attributes":{"line_color":"green","x":{"field":"Date"},"y":{"field":"B"}},"id":"1491","type":"Line"},{"attributes":{"axis":{"id":"1448"},"coordinates":null,"group":null,"ticker":null},"id":"1451","type":"Grid"},{"attributes":{"source":{"id":"1437"}},"id":"1495","type":"CDSView"},{"attributes":{"label":{"value":"B"},"renderers":[{"id":"1494"}]},"id":"1507","type":"LegendItem"},{"attributes":{},"id":"1481","type":"AllLabels"},{"attributes":{"coordinates":null,"data_source":{"id":"1437"},"glyph":{"id":"1472"},"group":null,"hover_glyph":null,"muted_glyph":{"id":"1474"},"nonselection_glyph":{"id":"1473"},"view":{"id":"1476"}},"id":"1475","type":"GlyphRenderer"}],"root_ids":["1439"]},"title":"Bokeh Application","version":"2.4.3"}}
</script>
<script type="text/javascript">
(function() {
const fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
const docs_json = document.getElementById('1653').textContent;
const render_items = [{"docid":"1f335636-847c-44ca-ac3d-a39e52279a15","root_ids":["1439"],"roots":{"1439":"4484be71-5c42-4872-ad08-d14d68f5b8be"}}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
let attempts = 0;
const timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
clearInterval(timer);
embed_document(root);
} else {
attempts++;
if (attempts > 100) {
clearInterval(timer);
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
}
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
And this is my latest attempt to replace the body with a link to the file:
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
<script type="text/html"
src="/assets/bokeh_new/s3_partial.html"
></script>

Importing data via api call for vis.js

Following is the code I am trying for vis.js .I am trying to visualize data present on my server in json format through xmlhttprequest. But all it shows is blank screen as output. I am running the following code on server. Reponse shows status 200 and blank screen
<html>
<head>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid rgb(134, 29, 29);
}
</style>
</head>
<body>
<div id="testdiv"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
// function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
//var xhttp = new ActiveXObject("MSXML2.XMLHTTP");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var data1 = this.responseText;
console.log(xhttp.responseText);
var data1 = JSON.parse(xhttp.responseText);
document.getElementById("testdiv").innerHTML =
"<h1>Data Export Successful</h1>";
}
//};
xhttp.open("GET", "http://127.0.0.1:5000/neo4j/export", true);
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xttp.setRequestHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type,Accept"
);
//loadXMLDoc();
xhttp.send();
};
var data = {};
var options = {};
var container = document.getElementById("mynetwork");
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

How to implement websockets in Progress OpenEdge?

I'm trying to implement a websocket-server with Progress OpenEdge. I still didn't get it working.
I've successfully created a socket-server with the example i-sktsv1.p from here.
When I run my html-page, which looks like:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>WebSocket Client</title>
<script language="javascript" type="text/javascript">
var wsUri = "ws://localhost:3333/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) };
// websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
}
function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<body>
<h2>WebSocket Test</h2>
<div id="output"></div>
</body>
</html>
I getting a error that the websocket connection could not be established.
The problem is (I think) that Progress offers a socket, not a websocket. Do you know how to get this working?

Blogger from http to https (SSL problems)

The problem is that after receiving the SSL certificate, and switch my site from http to https some functions of my site (on my own domain) on the blogger platform, stopped working.
How can I fix the code to make them work again?
<script type="text/javascript">
function LoadTheArchive(TotalFeed)
{
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if("entry" in TotalFeed.feed)
{
var PostEntries=TotalFeed.feed.entry.length;
for(var PostNum=0; PostNum<PostEntries ; PostNum++)
{
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0,4));
PostMonths.push(ThisPost.published.$t.substring(5,7));
PostDays.push(ThisPost.published.$t.substring(8,10));
var ThisPostURL;
for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
{
if(ThisPost.link[LinkNum].rel == "alternate")
{
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}
function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
var NumberOfEntries=PostTitles.length;
var currentMonth = "";
var currentYear = "";
for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum])
{
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum];
document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
}
document.write('<div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+": </div> "+PostTitles[EntryNum]+"<br />");
}
}
</script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive" />
</script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"></script>
<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
color:#000;
font-size: 30px;
font-family: Fjalla One;
margin: 0;
}
.dayStyle {
color:#000;
font-family: Droid Sans;
display: inline-block;
}
</style>
And now the form says that it looks like my post is mostly code, a I need to add some more details, but I don't know what to add more, because all what I needed, I was asked above.
What about changing script tags to the following
<script src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"/>

OpenLayers V3.19.1 doesn't show in JavaFX WebView

I'm having trouble displaying a map with OpenLayers v3 in JavaFX's WebView. Here's my code:
openLayersV3.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"
type="text/javascript"></script>
<title>OpenLayers 3 example</title>
<script type="text/javascript">
function loadMap() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([10.0, 53.55]),
zoom: 10
})
});
}
</script>
</head>
<body onLoad="loadMap()">
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
</html>
And here's an excerpt of the loader:
OsmView.java
...
protected WebView webView = new WebView();
protected WebEngine webEngine = webView.getEngine();
public OsmView() {
final URL urlOsmMap = getClass().getResource("/some/package/name/openLayersV3.html");
webEngine.load(urlOsmMap.toExternalForm());
getChildren().add(webView);
}
...
When I load the html in a browser like IE or Firefox, it shows without any complications. But in the Java program, there is only a blank page with the h2 ("My Map"). But the JavaScript doesn't load. So, what am I doing wrong here?
Ok, actually I found a solution: the requestAnimationFrame is not found so you have to add the following lines before every other javascript stuff:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var requestAnimationFrame = window.requestAnimFrame;

Resources