I am using the below code to upload file to the online test server(http://posttestserver.com/post.php) and it is getting successfully uploaded and the code is also working fine as required but the issue is I have to upload the file to an internal PHP server i.e., https://xxxx.xxxx.xxxxx.com/sites/default/files/FileUpload/upload_file.php which is not working for below code while if I remove the ajax,progress bar and script part and run the code only with form tag it can upload the file.
Please help me I cant able to track the issue and I dont have knowledge in PHP.
Also find below the Error log in comment.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
<form id="myForm" action="http://posttestserver.com/post.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="file">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
</body>
</html>
Saikat, using ajax to upload file is a pain in the a..
check this out for your referrence
http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
Related
I tried to research and read a lot of articles regarding this problem
I have red some but the discussion seems to end without the solution yet
So the problem is I cannot get to show the camera on my CI app, but when I just copy the exact codes and paste it in my localhost without using any frame work it works.
Here is my CI code
<script type="text/javascript" src="<?=base_url('assets/js/cam/webcam.js')?>"></script>
<script language="JavaScript">
document.write( webcam.get_html(440, 240) );
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
<script type="text/javascript">
webcam.set_api_url( "<?=base_url('assets/js/cam/handleimage.php')?>");
webcam.set_quality( 90 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true, "<?=base_url('assets/js/cam/shutter.mp3')?>" ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page
document.getElementById('img').innerHTML ='<h3>Upload Successfuly done</h3>'+msg;
document.getElementById('img').innerHTML ="<img src="+msg+" class=\"img\">";
// reset camera for another shot
webcam.reset();
}
else {alert("Error occured we are trying to fix now: " + msg); }
}
</script>
I used this demo package and its working well if I just extract it to localhost. https://app.box.com/s/nkhgrj73fvutaj6dfspf
But when I tried to integrate it to CI the camera windows show blank . And when I tried to use webcam js function such as webcam.configure() .. It says the Movie is not loaded yet
Jhunnie
By simply copy paste you cannot implement it on codeigniter. Reason behind the error It says the Movie is not loaded yet is webcam.swf is not loaded. actually that flash file is the important thing behind the webcam functionality.
create new controller application\controllers\camera.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Camera extends CI_Controller {
public function index(){
$this->load->helper('url');
$this->load->view("camera");
}
public function saveImage(){
/*write your own code to save to your database*/
$newname = "some_name.png";
file_put_contents( $newname, file_get_contents('php://input') );
}
}
?>
create new view application\views\camera.php
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.img {
background: #ffffff;
padding: 12px;
border: 1px solid #999999;
}
.shiva {
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;
}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/cam/webcam.js"></script>
<script language="JavaScript">
document.write(webcam.get_html(440, 240));
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script type="text/javascript">
webcam.set_api_url('<?php echo base_url();?>camera/saveImage');
webcam.set_quality(90);
webcam.set_shutter_sound(true);
webcam.set_hook('onComplete', 'my_completion_handler');
function take_snapshot() {
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
document.getElementById('img').innerHTML = '<h3>Upload Successfuly done</h3>' + msg;
document.getElementById('img').innerHTML = "<img src=" + msg + " class=\"img\">";
webcam.reset();
} else {
alert("Error occured we are trying to fix now: " + msg);
}
}
</script>
<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>
Now copy webcam.js,shutter.mp3,webcam.swf to assets/js/cam. make 2 small changes in webcam.js
line number 27 : swf_url: 'webcam.swf'
line number 28 : shutter_url: 'shutter.mp3'
change to
line number 27 : swf_url: 'assets/js/cam/webcam.swf'
line number 28 : shutter_url: 'assets/js/cam/shutter.mp3'
From Mr Tintu Answer Added some revisions
By simply copy paste you cannot implement it on codeigniter. Reason behind the error It says the Movie is not loaded yet is webcam.swf is not loaded. actually that flash file is the important thing behind the webcam functionality.
create new controller application\controllers\camera.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Camera extends CI_Controller {
public function index(){
$this->load->helper('url');
$this->load->view("camera");
}
public function saveImage(){
/*write your own code to save to your database*/
$newname = "some_name.png";
file_put_contents( $newname, file_get_contents('php://input') );
}
}
?>
create new view application\views\camera.php
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.img {
background: #ffffff;
padding: 12px;
border: 1px solid #999999;
}
.shiva {
-moz-user-select: none;
background: #2A49A5;
border: 1px solid #082783;
box-shadow: 0 1px #4C6BC7 inset;
color: white;
padding: 3px 5px;
text-decoration: none;
text-shadow: 0 -1px 0 #082783;
font: 12px Verdana, sans-serif;
}
</style>
<html>
<body style="background-color:#dfe3ee;">
<div id="outer" style="margin:0px; width:100%; height:90px;background-color:#3B5998;">
</div>
<div id="main" style="height:800px; width:100%">
<div id="content" style="float:left; width:500px; margin-left:50px; margin-top:20px;" align="center">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/cam/webcam.js"></script>
<script language="JavaScript">
document.write(webcam.get_html(440, 240));
</script>
<form>
<br />
<input type=button value="Configure settings" onClick="webcam.configure()" class="shiva">
<input type=button value="snap" onClick="take_snapshot()" class="shiva">
</form>
</div>
<script type="text/javascript">
webcam.set_api_url('<?php echo base_url();?>camera/saveImage');
webcam.set_quality(90);
webcam.set_shutter_sound(true);
webcam.set_hook('onComplete', 'my_completion_handler');
function take_snapshot() {
document.getElementById('img').innerHTML = '<h1>Uploading...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
if (msg.match(/(http\:\/\/\S+)/)) {
document.getElementById('img').innerHTML = '<h3>Upload Successfuly done</h3>' + msg;
document.getElementById('img').innerHTML = "<img src=" + msg + " class=\"img\">";
webcam.reset();
} else {
alert("Error occured we are trying to fix now: " + msg);
}
}
</script>
<div id="img" style=" height:800px; width:500px; float:left; margin-left:40px; margin-top:20px;">
</div>
</div>
</body>
</html>
Now copy webcam.js,shutter.mp3,webcam.swf to assets/js/cam. make 2 small changes in webcam.js
line number 27 : swf_url: 'webcam.swf'
line number 28 : shutter_url: 'shutter.mp3'
change to
line number 27 : swf_url: '../assets/js/cam/webcam.swf'
line number 28 : shutter_url: '../assets/js/cam/shutter.mp3'
note: that this Url is important and will differ.. Its better checking the .swf url exstince via google chrome than firefox from my experience.. added '../' to go up one folder for you to be in the root app folder to access assets folder
Cheers
Credits to Mr. Tintu Raju
UPDATE CODE BELOW
I found some code that is able to upload an image and display its thumbnail. However, I would like to save the images to a particular folder as well.
What jQuery code or ajax code can I use to save the original image to a folder of my choice?
Here is the live demo: http://jsfiddle.net/dn9Sr/2/
Here is the full code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<style>
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.input-file-row-1{
display: inline-block;
margin-top: 25px;
position: relative;
}
#preview_image {
display: none;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}
.upload-file-container {
position: relative;
width: 100px;
height: 137px;
overflow: hidden;
background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
float: left;
margin-left: 23px;
}
.upload-file-container-text{
font-family: Arial, sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 35px;
}
.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}
.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
<script>
$( document ).ready(function() {
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
};
reader.readAsDataURL(input.files[0]);
}
}
$("#patient_pic").live("change",function(){
readURL(this, "#preview_image")
});
});
</script>
</head>
<body>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
<div class="input-file-row-1">
<div class="upload-file-container">
<img id="preview_image" src="#" alt="" />
<div class="upload-file-container-text">
<div class = 'one_opacity_0'>
<input type="file" id="patient_pic" label = "add" />
</div>
<span> Add Photo </span>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
UPDATE: I think I am on the right track. I am close but I don't know what data to send from the jQuery. I added a php scrit and its getting a call back as success but I am not sending the right var. I think if I just send the right val I can get it.
CODE:
<script>
$( document ).ready(function() {
function readURL(input, target) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image_target = $(target);
reader.onload = function (e) {
image_target.attr('src', e.target.result).show();
$.ajax({
type:'POST',
url: 'theUpload.php',
data: input.files[0],
success:function(data){
console.log("success");
console.log(data);
alert(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
};
reader.readAsDataURL(input.files[0]);
}
}
$("#patient_pic").live("change",function(){
readURL(this, "#preview_image")
});
});
</script>
Try this one.
Script:
function uploadFile(){
var input = document.getElementById("file");
file = input.files[0];
if(file != undefined){
formData= new FormData();
if(!!file.type.match(/image.*/)){
formData.append("image", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('success');
}
});
}else{
alert('Not a valid image!');
}
}else{
alert('Input something!');
}
}
HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<input type="file" id="file" />
<button onclick="uploadFile();">Upload</button>
</body>
</html>
upload.php:
<?php
$dir = "image/";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]);
?>
John's answer is good but file = input.files[0] doesn't work for me
file = input[0].files[0]
works.
You need a server side language to store the uploaded image to specified folder. PHP is one of them, so I highly recommend to take a look of it.
AJAX is just for executing server side calls without refreshing the page.
hello am building a form that uploads images, it works correctly, but i want to add something extra, to be able to specify what the image would saved as. this is what i have, code snippet
<?php
//upload.php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
//Filter the file types , if you want.
if ($_FILES["myfile"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
echo "Uploaded File :".$_FILES["myfile"]["name"];
}
}
?>
HTML:
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
</body>
</html>
Give this a try, however you'll need to do some work on certain validation.
It uses a form input <input type="text" name="upload_name"> to give it a custom name.
Tested
HTML form
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
Name it:
<input type="text" name="upload_name">
<br>
<input type="file" size="60" name="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
var options = {
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
</script>
</body>
</html>
PHP
<?php
$upload_name = $_POST['upload_name'];
$idx = strpos($_FILES['myfile']['name'],'.');
$ext = substr($_FILES['myfile']['name'],$idx);
$file_name = $upload_name . $ext;
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
//Filter the file types , if you want.
if ($_FILES["myfile"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//move the uploaded file to uploads folder;
// move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
// echo "Uploaded File :".$_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$file_name);
echo "Uploaded File :" . $file_name;
}
}
?>
Footnotes:
Link to their project page http://malsup.com/jquery/form/ where you can download all the files, rather than fetching the JS from their website.
I am trying to code a file uploading process. When i will click browse button, the file will be uploaded on server and display that file contents without clicking submit button. When i upload file of large size, the upload will take more time, so i needed to implement a progressbar.
I have referred to the following useful links:
http://malsup.com/jquery/form/progress.html
http://malsup.com/jquery/form/#file-upload
I want the progress bar to be displayed automatically when i will click browse button. I don't know how to call the progress bar function, when i select the file in the browse window, without clicking submit Button.
I used the following code.
File : index.php
<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data" id="hello">
<input type="file" name="uploadedfile" ><br>
<input type="submit" value="Upload File to Server" >
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('#hello').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();
</script>
</body>
</html>
File : upload.php
<?php
$target_path = "upload/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>
The jQuery plugin you are using does not seem to support the behavior you want. That leaves you with two options:
Hack the plugin, making the upload start immediatly after selecting the file.
User an alternative for the upload which gives you more control over the upload control, for example http://www.plupload.com/.
I am trying to make an ajax based progress bar. But, I don't know how to calculate how much data has been uploaded which I'd like to show as a percentage of data uploaded.
Thank you
You can use APC or the PEAR Package Upload progress.
http://pecl.php.net/package/uploadprogress
Haven't done this in a while, I remember there being an issue with Webkit and having to use an iframe. Might want to look into that.
Try this:-
Demo url:--
http://jquery.malsup.com/form/progress.html
You can download jQuery file from this url and add in html tag
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js
http://malsup.github.com/jquery.form.js
Try this:
This is my html markup:
<!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code><input type="file" name="myfile"></code>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
});
})();
</script>
</body>
</html>
My php code:
<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>