Uploadify get file size and show in text box - php

I wish to get the file size and show inside my disabled textbox.
I googled and there is very less info about this.
Following bellow is my code
In PHP:
<div class="inputWrapper">
<div class="usetitle">* <?php echo Yii::t('labels', 'gameapk'); ?> :
<div class="div_upload_file_container">
<div style="position:absolute; margin: 0; padding:0; height:27px">
<input style="display:none" id="btnUploadFile" name="btnUploadFile" type="file" />
</div>
<div class="div_upload_file_container_inner">
<div class='word'>
</div>
<div style='clear:both'></div>
</div>
</div>
<div style="height:50px"></div>
<div id="uploaded_file"></div>
</div>
<div class="error2"><div id="err_btnUploadFile"></div></div>
</div>
In JS FILE:
//file
$('#btnUploadFile').uploadify({
'swf': base_url + '/js/plugins/uploadify321/uploadify.swf',
'uploader': "index.php?r=apk/uploadfile",
'folder' : '/temp',
'queueID': 'uploaded_file',
'queueSizeLimit' : 1,
'progressData': 'speed',
'removeCompleted': false,
'width': $('.div_upload_file_container').width(),
'height': 28,
'fileTypeDesc': 'Apk Files (*.apk)',
'fileTypeExts': '*.apk;',
'fileSizeLimit': '100GB',
'uploadLimit' : 1,
'itemTemplate': uploadedFileItem(),
'buttonText' : UPLOAD_FILE,
'onSelect': function (file) {
},
'onUploadStart': function (file) {
},
'onUploadSuccess': function (file, data, response) {
console.log (data);
$('#' + file.id).html(file.name);
var obj = JSON.parse(data);
statusCode = obj.statusCode;
if (statusCode == '200'){
console.log (data);
var today = obj.today;
var tmp_folder_with_date = obj.tmp_folder_with_date;
var filesize = obj.filesize;
var hashfilename_filename = obj.hashfilename_filename;
var full_path = obj.full_path;
file_cnt ++;
var html = '';
html = '<div>';
html += '<div style="float:left">';
html += file_cnt + '.';
html += '</div>';
html += '<div style="float:left; margin: 0 0 0 10px">';
html += file.name;
html += '</div>';
html += '<div style="clear:both"></div>';
html += '</div>';
$('#' + file.id).html(html);
}
var params = {
fileid: file.id,
fileName: obj.fileName,
fullSavePath_original: obj.fullSavePath_original,
fullSavePath_resize: obj.fullSavePath_resize,
fullSavePath_tobesave: obj.fullSavePath_tobesave,
fullSavePath_tobesaveURL: obj.fullSavePath_tobesaveURL,
filesize: obj.fileSize,
fullPath_TempFolder: obj.fullPath_TempFolder,
orientation: obj.orientation,
tobesave_file_width: obj.tobesave_file_width,
tobesave_file_height: obj.tobesave_file_height,
todayTempFolder: obj.todayTempFolder
};
DisplayNewUploadedPhotos(params);
},
'onUploadComplete': function (file) {
},
'onCancel': function (event,ID,fileObj,data) {
},
'onDialogClose': function (queueData) {
},
'onInit': function (instance) {
},
'onQueueComplete': function (queueData) {
},
'onClearQueue': function (queueItemCount) {
}
});
function uploadedFileItem() {
var html = '';
html = '<div id="${fileID}" class="fileUploadedItem">';
html += '<div style="margin:10px 0 0 0"></div>';
html += '<div class="uploadify-progress-bar"></div>';
html += '<div style="margin:10px 0 0 0">';
html += '<center>Cancel</center>';
html += '</div>';
html += '</div>';
return html;
}
obj.filesize is the file size ... Am I correct ? If I was correct , what should I do to get obj.filesize from JS to my textbox ?

I have an idea to do that suddenly:
$("#appsize").attr('value', obj.filesize);
HAHA THANKS =D

Related

Controller displaying json data instead of html

I am trying to fetch data using data and it is returning json in whole page.
This is my code on Controller to fetch products:
public function products(){
$allProducts = $this->product->has('Sizes')->has('Images')->paginate(9);
$prodCategories = $this->products_categories->get();
return response()->json( $allProducts);
}
And in the ajax, I have the following code:
$( document ).ready(function() {
$.ajax({
url: "{{ route('displayProduct') }}",
dataType: 'json',
method: 'get',
data: { _token:"{{ csrf_token() }}"},
success(response){
let array = response.data;
if(array == 0){
html += '<div class="block"><h2 class="aside-title">Product not found!</h2><p class="errorProduct">Sorry! There is no product in this category. Please search products on other categories</p></div>';
$('#productClick').html(html);
}
$.each( array, function( key, value ) {
let image = jQuery.makeArray(value.images);
html += '<div class="product-layout product-layout-table col-lg-4 col-md-4 col-sm-6 col-xs-6 col-12">';
html += '<div class="product-box clearfix">';
html += '<div class="product-image">';
html += '<a href="/product/'+value.slug+'" class="c-img link-product">';
html += '<img src="'+image[0]['image']+'" class="img-responsive" alt=""></a>';
html += '<a class="smooth quickview iframe-link btn-button quickview quickview_handler visible-lg" href="/quick/'+value.slug+'" title="Quick view" target="_self" data-fancybox-type="iframe">';
html += '<i class="fa fa-search" aria-hidden="true"></i></a></div>';
html += '<div class="product-info"><h4 class="product-name">'+value.title+'</h4>';
html += '<div class="price">'+value.price+' <span class="price-old">$142.00</span></div>';
html += '<div class="product-desc">';
html += '<p>'+value.excerpt+'</p></div></div>';
html += '<div class="button-group"><button class="add-to-cart smooth" onclick="window.location.href=\'cart.html\'">ADD TO CART</button></div></div></div></div></div>';
});
$('#productClick').html(html);
loadIframe();
}
});
});
But, when I load the product I am getting json data on the whole page.
The function loadFrame has following code:
function loadIframe(){
$.getScript( "ajax/test.js" )
}

Joomla uploading images issue

I installed BT Property component for my Joomla site and when I select multiple of images (more than 3 or 4) which I want to upload for my article, it nothing happens. The images won't upload. I try to change the code but I don't know what the problem is.
This is the code I want to change.
<?php
defined('_JEXEC') or die('Restricted access');
$document = JFactory::getDocument();
$path = $this->params->get('images_path', 'images/bt_property');
?>
<ul class="adminformlist" id="uploading">
<li><input type="file" name="attachment" id="attachment" multiple /><img id="spinner"
style="display: none; margin-left: 10px;"
src="<?php echo JURI::root(); ?>components/com_bt_property/assets/img/spinner.gif">
<div style="clear: both"></div>
<div id="btss-message"></div></li>
</ul>
<script type="text/javascript">
(function($){
var files = [];
$("#attachment").change(function(event) {
$.each(event.target.files, function(index, file) {
var reader = new FileReader();
reader.onload = function(event) {
object = {};
object.filename = file.name;
object.data = event.target.result;
files.push(object);
if(files.length==1){
uploadFile(index);
$('#spinner').show();
$("#btss-message").show();
}
};
reader.readAsDataURL(file);
});
});
function uploadFile(index){
$.ajax({url: "index.php?option=com_bt_property&task=properties.upload",
type: 'POST',
data: {filename: files[index].filename, filedata: files[index].data},
success: function(response, status, xhr){
uploadHandler(response, status, xhr);
if(index == files.length-1){
$('#spinner').hide();
files = [];
$("#attachment").val('');
$("#btss-message").delay(1000).slideUp(function(){
$("#btss-message").html('');
});
}else{
index++;
uploadFile(index);
}
}
});
}
function uploadHandler(response, status, xhr) {
var data = jQuery.parseJSON(response);
if(data == null){
showMessage("<br /><span style=\"color: red;\">Loading Failed</span>");
}else{
var file = data.files;
if (!data.success) {
showMessage("<br /><span style=\"color: red;\"> " + data.message +"</span>");
}
else {
var html = '<li>';
html += '<input class="input-default" title="Make default" name="default_image" type="radio" value="'+file.filename+'" />';
html += '<img class="img-thumb" src="<?php echo JURI::root() . $path . '/tmp/' . ($this->params->get('thumbimgprocess', 1) == -1 ? 'original' : 'thumb') . '-'; ?>'+file.filename+'" />';
html += '<input type="hidden" name="image_id[]" value="0" />';
html += '<input type="hidden" name="image_filename[]" value="'+file.filename+'" /><br/>';
html +='Edit';
html +='<a href="javascript:void(0)" class="remove" onclick="removeImage(this)" >Remove</a>';
html += '</li>';
jQuery('#sortable').append(html);
jQuery('#sortable li:last-child ').find('a.edit').data('title', file.title);
reNewItem();
showMessage('<br />' + file.title + " uploaded successfully!");
}
}
}
function showMessage(msg){
$("#btss-message").append(msg);
}
})(jQuery);
</script>
Is there a way to fix the code? I would be very thankful for any answer.
Your file object is coming up as undefined, and thus you're not able to use file.filename.
Your problem is most likely with this line var file = data.files; - are you sure about data.files?

append data in popup using jquery php

Pop-up html:
<div class="row" id="get_uv_detail" style="display:none">
<div class="box border">
<div class="box-body">
<div class="uv-more-detail" style="max-height:450px;padding-right:10px" ></div>
</div>
</div>
</div>
In controller i have function that returns data like this:
[{"name":"p1"},{"name":"p2"}]
How can I append it in the pop-up?
I have to display data like this:
Name
-----
p1
p2
Here is my script:
.done(function(data) {
$('.uv-more-detail').append(data);
});
// pop-up display
bootbox.dialog({
message: msg,
title: title,
buttons: {
main: {
label: "Close",
className: "btn-primary",
callback: function() {
$(".bootbox").modal("hide");
}
}
}
});
This is the same answer as link provided by #ParthTrivedi:
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].name+ "</td>");
tr.append("<td>" + json[i].date+ "</td>");
$('table').append(tr);
}
});
});
For more answers: Parsing JSON objects for HTML table

why is my JSON array output repeated 3 times?

I'm beginner to the JSON with PHP if you can please help me. the code repeat the same output in 3 times. I include the require codes here. The code details are given below.
../Controller/controller.php has the MySQL code to retrieve data from database
donnerdata.js:
function member_note(){
var tableData;
$.post("../Controller/controller.php", {loading_donnerdata: 'table'}, function(e) {
if (e === undefined || e.length === 0 || e === null) {
tableData = 'noData';
$('#orders-datatable').html('').append(tableData);
} else {
$.each(e, function() {
tableData += '<div class="row comment">';
tableData += '<div class="col-sm-10">';
tableData += '<div class="message clearfix">';
tableData += '<div class="note">';
tableData += '<p>';
tableData += 'something';
tableData += '</p>';
tableData += '</div>';
tableData += '</div>';
tableData += '</div>';
});
//Load Json Data to Table
$('#orders-datatable').html('').append(tableData);
}
}, "json");
}
viewStudent.php:
<div class="comments">
<div class="" id="orders-datatable">
<?php require_once '../../Common/all_js_links.php'; ?>
<script src="js/donnerdata.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
member_note();
});
});
</script>
</div>
</div>
Try this instead of your doubly-nested callback.
$(document).ready(function() {
member_note();
});

Random picture form database and rating system

Hey i have a problem on my website i want to display a image with a rating under and then when i rate the image it should change to the next picture. And there is my problem because it displays the next picture correctly but it doesn't change the id in the rating system so i am rating the same picture again and again
Source code:
$place="upload/";
$first = mysql_query("SELECT * FROM images ORDER BY RAND()");
while($wor = mysql_fetch_array($first))
{
$id=$wor['id'];
$name = $wor['name'];
$image = $place . $wor['name'];
}
$number="1";
$wrongnumber="2";
$random = mysql_query("SELECT * FROM images ORDER BY RAND()");
$place="upload/";
echo '<script> ';
while($wor = mysql_fetch_array($random))
{
$ids=$wor['id'];
$name = $wor['name'];
$images = $place . $wor['name'];
$number=$number + 1;
$wrongnumber=$wrongnumber + 1;
echo 'function ' . 'changeSrc' . $number . '() '; ?>
{
document.getElementById("rand").src="<? echo $images;?>";
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
document.getElementById("102").id=<? echo $ids;?>;
}
<?
}
?>
</script>
<img id="rand" src="<? echo $image;?>"><br>
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="102">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
The output code:
// This is the first thing we add ------------------------------------------
$(document).ready(function() {
$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post(
'ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);
// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
'ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
$.post(
'setcookie.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
// END FIRST THING
</script><script> function changeSrc2() {
document.getElementById("rand").src="upload/1329614519daily_erotic_picdump_48-2-500x334.jpg";
document.getElementById("button").onclick=changeSrc3;
document.getElementsByClassName('rate_widget').id="125";
}
function changeSrc3() {
document.getElementById("rand").src="upload/1329614453tumblr_leb4pwc0Xc1qzy9ouo1_1280-1024x640.jpg";
document.getElementById("button").onclick=changeSrc4;
document.getElementsByClassName('rate_widget').id="65";
}
function changeSrc4() {
document.getElementById("rand").src="upload/1329614295daily_erotic_picdump_20-copy-500x333.jpg";
document.getElementById("button").onclick=changeSrc5;
document.getElementsByClassName('rate_widget').id="44";
}
function changeSrc5() {
document.getElementById("rand").src="upload/1329614301daily_erotic_picdump_80-2-500x375.jpg";
document.getElementById("button").onclick=changeSrc6;
document.getElementsByClassName('rate_widget').id="51";
}
function changeSrc6() {
document.getElementById("rand").src="upload/13296142941-3-450x600.jpg";
document.getElementById("button").onclick=changeSrc7;
document.getElementsByClassName('rate_widget').id="225";
}
function changeSrc7() {
document.getElementById("rand").src="upload/1329614284tumblr_l53l0qM6HB1qc4zlyo1_500-450x568.jpg";
document.getElementById("button").onclick=changeSrc8;
document.getElementsByClassName('rate_widget').id="19";
}
function changeSrc8() {
document.getElementById("rand").src="upload/1329614454tumblr_lro15r2fkh1qzlro6o1_500-450x301.jpg";
document.getElementById("button").onclick=changeSrc9;
document.getElementsByClassName('rate_widget').id="73";
}
function changeSrc9() {
document.getElementById("rand").src="upload/tumblr_mccaolmQPE1regfy1o1_500.jpg";
document.getElementById("button").onclick=changeSrc10;
document.getElementsByClassName('rate_widget').id="272";
}
function changeSrc10() {
document.getElementById("rand").src="upload/1329614297Pix-Mix-304-img012-500x312.jpg";
document.getElementById("button").onclick=changeSrc11;
document.getElementsByClassName('rate_widget').id="47";
}
</script>
<img id="rand" src="upload/1329614465tumblr_lscy8aqOFE1qg7sdjo1_500-450x322.jpg"><br>
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="99">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
Aren't you missing brackets?
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>();
By the way, to reduce data laod add LIMIT 1 to your SQL query when retrieving only one row.

Categories