I am using the following script to preview image during upload. But it is notworking and not changing the src attribute.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#field_header_image 1_preview')
.attr('src',e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
Please check the JS Fiddle here http://jsfiddle.net/sw6fW/
<html>
<head>
<script src="jquery.js"></script>
<meta charset=utf-8 />
<title>Auto Image Preview</title>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="image_prev" src="#" alt="your image" />
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_prev')
.attr('src', e.target.result)
.width(150)
.height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
refer to this link to get your question answered
http://rameshworpathak.com.np/preview-uploaded-image-using-jquery-while-uploading-image/
Hopefully it will help you
Related
I want to convert a wav file to text using speech-to-text on IBM Cloud.
How do I send a request to get results for two channels?
Do I use websocketAPI?
If so, is there a channel specification in the parameters?
Can anyone tell me?
Thank you for your reply.
I am trying websocket connection with javascript.
In the following program, there is no response of "websocket.send (blob);".
Is the information corresponding to the blob incorrect?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script>
var websocket = null;
function start() {
var IAM_access_token = "{my-token}";
var wsURI = 'wss://gateway-tok.watsonplatform.net/speech-to-text/api/v1/recognize'
+ '?access_token=' + IAM_access_token
+ '&model=ja-JP_BroadbandModel';
console.log(wsURI);
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) {
var message = {
'action': 'start',
'content-type': 'audio/wav'
};
console.log(JSON.stringify(message));
websocket.send(JSON.stringify(message));
}
function onClose(evt) {
websocket.close();
}
function onMessage(evt) {
console.log(evt);
}
function onError(evt) {
console.log(evt);
}
function sendfile() {
console.log("send click!");
console.log(document.getElementById( "data" ));
var blob = document.getElementById( "data" );
websocket.send(blob) ;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="wrap">
<button type="button" onclick="start();">start</button>
<input type="file" id="data" name="data">
<button type="button" id="send" onclick="sendfile();">send</button>
</div>
</form>
</body>
</html>
I have found a tool called XLSX to JSON on github, which has been made using vuejs/sheetjs. git repo, This tool is available online via an interface - but recently it seems to have broken and I cant download my converted json file.
Therefore my intention was to clone the repo, and change some bits around to fix it (just console json file instead of DL).
I haven't used Vue js before. After looking through the index and the origins of the functions I saw that the whole page seems to be reliant on this app.vue file. However - when editing the values and reloading the webpage - theres no change what so ever!
App.vue:
<template>
<div class="col">
<div class="row">
<div id="dropZone" v-on:drop.prevent="parseXLSX($event)" v-on:dragend="cleanup" ondragenter="event.preventDefault();" ondragover="event.preventDefault(); event.dataTransfer.dropEffect='copy'" class="col drop-box">
<h2 class="text-center"> Drag your xlsx file here.</h2>
</div>
</div>
<div class="row">
<input type='file' id='inputFile' v-on:change="parseXLSX($event.target.files)">
<div v-if="hasDownload">
<a id="download"> Download Localalization JSON </a>
</div>
</div>
<div class="row">
<div class="col json-box">
<h2 class="text-center"> JSON Output</h2>
<pre id="output"> </pre>
</div>
</div>
<xlsx-footer></xlsx-footer>
</div>
</template>
<script>
import Footer from './components/footer.vue';
export default {
data() {
return {
hasDownload: false,
}
},
methods: {
parseXLSX(event) {
const XLSX = window.XLSX;
let file = this.getFile(event);
let workBook = null;
let jsonData = null;
if(file !== null) {
const reader = new FileReader();
const rABS = true;
reader.onload = (event) => {
// I WANT TO do edits but nothing seems to work
//console logs not working etc...
const data = event.target.result;
if(rABS) {
workBook = XLSX.read(data, {type: 'binary'});
jsonData = workBook.SheetNames.reduce((initial, name) => {
const sheet = workBook.Sheets[name];
initial[name] = XLSX.utils.sheet_to_json(sheet);
return initial;
}, {});
const dataString = JSON.stringify(jsonData, 2, 2);
document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
this.setDownload(dataString);
}
}
if(rABS) reader.readAsBinaryString(file);
else reader.readAsArrayBuffer(file);
}
},
getFile(item) {
if(item.dataTransfer !== undefined) {
const dt = item.dataTransfer;
if(dt.items) {
if(dt.items[0].kind == 'file') {
return dt.items[0].getAsFile();
}
}
}
else {
return item[0];
}
},
setDownload(json) {
this.hasDownload = true;
setTimeout(()=> {
const el = document.getElementById("download");
el.href = `data:text/json;charset=utf-8,${encodeURIComponent(json)}`;
el.download = 'localization.json';
}, 1000)
},
cleanup(event) {
console.log("Cleaned up Event", event);
}
},
components: {
'xlsx-footer': Footer,
}
}
</script>
main.js:
'use strict';
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _app = require('./app.vue');
var _app2 = _interopRequireDefault(_app);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var app = new _vue2.default({
el: "#app",
render: function render(h) {
return h(_app2.default);
}
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title> XLSX-TO-JSON </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.3/xlsx.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1 class="title text-center"> XLSX-TO-JSON </h1>
<div id="app" class="container">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"> </script>
<script src="bin/bundle.js"></script>
<!-- <script src="assets/bundle.js"></script> -->
</body>
</html>
All I want to do is edit the functions in the app.vue file!
Any help would be great, cheers!
Try to modify the package.json file by adding "prod":"webpack" in the "scripts" brackets. Running npm run prod should recreate your bundle.js file after .vue files modification using the webpack.config.js provided.
Also you could use script test using npm run test which launch webpack-dev-server and enable hot reload which is more convinient for dev purpose.
When you make change in any vue js file you have run npm run prod and you have to either upload the whole project in the server or upload the public folder in the server
I used Google Custom Search API in my project and I try to detect the following events:
Enter is pressed in the search input box;
Search button is hit;
A option is selected from the recommendation list.
I have done a lot of searches, however, my code can only capture the first event. If anyone can point me to a right direction, this will be much appreciated.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h3 align="center">My Search</h3>
</div>
<div>
<script>
(function () {
var cx = 'xxxx:xxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<script>
function addExtraParams(){
alert($("input.gsc-input").val()); //For debugging only
};
$(document).ready(function(){
setTimeout(
function(){
$( 'input.gsc-input' ).keyup( function(e){
if ( e.keyCode == 13 ) {
addExtraParams();
}
});
$( 'input.gsc-search-button' ).click(function(){
addExtraParams();
});
$( 'input.gsc-completion-container' ).click(function(){
addExtraParams();
});
}, 1000
);
});
</script>
<gcse:search></gcse:search>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width: 1000px; height: 600px } /* ID */
</style>
<!--Include the Maps API JavaScript using a script tag.-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//Function called when the window loads shown below in the addDomlistener
function initialize() {
var geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function calcAddress(address)
{
var address = document.getElementById("address").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="text">
<input type="button" value="Search" onclick="calcAddress()" />
</div>
<div id="map-canvas"/>
</body>
</html>
I'm learning about google maps API, and I am just trying to get a simple address search to work, what am I missing? I've seen similar posts, but can't find what isn't right, might need some fresh eyes.
Varaibles map and geocoder are not visible outside of initialize() function. If you open console there is error written:
ReferenceError: geocoder is not defined
They should be made global like:
var map,
geocoder;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = { center: new google.maps.LatLng(40.5, -75.5), zoom: 8 };
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
Additionaly, div tag is not self-closing.
<div id="map-canvas"/>
should be changed to
<div id="map-canvas"></div>
My jQuery navigation works- but now it's conflicting with a fadeIn and fadeOut effect (picture and greeting) so they are not showing up.
Here is a link to my page:http://bit.ly/1cr93gD
Here is the code that is on my final_project.js file for the fadeIn & fadeOut effects:
jQuery$(document).ready(function() {
$('#headshot').css('visibility','visible').hide().fadeIn(5000);
$('#greeting').css('visibility','visible').hide().toggle(9000);
var defaultH1 = parseInt($('h1').css('font-size'));
var defaultP = parseInt($('p').css('font-size'));
var count = 0;
var elements = ['p', 'h1'];
$('.minus').click(function(){
if ( count >= -1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))-2);
});
count--;
};
});
$('.plus').click(function(){
if ( count <= 1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))+2);
});
count++;
};
});
$('.reset').click(function(){
$('h1').css('font-size', defaultH1);
$('p').css('font-size', defaultP);
count = 0;
}
});
Your code has been tested it had some syntax error I have corrected it and it works fine, bellow is Working code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#headshot').css('visibility','visible').hide().fadeIn(5000);
$('#greeting').css('visibility','visible').hide().toggle(9000);
var defaultH1 = parseInt($('h1').css('font-size'));
var defaultP = parseInt($('p').css('font-size'));
var count = 0;
var elements = ['p', 'h1'];
$('.minus').click(function(){
if ( count >= -1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))-2);
});
count--;
};
});
$('.plus').click(function(){
if ( count <= 1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))+2);
});
count++;
};
});
$('.reset').click(function(){
$('h1').css('font-size', defaultH1);
$('p').css('font-size', defaultP);
count = 0;
})
});
</script>
</head>
<body>
<h1>Testing the code</h1>
<button class="minus"> - </button>
<button class="plus"> + </button>
<button class="reset"> reset </button>
<p>This is a paragraph.</p>
<h1 id="greeting">Welcome</H1>
<img src="http://www.kveller.com/mayim-bialik/wp-content/uploads/2011/12/mayim-bialik-headshot-cropped.jpg" id="headshot"></img>
</body>
</html>
if you what to toggle between entities then look at bellow example to do it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#headshot').fadeOut(000);
$('#greeting').fadeOut(5000);
$('#headshot').fadeIn(5000);
setInterval(function(){
$('#headshot').fadeOut(5000);
$('#greeting').fadeIn(5000);
},10000);
setTimeout(function(){
setInterval(function(){
$('#headshot').fadeIn(5000);
$('#greeting').fadeOut(5000);
},10000);
},5000);
});
</script>
<style>
#greeting,#headshot {position:fixed;top:0px;left:0px;}
</style>
</head>
<body>
<h1 id="greeting" >Welcome</H1>
<img src="http://www.kveller.com/mayim-bialik/wp-content/uploads/2011/12/mayim-bialik-headshot-cropped.jpg" id="headshot" width="200px" height="200px"></img>
</body>
</html>
in this case both entities can be of same or different type.