I am new to uploadify. I recently installed on a xamp in my local c:/ where uploadify resides. I have an uploads folder in the httdocs of xampp where all my uploads go. However I would like to move my uploads to a folder on a different drive. I've tried to edit the uploadifive.php but to no avail. I would like to move from '/uploads'(C:\xampp\htdocs\uploadify) to uploads in (L:\ibi\apps\ibisamp\uploads). I am using the html-5 version.
Here is my code:
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Elavon MDM</title>
<link rel="icon" type="image/ico" href="favicon.ico">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {
float: left;
margin-right: 10px;
}
#queue {
border: 1px solid #E5E5E5;
height: 177px;
overflow: auto;
margin-bottom: 10px;
padding: 0 3px 3px;
width: 300px;
}
</style>
</head>
<body>
<!-- <h1>Data Management Upload Demo</h1> -->
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="false">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
// 'fileTypeExts' : '*.csv',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
</body>
</html>
uploadifive.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Set the upload directory
$uploadDir = '/uploads/';
// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'csv', 'png'); // Allowed file extensions
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
$targetFile = $uploadDir . $_FILES['Filedata']['name'];
// Validate the filetype
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
// Save the file
move_uploaded_file($tempFile, $targetFile);
echo 1;
} else {
// The file type wasn't allowed
echo 'Invalid file type.';
}
}
?>
checkexists.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Define a destination
$targetFolder = '/uploads'; // Relative to the root and should match the upload folder in the uploader script
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {
echo 1;
} else {
echo 0;
}
?>
Try to replace
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
with
$uploadDir = "L:\ibi\apps\ibisamp\" . $uploadDir;
Related
I have sucessfully created a website that used the https://github.com/BossBele/cropzee library.
I have created a HTML form that takes inn a image from the user:
When the user has selected a image the Cropzee.js sucessfully loads and I can rotated/crop the image as expected:
Now I have the button Get Image (as blob / data-url) that gives me a alert box with a base64 image:
<button onclick="alert(cropzeeGetImage('cropzee-input'))">Get Image (as blob / data-url)</button>
I need to somehow send the base64 blob / data-url / image to my backend, I use PHP.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cropzee jQuery PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
<!-- jQuery + cropzee.js -->
<script type="text/javascript" src="javascripts/jquery/jquery.min.js"></script>
<script src="javascripts/cropzee/cropzee.js" defer></script>
<!-- //jQuery + cropzee.js -->
<!-- CSS -->
<style>
.image-previewer {
height: 300px;
width: 300px;
display: flex;
border-radius: 10px;
border: 1px solid lightgrey;
}
</style>
<!-- //CSS -->
</head>
<body>
<h1>Upload</h1>
<!-- cropzee upload form -->
<label for="cropzee-input" class="image-previewer" data-cropzee="cropzee-input"></label>
<input id="cropzee-input" type="file" name="cropzee-input" accept="image/*">
<button onclick="alert(cropzeeGetImage('cropzee-input'))">Get Image (as blob / data-url)</button>
<script>
$(document).ready(function(){
if (window.location.href.indexOf("#") > -1) {
window.location = window.location.href.replace('#', '');
}
$("#cropzee-input").cropzee({startSize: [85, 85, '%'],});
});
</script>
<!-- //cropzee upload form -->
</body>
</html>
I have done this working to save the cropped image via Ajax Post to my PHP/MySQL backend.
Put a button to trigger the Ajax Call - like below
`<input type="button" onclick="uploadEx()" value="Upload" />`
Create a from with a hidden input - like below
`<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' type="hidden"/>
</form>`
Now put the Ajax call jQuery - like below
function uploadEx() {
var canvas = document.getElementById("cropzee-input");
var dataURL = canvas.toDataURL("image/jpeg");
document.getElementById('hidden_data').value = dataURL;
var fd = new FormData(document.forms["form1"]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload_data.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
alert('Succesfully uploaded');
} else {
alert('Captured data');
}
};
xhr.onload = function() {
};
xhr.send(fd);
};
```
Lastly the PHP file upload_data.php looks like below
`
$upload_dir = "uploaded_files/profile_pictures/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".jpeg";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.'; `
I included TomTom map to my php page, and included the TomTom code (javascript) into a separate body tag at the very bottom. I'm noticing that when I include the TomTom script within these tags, none of my buttons (href links) are working.
All of the code is on one sublime text page (map.php).
map.php:
<!--Developer code: https://developer.tomtom.com/blog/build-different/add-tomtom-maps-
website-30-seconds-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Details Page</title>
<link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-
web/cdn/5.x/5.41.0/maps/maps.css">
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js">.
</script>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/services/services-
web.min.js"></script>
<style>
#map-div {
padding: 60px 60px 60px 60px;
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<ol>
<?php
if (isset($_POST["submit"]));
$search = $_POST['search'];
$navigator = $_POST['navigator'];
$sql = "SELECT DISTINCT stores_name FROM stores ";
$rs_result = mysqli_query($conn, $sql);
$rowCount = mysqli_num_rows($rs_result);
if ($rowCount > 1){
echo "There are " .$rowCount. " results...";
}
else {
echo "These is " .$rowCount. " result...";
}
if ($rowCount > 0) {
while($row = mysqli_fetch_array($rs_result)){
$title = $row['stores_name'];
//$id = $row['stores_id'];
$href = ''.$title.'';
}
}
else {
echo "<tr><td>" ."No results found". "</td><td>";
}
?>
</ol>
</body>
<body>
<div id="map-div" name="map-div"></div>
<script>
const API_KEY = 'XXX';
const APPLICATION_NAME = 'My Application';
const APPLICATION_VERSION = '1.0';
tt.setProductInfo(APPLICATION_NAME, APPLICATION_VERSION);
const GOLDEN_GATE_BRIDGE = {lng: -122.47483, lat: 37.80776};
var map = tt.map({
key: API_KEY,
container: 'map-div',
center: GOLDEN_GATE_BRIDGE,
zoom: 12
});
</script>
</body>
</html>
I have html file that load jQuery.Gantt. Inside html i put nested php that grabs necessary data from database to populate grid. The data are formate to json according to spec.
My question is how to pass array to $function() to property source?
Here is the code:
<html lang="en-au">
<head>
<title>jQuery.Gantt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 0 0 50px 0;
}
.contain {
width: 800px;
margin: 0 auto;
}
h1 {
margin: 40px 0 20px 0;
}
h2 {
font-size: 1.5em;
padding-bottom: 3px;
border-bottom: 1px solid #DDD;
margin-top: 50px;
margin-bottom: 25px;
}
table th:first-child {
width: 150px;
}
</style>
</head>
<body>
<div class="contain">
<h1>
<small>Planning</small>
</h1>
<div class="gantt"></div>
</div>
<?php
include 'config.php';
mysql_query('SET CHARACTER SET utf8');
$sql_query = "SELECT Code, OrderNumber, DeliveryDate, QTY, Progress FROM production WHERE IDCustomer = 8 and Code = '5101452 SMD E PTH';";
$r=mysql_query($sql_query, $con);
$outp = "[";
while($rs=mysql_fetch_array($r))
{
if ($outp != "[") {$outp .= ",";}
$outp .= '{"name":"' . $rs["Code"] . '",';
$outp .= '"desc":"' . $rs["OrderNumber"] . '",';
$outp .= '"values": ';
$outp .= '[{"from": "' .$rs["DeliveryDate"] . '", ';
$outp .= '"to": "' .$rs["DeliveryDate"] . '",';
$outp .= '"label": "' .$rs["QTY"] . '",';
$outp .= '"customClass": "' .$rs["Progress"] .'"}]}';
}
$outp .="]";
mysql_close($con);
?>
</body>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
<script>
$(function() {
"use strict";
$(".gantt").gantt({
source: "src/mydata1.json",
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "days",
waitText: "Please wait...",
itemsPerPage: 50,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
});
</script>
</html>
Or there is better way to do it? Actually I'd like to split HTML and PHP code but I'm not nimble with web programming.
here's my html with javascript using webcam.js. I just followed the https://github.com/jhuckaby/webcamjs on how you will implement it using existing form.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="../webcam.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
Webcam.snap( function(data_uri) {
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
document.getElementById('mydata').value = raw_image_data;
document.getElementById('myform').submit();
} );
</script>
<!-- A button for taking snaps -->
<form id="myform" method="post" action="myscript.php">
<input id="mydata" type="hidden" name="mydata" value=""/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="submit" value="submit">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
here's the myscript.php to save the image. I successfully save the PATH in the database but I'm getting a corrupted .jpg file (file size always in 7 bytes).
<?php
include 'connect.php';
$encoded_data = $_POST['mydata']; // to get the base 64 code image link
$name = base64_decode($encoded_data); // to convert base 64 code
$name = date('YmdHis');
$newname="images/".$name.".jpg";
$file = file_put_contents( $newname, file_get_contents('php://input') );
if (!$file) {
print "Error occured here";
exit();
}
else
{
$sql="INSERT INTO image (images) VALUES('$newname')";
$result=mysqli_query($con,$sql);
$value=mysqli_insert_id($con);
$_SESSION["myvalue"]=$value;
}
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $newname;
print "$url\n";
?>
After all the trail and errors i found out you'll need to convert the base64 string to a blob and then attach to a file before sending.
var binaryImg = atob(base64string);
var length = binaryImg.length;
var ab = new ArrayBuffer(length);
var ua = new Uint8Array(ab);
for (var i = 0; i < length; i++) {
ua[i] = binaryImg.charCodeAt(i);
}
var blob = new Blob([ab], {
type: "image/jpeg"
});enter code here
var imgFile = new File([blob], 'photo.jpeg', {type: 'image/jpeg'});
Now you can use the imgFile to send across to a remote server.
I want to capture image from webcam user image that image stored in specified folder and captured image path store into mysql using php. I have an problem with webcam captured image path is not stored in mysql database. so please help me...
<script src="webscript.js"></script>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
Webcam.upload( data_uri, 'upload.php', function(code, text) {
alert(data_uri);
});
} );
}
</script>
<?php
include 'connection.php';
// be aware of file / directory permissions on your server
$newname = move_uploaded_file($_FILES['webcam']['tmp_name'], 'uploads/webcam'.date('YmdHis').rand(383,1000).'.jpg');
$query = "INSERT INTO entry(name) VALUES('".$_GET['url']."')";
mysql_query($query)or die(mysql_error());
echo "<script>alert('successfully..');</script>";
?>
<!DOCTYPE html>
<html>
<head>
<title>Javascript Webcam</title>
<link href="font-awesome.min.css" rel="stylesheet"/>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<center>
<div class="row">
<div class="col-md-6">
<h3>Profile Picture</h3>
<div id="my_camera"></div>
<!-- A button for taking snaps -->
<form>
<input type=button class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">
</form>
<div id="results" class="well">Your captured image will appear here...</div>
</div>
</div>
</center>
</body>
</html>
Assuming $mysqli is a successfully connected [new Mysqli] object.
$query = "SELECT * FROM 'database.table' WHERE 'somecolumn'='someval' LIMIT= 5";
if ($stmt = $mysqli->prepare($query)) {
/* execute statement */
$stmt->execute();
/* bind result variables */
$stmt->bind_result($name, $code);
/* fetch values */
while ($stmt->fetch()) {
printf ("%s (%s)\n", $name, $code);
}
/* close statement */
$stmt->close();