I need to post to a php page after it select an image from input button type=file and I do not know how do it.
I'm trying with jquery.redirect but it doesn't works. It's possible another solution for this?
Summary:
1) The user select an image from input button type = file.
2) This image I want to post to another php page, to processing.
3) After this I will show again this image in the initial page, after it processed.
The html code of the initial page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCam UI</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css/custom-sugar-style.css" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/jquery/jquery.redirect.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
}
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
$.redirect('tosquare.php', {'image1': file}); // Include script in function redirect
}
}
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img id='imageCamera' class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="tosquare.php" method="post">
<input type="file" id="browse" name="fileupload" onchange="previewFile()" style="display: none"/>
<input type="button" value="Fes una foto" id="fakeBrowse" onclick="HandleBrowseClick();"/>
</form>
</div>
</div>
</body>
In this line $.redirect('tosquare.php', {'image1': file}); // Include script in function redirect I want to post to tosquare.php with image1 parameter.
Could you help me?
Thanks!
Related
I am new and just learning HTML CSS and Javascript. I just started working on this filter web application for practice. When I try to work a sublime text or visual studio the Javascript part doesn't actually work. I tried to put the right path and other stuff but it> doesn't show any picture uploaded in canvas but if I copy-paste this code in codepen.io it works fine! I don't know what happened as I am just a newbie. Please if anyone can help me with a proper explanation I will be grateful. Thanks!
This is my HTML CSS and JS code :
let fileInput = document.getElementById("mainup");
fileInput.addEventListener("change", function (ev) {
if (ev.target.files) {
let file = ev.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function (ev) {
var canvas = document.getElementById("can1");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
};
};
}
});
<html>
<head>
<title>Filtaro</title>
<link
rel="shortcut icon"
type="image/png"
href="C:\Users\ADMIN\Desktop\filtaro.png"
/>
</head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Pacifico&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="filter.css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Pacifico&display=swap"
rel="stylesheet"
/>
<script type="text/javascript" src="filter.js"></script>
//As my js file name was filter.js
<body>
<div class="bgimg"></div>
<div class="box">
<a href="file:///G:/HTML%20CSS%20JAVA/Project%20Filter/filter.html"
><h1>Filtaro</h1></a
>
</div>
<div class="intro">
<h2>Welcome to Filtaro !</h2>
<br />
<p>
Filter your images with different filters.No quality decrease ! Have Fun
!
</p>
</div>
<canvas id="can1"></canvas>
<canvas id="can2"></canvas><br />
<div class="btn">
<input type="file" id="mainup" multiple="false" accept="image/*" />
<label for="mainup" id="lab1">Upload a Picture</label>
</div>
<div class="btn">
<input type="button" id="maindown" onclick="download()" />
<label for="maindown" id="lab2">Download</label>
</div>
</body>
</html>
put your script at the end of body or add defer to script tag
I want to extract the header row of the csv files i upload and display them as checkbox options. Currently, I split based on "\n", then on "," to get the individual column names. However, it does not work for all csv files and some do not get split properly (eg, data cells are returned as column headers). Is there any functions I can use instead? Thanks! My code is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
<script type="text/javascript">
/*---CSV FUNCTION---*/
function getColumns_csv() {
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
var header = data.split("\n")[0] //<--- is there a better way to split columns?
header = header.split(",");
var cnt = 1;
$('#columnCheckbox').empty();
header.forEach(function(y){
$('#columnCheckbox').append('<td><input type="checkbox" name='+y+' id="columnSelect'+cnt+'" class="chkbx">'+y+'</td>');
cnt++;
});
$('.chkbx').on('click',function(){
if($('.chkbx:checked').length == $('.chkbx').length){
$('#checkall').prop('checked',true);
}else{
$('#checkall').prop('checked',false);
}
});
$('.hiddeninputs').show();
$('#submission').show();
}
reader.readAsText($('#datafile')[0].files[0]);
}
/*---//CSV FUNCTION---*/
</script>
<script type="text/javascript">
//select all button
$(document).ready(function(){
$('#checkall').on('click',function(){
if(this.checked){
$('.chkbx').each(function(){
this.checked = true;
});
}else{
$('.chkbx').each(function(){
this.checked = false;
});
}
});
});
</script>
</head>
<body>
<div>
<h3>Upload File</h3>
<!-- form to post file -->
<form method="post" enctype="multipart/form-data" id="fileform">
<input type="file" name="datafile" id="datafile">
<button type="button" class="btn btn-info" name="upload" id="upload" onclick="getColumns_csv()">Upload File</button>
<br></br>
<table class="hiddeninputs" hidden="hidden">
<tr>
<td><input type="checkbox" id="checkall">Select all</td>
</tr>
<tr id="columnCheckbox"></tr>
</table>
<br>
<input type="submit" class="btn btn-info" value="submit" id="submission">
</form>
</div>
</body>
</html>
Try with this:
var header = data.split(/[\r\n]+/)[0];
If your problem is with line splitting, this will cover more possible end of line character.
Hello i'm building an application where i want to dynamically change the source of an image in order to force reload it . The problem is that in order of this i only get a broken image on the browser. Instead , if a run the function manually by a button it runs perfect .
HTML document
<!DOCTYPE html>
<html lang="en" ng-app='cameraApp'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node JS Camera</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src='https://code.angularjs.org/1.4.4/angular-sanitize.min.js'></script>
<script src="cameraApp.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Welcome to NodeJS Camera v1</h1>
</div>
<div ng-controller="HomeController">
<div class="cameraControl col-md-5">
<p>Here is the camera control</p>
<button class="btn btn-default" ng-click="getSnapshot()">Snapshot</button>
<button class="btn btn-info" ng-click="intervalFunction()">Start Feed</button>
</div>
<div class="lifeFeed col-md-7">
<p>Here is the live feed</p>
<p><button class="btn btn-default" ng-click="readSnapshot()">Snapshot Read</button></p>
<img width='600' height='600' ng-src="{{snapshot}}" alt="SnapShot taken">
</div>
</div>
</div>
</body>
</html>
cameraApp.js
var cameraApp = angular.module('cameraApp',[]);
cameraApp.controller('HomeController', function($scope,$http,$timeout) {
function updateImage() {
var img = 'snapshots/camera.jpg'+ '?decache=' + Math.random();
console.log('Snapshot Loaded');
$scope.snapshot = img;
};
$scope.readSnapshot = updateImage;
$scope.getSnapshot = function() {
$http.get('/api/getSnapshot')
.then(function(response) {
// this callback will be called asynchronously
// when the response is available
console.log('Snapshot captured');
$scope.readSnapshot();
}, function(response) {
console.log('Error in capturing...');
});
}
$scope.intervalFunction = function() {
$timeout(function() {
$scope.getSnapshot();
$scope.intervalFunction();
}, 2000);
};
// Kick off the interval
$scope.intervalFunction();
});
There are two solutions I've used for this in the past.
1) Use an ng-if/ng-show on your img tag. This will prevent the broken image from displaying.
<img ng-if='snapshot'>
2) Set a default image that will load and then be replaced once the other images load.
$scope.snapshot = 'snapshots/default.png';
I've made a form that appears in a pop-under window, but I can't figure out how to make it multi-step.
Here's my code:
1) main.rb file:
[
'rubygems',
'sinatra',
'sequel'
].each{|g| require g}
DB = Sequel.sqlite('database.sqlite')
DB.create_table? :data_table do
primary_key :id
varchar :img_path
varchar :form1_name
varchar :form2_option
end
before do
#img_path = nil
#form1_name = nil
#form2_option = nil
end
get '/?' do
erb :index
end
post '/form2' do
user_img = params['user_img']
#img_path = './public/images/uploads/' + user_img[:filename]
File.open(#img_path,'wb'){|f| f.write(user_img[:tempfile].read)}# Copying the upload file to the server directory
#form1_name = params['form1_name'] # !!!DATAPOINT!!!
end
2) layout.erb file
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-page form test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <!-- jQuery UI CSS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <!-- jQuery -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <!-- jQuery UI -->
<script src="./js/script.js"></script>
</head>
<body>
<%= yield %>
</body>
3) index.erb file
<button id="upload_form_opener" type="button">Click here to upload</button>
<div id="upload_form_container" title="Form container title">
<form action="form2" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<img id="upload_preview" style="width: 300px; height: 300px;" />
<input id="upload_image" accept="image/*" type="file" name="user_img" onchange="PreviewImage();" />
<script type="text/javascript">
// This JavaScript snipppet is for previewing the image upload
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("upload_image").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("upload_preview").src = oFREvent.target.result;
// document.getElementById("upload_image").disabled = true
}; // DONE: function (oFREvent)
}; // DONE: function PreviewImage()
</script>
<p>Name <input type="text" name="form1_name" /></p>
<input type="submit" value="Next" />
</form>
</div>
4) script.js
$(document).ready(function(){
var uFormContainer = $('#upload_form_container');
// This snippet is for opening the pop-under form
uFormContainer.dialog({autoOpen: false});
$('#upload_form_opener').click(function(){
uFormContainer.dialog('open');
});
});
5) I want the second step of the form to look like this...
<form action="form2" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<p>Some other text field <input type="text" name="form2_option" /></p>
<input type="submit" value="Next" />
</form>
...but I don't want to leave the page (which is '/', as far as Sinatra is concerned). Is this possible in Sinatra?
There are multiple ways to implement this:
Save some cookie or session, which step is now, and depends on that yield different forms. After submitting write next step id into session and redirect to root_url.
Use ajax to send form and render next step's form.
You can even not really send form, but just switch to next, just hidding previous fields with javascript and show next step's fields. After submitting all parameters will be sent.
I'm a newbie in Jquery. I'm trying to print text on a document dynamically. I have a JavaScript function that is supposed to display images using the jQuery prettyphoto plugin. My function does not show the images but when I paste the code on a html file it works fine. Please help. A sample of my code is here.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./index.css" type="text/css">
<script type="text/javascript" charset="utf-8" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="spin.min.js"></script>
<script type="text/javascript" charset="utf-8" src="custom-functions.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_related-content-images']").prettyPhoto({theme:'facebook'});
});
function showImages()
{
var stringData = '';
stringData = stringData + '<div id="related-content-images" >Related to this: <br/>'+
'<img id="not-hidden" src="images/sample-album-2.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-3.jpg" alt="" title="">'+
'<img id="related-images" src="images/sample-album-4.jpg" alt="" title=""></div>';
document.getElementById("content").innerHTML=''+stringData+'';
}
</script>
</head>
<body>
<div id="header"><div id="app-logo-image">
<img src="images/app-logo.png" id="app-logo"/></div>
<div id="header-form">
<input type="search" id="search-text-box" name="search-text-box" placeholder="Search">
<input type="submit" id="search-button" name="" value="Search">
</div>
</div>
<div id="container">
<div id="sub-header-menu">
<div id="music-albums">
<img src="images/music-albums-icon.png" id="music-albums-image"; onclick="fetch('music-albums');"/></div>
<div id="genres-icon">
<img src="images/genres-icon.png" id="genres-icon-image"onclick="fetch('music-genres');"/></div>
<div id="artist-icon">
<img src="images/artists-icon.png" id="artist-icon-image"onclick="fetch('music-artists');"/></div>
<div id="home-icon">
<img src="images/home-button.png" id="home-icon-image"/></div>
</div>
<div id="content" style="left:0%;">
click me
</div>
</div>
</body>
</html>
Your showImages function isn't executed until the link is clicked, however the prettyPhoto initialisation is only run once when the document finishes loading, and since showImages hasn't been run yet prettyPhotos can't find and enhance those images.
If you add this to the end of showImages everything should work:
$('#content a').prettyPhoto({theme:'facebook'});