Iam looking for jquery php image upload exactly given in http://valums.com/ajax-upload/.
i tried code given in the above site. but its not working . as iam newbie.. i tried below code.
<?php
$uploaddir = 'c:\xampp\htdocs\ajax-upload\server\uploads\';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
echo "success";
} else {
// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
// Otherwise onSubmit event will not be fired
echo "error";
}
?>
this is my html code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="fileuploader.css" rel="stylesheet" type="text/css">
<style>
body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
</style>
</head>
<body>
<p>Back to project page</p>
<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
<div id="file-uploader-demo1">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: '../server/upload.php',
debug: true
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
</script>
</body>
</html>
in php change:
$uploaddir = 'c:\xampp\htdocs\ajax-upload\server\uploads\';
to
$uploaddir = 'server/uploads';
in javascript change:
action: 'http://localhost/ajax-upload/server/upload.php',
to
action: 'server/upload.php',
if the php file you are running is in the ajax-upload folder.
Related
Attempting to run fineuploader right out of the box using the same code that's on the site.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fine Uploader Demo</title>
<link href="custom.fineuploader-4.0.3.css" rel="stylesheet">
</head>
<body>
<div id="fine-uploader"></div>
<script src="custom.fineuploader-4.0.3.js"></script>
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'server/handleUploads'
}
});
}
window.onload = createUploader;
</script>
</body>
</html>
Even before beginning to mess around with the endpoint.php I took a look at in a browser and I'm getting the following errors in Firebug:
ReferenceError: jQuery is not defined
}(jQuery));
custom....0.3.js (line 8012)
Error: Cannot find template script at ID 'qq-template'!
...ew Error(qq.format("Cannot find template script at ID '{}'!", options.templateId...
What am I missing?
jQuery library is missing in your code
add this in your head tag
<head>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
.
.
</script>
</head>
With jquery, I'm attempting to pull information from a .php file and run it in another html page.
To try this out I attempted to use this example:
http://www.tutorialspoint.com/jquery/ajax-jquery-get.htm
The .php file would include:
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
================ The html page code includes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.get(
"/testing.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
The jquery library has successfully loaded, as per the "test result".
For some reason, the contents of the "testing.php" file are not being pulled... almost as though it's linked incorrectly. Is the file linked improperly? (both the .php and .html files are in the same folder)
I even tried doing something simple, like an echo statement in the php, but still nothing was pulled from the file and published to the html page.
There might be a simple fix that you see. I appreciate your time and energy in helping me resolve this issue. Thanks in advance!
You could simply do this: $('#stage').load('testing.php?name=Zara');
The files are hosted from a folder on my computer
This gives you two problems:
Browsers put pretty strict restrictions on what webpages loaded from the filesystem can do, loading other files via XMLHttpRequest is forbidden
PHP is a server side technology, it needs a server to work (in this context)
Host your site on a webserver. It can be one you run locally, then you can access the site via http://localhost/etc
Use jquery.ajax instead. Here is your HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax({
url: "testing.php",
data: { name: "Zara" },
success: function(data) {
$('#stage').html(data);
}
});
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
I would rather do the following...
<?php
if( $_GET["name"] )
{
$name = htmlspecialchars(trim($_GET['name']));
echo "Welcome ". $name;
}
?>
and
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.load( "testing.php?name=Zara, function(data) {
$('#stage').html(data);
}
);
});
});
</script>
I have a html page (database.html) that contains a table you can edit via javascript. The following PHP script is used for saving the the page.
The PHP script saves the updated version of database.html and redirects to the new version (same file).
The problem is that it doesn't work the second time you press save, only the first time.
Any ideas what the problem can be?
HTML:
<!DOCTYPE html><head>
<title>Database</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#textarea_database {
display:none;
}
</style>
<script src="js.js"></script>
</head>
<body>
<a id="a_save" href="#">Save</a>
<form id="form_database" method="post" action="save.php">
<textarea id="textarea_database" name="textarea_database"></textarea>
</form>
<div id="contenteditable" contenteditable="true">
Write something and press save...
</div>
</body>
JavaScript:
window.onload = function () {
var a_save = document.getElementById('a_save'),
form_database = document.getElementById('form_database'),
textarea_database = document.getElementById('textarea_database');
a_save.onclick = function () {
textarea_database.value = document.documentElement.innerHTML;
form_database.submit();
}
}
PHP:
<?php
// the textarea contain all th html
$textarea_database = $_POST["textarea_database"];
// add doctype since javascript document.documentElement.innerHTML dont get it
$textarea_database = '<!DOCTYPE html>' . $textarea_database;
// update the html database file
$open_database = fopen('database.html','w+');
fputs($open_database,$textarea_database);
fclose($open_database);
// redirect to the uppdated database (timestamp prevent browser cache)
$the_time = date('Y-m-d-H-i-s');
$url_and_time = "database.html?" . $the_time;
header("Location: $url_and_time ");
exit;
?>
I've got a php include, with a path going to [root]/Edge-animations/splash/publish/web/splash.php, a valid path on my server. On my first attempt, I got an error saying that the path is invalid; it turned out that I need to put the complete server path (along the lines of /homepages/3/d426847376/htdocs/Edge-animations/splash/publish/web/splash.php). After correcting the link, I tried reloading my page; it didn't show an error, but it didn't show the file it was supposed to include, either. My PHP syntax is as follows:
<?php include('/homepages/3/d426847376/htdocs/Edge-animations/splash/publish/web/splash.php'); ?>
And matches the syntax I used for a working PHP include on another page. What am I doing wrong?
EDIT
The included file is an HTML file outputted by Edge; I changed the extension from .html to .php. Here's its code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome- frame/1/CFInstall.min.js"></script>
<script type="text/javascript" charset="utf-8" src="splash-v1_edgePreload.js"> </script>
<style>
.edgeLoad-Splash { display:none; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="Splash">
</div>
</body>
</html>
I've also now added parentheses and a semicolon to the link; it still doesn't work.
Just for testing purposes try
<?php
$path = '/homepages/3/..........';
ini_set('display_errors', true);
error_reporting(E_ALL);
echo 'path=',$path, "<br />\n";
if ( !file_exists($path) ) {
die('no such file');
}
else {
//include $path;
echo '<p>opening file</p>';
$fp = fopen($path, 'rb');
if ( !$fp ) {
die('open failed');
}
echo '<p>reading file</p>';
$content = stream_get_contents($fp);
if ( false===$content ) {
die('read failed');
}
echo '<p>strlen(content)=',strlen($content), '<p>';
}
I have a simple upload form working in PHP (works in web) and also am able to capture a photo from iPhone using PhoneGap (base64) and displaying it on the device.
But I can't figure out how to upload it to my server with PHP.
Here's the code running in PHP:
INDEX.PHP
<?
//print_r($_POST);
if($_POST["action"] == "Upload Image")
{
unset($imagename);
if(!isset($_FILES) && isset($HTTP_POST_FILES))
$_FILES = $HTTP_POST_FILES;
if(!isset($_FILES['image_file']))
$error["image_file"] = "An image was not found.";
$imagename = basename($_FILES['image_file']['name']);
//echo $imagename;
if(empty($imagename))
$error["imagename"] = "The name of the image was not found.";
if(empty($error))
{
$newimage = "images/" . $imagename;
//echo $newimage;
$result = #move_uploaded_file($_FILES['image_file']['tmp_name'], $newimage);
if(empty($result))
$error["result"] = "There was an error moving the uploaded file.";
}
}
include("upload_form.php");
if(is_array($error))
{
while(list($key, $val) = each($error))
{
echo $val;
echo "<br>\n";
}
}
include("list_images.php");
?>
And here are the two includes...
UPLOAD_FORM.PHP
<form method="POST" enctype="multipart/form-data" name="image_upload_form" action="<?$_SERVER["PHP_SELF"];?>">
<p><input type="file" name="image_file" size="20" value="beautiful.jpg"></p>
<p><input type="submit" value="Upload Image" name="action"></p>
</form>
LIST_IMAGES.PHP
<?
$handle = #opendir("images");
if(!empty($handle))
{
while(false !== ($file = readdir($handle)))
{
if(is_file("images/" . $file))
echo '<img src="images/' . $file . '"><br><br>';
}
}
closedir($handle);
?>
Here's the code running on iPhone 4 (iOS 4.2) in PhoneGap
INDEX.HTML (running in WWW directory in PhoneGap)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
function getPicture(sourceType)
{
var options = { quality: 10 };
if (sourceType != undefined) {
options["sourceType"] = sourceType;
}
// if no sourceType specified, the default is CAMERA
navigator.camera.getPicture(getPicture_Success, null, options);
};
function getPicture_Success(imageData)
{
//alert("getpic success");
document.getElementById("test_img").src = "data:image/jpeg;base64," + imageData;
}
</script>
</head>
<body onload="onBodyLoad()" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0>
<h1>Camera</h1>
<img style="width:80px;height:120px" id="test_img" src="" />
<p>
<!-- for testing, add the buttons below -->
<button onclick="getPicture()">From Camera</button>
<p>
<button onclick="getPicture(PictureSourceType.PHOTO_LIBRARY)">From Photo Library</button>
</body>
</html>
</html>
Incidentally, while I can grab a fresh picture from the device camera, I've been completely unable to get images from the Library... if anyone knows how to do that, I'd appreciate feedback there too.
Had anyone been able to upload photos from PhoneGap/iPhone to PHP? Any source code on both sides of this would be GREATLY appreciated.
The Base64 option is really just for ease of displaying on the webpage. if it's not needed then don't use it.
i'd say your best option is to use FILE_URI instead of DATA_URL for Camera.DestinationType
check out http://docs.phonegap.com/phonegap_camera_camera.md.html for more info
Use options PHOTOLIBRARY or SAVEDPHOTOALBUM to get existing pictures from your phone. See more at http://docs.phonegap.com/en/1.4.0/phonegap_camera_camera.md.html#Camera.
In phonegap:
$.post(URLReport,{
pic1: document.getElementById("image1").src.slice(23),
}, function(xml) {
//stuff to do on success
});
On server:
if (isset($_POST['pic1'])) {
$pic = base64_decode( $_POST['pic1']);
if (strlen($pic) > 9 ) {
$fh = fopen(yourfilename, 'w') or die("can't open file");
fwrite($fh, $pic);
fclose($fh);
}
}
Easy peasy.