I'm preparing the script facebook style wall post. Using Php and Jquery. But I have a problem. I wrote a function to upload photos. Upload a picture from your computer picture is selected when the button is clicked. and passage of the picture preview image (image loading) part opens. Photos button after installing upload pictures come back again.
The problem is that (loading image) warning does not disappear. Also (loading image) warning not lost are not coming back button to upload pictures.
Thanks in advance for your help.
jQuery
$('#photoimg').die('click').live('change', function()
{
var values=$("#uploadvalues").val();
$("#previeww").html('<img src="wall_icons/loader.gif"/>');
$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
$("#imageloadstatus").show();
$("#imageloadbutton").hide();
},
success:function(){
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
},
error:function(){
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
} }).submit();
var X=$('.preview').attr('id');
var Z= X+','+values;
if(Z!='undefined,')
{
$("#uploadvalues").val(Z);
}
});
HTML
<div class="tb-content">
<div class="ct-tab1">
<textarea name="update" id="update" placeholder="Ne düşünüyorsun?" class="contenttextarea" ></textarea>
<div id="button_hide">
<div class="secretdiv">
<div id="webcam_container" class='border'>
<div id="webcam" >
</div>
<div id="webcam_preview">
</div>
<div id='webcam_status'></div>
<div id='webcam_takesnap'>
<input type="button" value=" Resimçek " onclick="return takeSnap();" class="camclick resimcekbutton"/>
<input type="hidden" id="webcam_count" />
</div>
</div>
<div id="imageupload" class="border">
<form id="imageform" method="post" enctype="multipart/form-data" action='message_image_ajax.php'>
<div id='preview'>
</div>
<div id='imageloadstatus'>
<img src='<?php echo $base_url;?>wall_icons/ajaxloader.gif'/> Resim yükleniyor lütfen bekleyin....
</div>
<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg" class="dosyasec" />
</div>
<input type='hidden' id='uploadvalues' />
</form>
</div>
</div>
<div class="videovecamerabutonlari">
<div class="imgbutonu"><img src="wall_icons/videobutonu.png" border="0" /></div>
<div class="videobutonu"><img src="wall_icons/camerabutton.png" border="0" /></div>
</div>
<div class="shr">
<input type="submit" id="update_button" class="update_button" value="Paylaş" />
<input type="submit" id="cancel" value="İptal" />
</div>
</div>
</div>
<div id='flashmessage'>
<div id="flash" align="left" ></div>
</div>
Php
<?php
function getExtension($str)
{
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
$ext = getExtension($name);
if(in_array($ext,$valid_formats))
{
if($size<(10024*10024))
{
$actual_image_name = time().$uid.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$data=$Wall->Image_Upload($uid,$actual_image_name);
$newdata=$Wall->Get_Upload_Image($uid,$actual_image_name);
if($newdata)
{
echo '<img src="'.$path.$actual_image_name.'" class="preview" id="'.$newdata['id'].'"/>';
}
}
else
{
echo "Fail upload folder with read access.";
}
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format.";
}
else
echo "Please select image..!";
exit;
}
?>
Related
Ok so I’m working on a photo gallery project and I’m trying to add a photo. I have a page that allows the user to browse for a picture and another input field for adding a title for their picture. The added picture path and title should be added to a xml file where the images are being pulled from.
Also if it helps, I'm using Materialize css. I’m not sure why it’s not working but this is what I currently have:
Form
<form action="../models/addPicture.php" method="POST" enctype="multipart/form-data">
<div class="row center">
<h5>Choose a Photo to Upload</h5>
</div>
<div class="file-field input-field">
<div class="btn-large black">
<span>Browse</span>
<input type="file" />
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload file" name="picFile" />
</div>
</div>
<div class="row">
<div class="input-field">
<input type="text" name="picTitle" class="validate" placeholder="Enter a title for your picture.">
</div>
</div>
<div class="row center">
<button class="btn-large black" type="submit">Add Pic!</button>
</div>
Method:
<?php
if (($_FILES['picFile']['name']!="")){
$target_dir = "../images/";
$file = $_FILES['picFile']['name'];
$path = pathinfo($file);
$filename = $path['basename'];
$ext = $path['extension'];
$temp_name = $_FILES['picFile']['temp_name'];
$path_filename_ext = $target_dir.$filename.".".$ext;
if (file_exists($path_filename_ext))
{
$message = "Added Picture Failed please try again.";
$color = "red-text";
header("Location: ../index.php?Message=".$message."&color=".$color);
}
else
{
move_uploaded_file($temp_name,$path_filename_ext);
$message = "Added Picture Successfully. Please Click Reset to View.";
$color = "green-text";
header("Location: ../index.php?Message=".$message."&color=".$color);
}
}
else
{
$message = "Please enter a picture to submit.";
$color = "red-text";
header("Location: ../index.php?Message=".$message."&color=".$color);
}
?>
I have found a small mistake in your code at line no. 9.
$temp_name = $_FILES['picFile']['temp_name'];
Change the ['temp_name]; to ['tmp_name];
Use this code.
$temp_name = $_FILES['picFile']['tmp_name'];
I use a php ajax script for uploading image in my site and it's don't has limit for upload image.
I want a user can upload only for example 3 image. how can add this limit in my code?
This is my php code for uploading image:
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$vpb_upload_image_directory = "uploads/";
$vpb_allowed_extensions = array("gif", "jpg", "jpeg", "png");
foreach($_FILES as $file)
{
/* Variables Declaration and Assignments */
$vpb_image_filename = basename($file['name']);
$vpb_image_tmp_name = $file['tmp_name'];;
$vpb_file_extensions = pathinfo(strtolower($vpb_image_filename), PATHINFO_EXTENSION);
//New file name
$random_name_generated = time().rand(1234,9876).'.'.$vpb_file_extensions;
if($vpb_image_filename == "")
{
//Browse for a photo that you wish to use
}
else
{
if (in_array($vpb_file_extensions, $vpb_allowed_extensions))
{
if(move_uploaded_file($vpb_image_tmp_name, $vpb_upload_image_directory.$random_name_generated))
{
//Display Uploaded Files
$image .= '
<div class="vpb_wrapper" style="padding:10px;">
<img src="'.$vpb_upload_image_directory.$random_name_generated.'" class="vpb_image_style" />
</div>';
//$image .= '<div class="vpb_wrapper" style="padding:10px; text-decoration:none;">'.$vpb_image_filename.' uploaded</div>';
}
}
else
{
// Do not upload files which are not in the allowed file array
}
}
}
//Display the files
if($image != "") echo $image;
}
?>
In javascript, you can do something like this,
$(document).ready(function(){
$('#photoUploader').click(function(){
$('#photoUI').toggle('slow');
});
var ctr = 1;
$('#add').click(function(){
if(ctr < 3)
{
$('#ulPhoto').append("<li><input type='file' name='file[]' onchange='loadPreview(this,"+ctr+")' id='photo"+ctr+"' /><br /><img id='img"+ctr+"' src='#' alt='' style='width:100px' /><input type='text' autocomplete='off' name='caption[]' id='caption"+ctr+"' placeholder='ID Number' /></li>");
ctr++;
}
else
{
alert('Only 3 Images Allowed at a time');
}
});
});
HTML
<div id="photoUI" style="display:none; height: auto">
<ul id="ulPhoto">
<li>
<input type="file" name="file[]" id="photo0" />
<br />
<img id="img0" src="#" alt="" style="width:100px" />
<input type="text" autocomplete="off" name="caption[]" onchange="loadPreview(this,0)" id="caption0" placeholder="Default ID Number" readonly disabled />
</li>
</ul>
<span id="add" style="cursor:pointer">Add More...</span>
</div>
I have a problem with the function for upload video and images. I can upload images but not video I don' know why. In the and more code for controller and form.
Code in user_models php:
function newp($title,$post,$image,$video,$cat){
$id=$this->session->userdata('userid');
if($video!="")
{
$data=array(
'userid'=>$id,
'title'=>$title,
'forumpost'=>$post,
'categoryid'=>$cat,
'videourl'=>$video
);
}
Image:
else if($image!=""){
$data=array(
'userid'=>$id,
'title'=>$title,
'forumpost'=>$post,
'categoryid'=>$cat,
'imageurl'=>$image
);
}else{
$data=array(
'userid'=>$id,
'title'=>$title,
'forumpost'=>$post,
'categoryid'=>$cat,
);}
$this->db->insert('forum',$data);
}
}
Form:
<form method="post" enctype="multipart/form-data" action="<?php echo base_url();?>index.php/forum/newpk">
<div style="float:left;width: 95%;margin-top:5px;margin-left: 15px">
<h3> Add A Post</h3>
<div class="list-group" >
<input type="text" required name="title" id="title" class="form-control" placeholder="Title of the Post">
</div>
<div class="list-group">
<textarea name="post" class="form-control" style="min-height: 150px;" placeholder="Post">
</textarea>
</div>
<div class="list-group">
<span style="float:left;display:inline-block;"><p style="font-size:15px">Video File</p> <input type="file" name="video" accept="video/*" /></span>
<p style="font-size:15px;margin-left:10%;width: 32px;display:inline-block;">OR</p>
Image File
</div>
<div class="listgroup">
To which category it belongs
<select name="cat"><?php foreach($cato as $cat){ ?><option name="cat" value="<?php echo $cat->categoryid;?>"><?php echo $cat->categoryname;?></option><?php }?></select>
</div>
<div class="list-group" style="margin-top: 70px;margin-left: 35%;">
<button type="submit" style="width: 159px;height: 47px;line-height: 2.3;font-size: 17px;" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
Controller:
public function newpk(){
if($this->session->userdata('userid')){
$title=$this->security->xss_clean($this->input->post('title'));
$post=$this->security->xss_clean($this->input->post('post'));
$cat=$this->security->xss_clean($this->input->post('cat'));
if($cat=="" || $post=="" || $title=="")
{
echo "Required field cannot be empty";
die();
}
$themepicid="";
$this->load->model('forum_model');
Video part:
if(isset($_FILES['video']) && $_FILES['video']['size']>0){
$pktid=$this->idGenerator();
$pathh='assets/video/';
$themepicid=$this->session->userdata('userid');
$type= pathinfo($_FILES['video']['name'], PATHINFO_EXTENSION);
$pic=$themepicid;
$themepicid=$themepicid.$pktid.".".$type;
move_uploaded_file($_FILES['video']['tmp_name'], $pathh.$themepicid);
$image="";
$this->forum_model->newp($title,$post,$image,$themepicid,$cat); // How the forum likes
Image part:
}
else if(isset($_FILES['image']) && $_FILES['image']['size']>0){
$pathh='assets/images/';
$themepicid=$this->session->userdata('userid');
$type= pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
$pktid=$this->idGenerator();
$pic=$themepicid;
$themepicid=$themepicid.$pktid.".".$type;
move_uploaded_file($_FILES['image']['tmp_name'], $pathh.$themepicid);
$image="";
$this->forum_model->newp($title,$post,$themepicid,$image,$cat);
}
else{
$image="";
$this->forum_model->newp($title,$post,$image,$image,$cat);
}
redirect('index.php/forum','refresh');
}
else{
redirect('index.php/user','refresh');
}
}
}
Maybe your video size larger than max size upload config in php.ini
You can use upload library from CI, it's easy to use and help you prevent error
http://ellislab.com/codeigniter/user-guide/libraries/file_uploading.html
If you using upload lib of CI, dont forget config allowed types
I am using form action event to load image on server ,how can i identify return of method so that i can set backgound image of canvas element with that image???
<form id="imageform" class="form-horizontal" action="ajaximage.php" method="post" enctype="multipart/form-data" >
<div class="control-group">
<label class="control-label" for="InputImage">Upload Image for Liberary</label>
<div class="controls">
<span class="btn btn-file">
<input type="file" name="photoimg" id='fileImage' class="fileUpload" required />
<div id='preview' style=""></div> <!-- style="width: 90px;" onchange="this.style.width = '100%';" <div id='categoryImage' style='border:1px solid black; height:20px' ></div> --> <div id='libImage' style="display: none"></div> <div id='preview'></div> </span>
</div>
</div>
</form>
ajaximage.php
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
//echo "<script>alert(".$name.")</script>";
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024))
{
$actual_image_name = $txt.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "<img src='../products/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
you can fire change event using following code with jQuery
$("document").ready(function(){
$("#fileImage").change(function() {
$( "#imageform" ).submit();
});
});
OR you can use this also
$('#fileImage').on("change", function(){ $( "#imageform" ).submit(); });
see Fiddle
i am uploading the files to PHP script. it process and give response. i want to load that response in the div or frame on same web page. now the following script giving response in the blank web page. please help me to solve this.
php:
<html>
<head>
<script type="text/javascript">
function init() {
if(top.uploadDone) top.uploadDone();
}
window.onload=init;
</script>
<body>
<?php
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
file_put_contents(
'uploads/' . $fn,
file_get_contents('php://input')
);
echo "$fn uploaded";
exit();
}
else {
// form submit
$files = $_FILES['fileselect'];
//print $files['name'];
foreach ($files['error'] as $id => $err) {
if ($err == UPLOAD_ERR_OK) {
$fn = $files['name'][$id];
move_uploaded_file(
$files['tmp_name'][$id],
'uploads/' . $fn
);
if($id==1)
{
$filename = 'uploads/' . $fn;
$fp = fopen( $filename, "r" ) or die("Couldn't open $filename");
$line = fgets($fp);
fclose($fp);
$arr = split(",",$line);
for($i=2;$i< count($arr);$i++)
{
print '<input type="checkbox" name="traits" value="1">'.$arr[$i]."<br>";
}
}
}
}
}
?>
</body>
</html>
Jquery:
function init() {
document.getElementById("upload").onsubmit=function() {
document.getElementById("upload").target = "Analysis";
document.getElementById("Analysis").onload = uploadDone; }
}
function uploadDone() { //Function will be called when iframe is loaded
var ret = frames['Analysis'].document.getElementsByTagName("body")[0].innerHTML;
}
HTML script:
<div id="content_column">
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<fieldset>
<div id="Geno" style="display:none">
<strong>Select Genotypic File</strong>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<input type="file" id="fileselect" name="fileselect[]" />
</div>
</div>
<P>
<div id="Peno" style="display:none">
<strong>Select Penotypic File</strong>
<div>
<input type="file" id="fileselect1" name="fileselect[]" />
</div>
</div>
<P>
<div id="Other" style="display:none">
<strong>Select Other Files*</strong>
<div>
<input type="file" id="fileselect2" name="fileselect[]" multiple="multiple" />
</div>
</div>
<div id="submitbutton" style="display:none">
<INPUT TYPE="Submit" VALUE="Upload" />
</div>
</fieldset>
</form>
<iframe id="Analysis" name="Analysis" src="" ></iframe>
</div>
Thank you in adavance. .