I bought 'uploadifive' today. I managed to get it to work with firefox and opera. However, I can only upload small files. The filesizelimit or sizeLimit or uploadlimit option does not seem to work for me? Do I have to format it in a certain way, or maybe I have to change something in the uploadifive.php file too?
here is the index file below. Any help would be great. thanks : )
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadLimit' : 0,
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
Related
I am working on a script that uses Nivo Slider. I have this working but I would like to make each image have a different transition effect.
The images are loaded using a MySQL call which returns the ImageName and Effect as PHP variables.
$row_Signage['PromotionImage'] = ImageName: image_1.png
$row_Signage['Effect'] = Effect: slideInRight
The config code for the Nivo Slider is:
$(window).load(function() {
var TimeLapse = '<?php echo $row_Setting['TimeLapse'];?>';
var Effect = '<?php echo $row_Setting['Effect'];?>';
console.log("EFFECT", Effect);
var AnimSpeed = '<?php echo $row_Setting['AnimSpeed'];?>';
$('#slider').nivoSlider({
effect: Effect,
slices: 30,
boxCols: 16,
boxRows: 8,
animSpeed: AnimSpeed,
pauseTime: TimeLapse,
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
//prevText: 'Prev',
//nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
I then have a PHP While loop to display the images:
if($totalRows_Signage > 0){
while($row_Signage = mysql_fetch_array($Signage)){
echo '<img src="/'.$ImagePath .''.$row_Signage['PromotionImage'].'" data-transition="'.$row_Signage['Effect'].'"/> ';
$i++;
}
} else {
echo '<img src="/'.$DefaultImagePath .'"/>';
}
The issue I have is the echo statement in the while loop is not picking up the data-transition variable, I have tried a number of ways at writing the line that echo's out the images. Can anyone see where I am going wrong.
Many thanks in advance for your help and time.
On returning to this issue it was actually working with the code I posted. Odd but it works.
This is my uploadifive setup:
Inside body:
<div id="file_rows_wrapper">
<div class="file_row">
<input class="file_upload" name="file_upload" type="file" multiple="false">
</div>
</div>
Add Another File
While this is the javascript part:
$(function() {
uploadify();
});
function uploadify() {
<?php $timestamp = time();?>
$('.file_upload').uploadifive({
'auto' : true,
'checkScript' : '/files/check_exists',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('hiall' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : '/files/upload_file',
'multi' : false,
'buttonText' : 'Upload File',
});
};
function add_file()
{
var file = $('.file_row:first').clone();
file.css('margin-top', '20px');
file.fadeIn().appendTo($('#file_rows_wrapper'));
uploadify();
}
All works as expected. The "file_row" div is being cloned but when clicking on the "Add Another File" and choosing the local file, nothing happens. There is no upload. If I maually copy the "file_row" div more times then the upload works fine, even more uploads at once. What am I doing wrong?
I think you need a unique id in your file input to have multiple instances on one page.
I am making an online scan application just with HTML5 and javascript using Quagga.js.
I need to get the webcam working for searching barcodes and imported quagga.js :
On the web page of quagga you'll find a method called Quagga.init. to initialize the webcam view.
I entered in the script tags this code :
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
},
decoder : {
readers : ["code_128_reader"]
}
}, function() {
console.log("Initialization finished. Ready to start");
Quagga.start();
});
But nothing happened.
What do I need to do to get this webcam working?
Any other opinions to create a web-based application for scanning barcodes ?
Thank you for answering !
Include <div id="interactive" class="viewport"></div> into your markup.
It's a few months old question but Eugene's answer is not full. For me, to make QuaggaJS work I had to add video tag as well:
<div id="interactive" class="viewport">
<video autoplay="true" preload="auto"></video>
</div>
Have you checked your console?
Using "Livestream" (Access to Camera) requires you to have a SSL certified website.
It means the additional "s" in https://
You can read more about it here: https://support.google.com/adwords/answer/2580401?hl=sv
You should also know that you can get a free SSL certificat, but you need to have access to your server. Most hosting services can help you with this.
Add in html
<div id="barcode-scanner" class="size"> </div>
Add in JavaScript
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
target: document.querySelector('#barcode-scanner'),
constraints: {
width: 520,
height: 400,
facingMode: "user" //"environment" for back camera, "user" front camera
}
},
decoder : {
readers : ["code_128_reader","code_39_reader"]
}
}, function(err) {
if (err) {
esto.error = err;
console.log(err);
return
}
Quagga.start();
Quagga.onDetected(function(result) {
var last_code = result.codeResult.code;
console.log("last_code ");
});
});
Works for me in Vue.
Add a div element like this in your markup:
<div id="barcode_canvas"></div>
Then include the target in your input stream like this:
target: document.querySelector('#barcode_canvas')
Quagga.init({
inputStream : {
name : 'Live',
type : 'LiveStream',
target: document.querySelector('#barcode_canvas')
},
decoder : {
readers : ['ean_reader']
}
}, function(err) {
if (err) {
console.log(err);
return
}
console.log('Initialization finished. Ready to start');
Quagga.start();
});
I am noticing that my masonry page is creating overlap and unequal spacing. This isn't consistent and seems to happen sometimes, while at other times it works fine. In every scenario if I resize my window slightly, the mason() function kicks in and fixes it. I originally thought that it was an issue with having to wait for the images to load (around 30 at a time are loading), but I have already implemented imagesLoaded and see no difference. Can anyone point out my mistake?
<script>
function mason() {
var $container = $('#dealcontainer').masonry({
itemSelector: '.outerdeal',
columnWidth: '.outerdeal'
});
$container.imagesLoaded(function(){
$container.masonry();
});
}
function colorize()
{
$('.dealfilterli').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('li').addClass("colorize");
} else {
$(this).closest('li').removeClass("colorize");
}
});
});
}
function InitInfiniteScroll(){
$('#dealcontainer').infinitescroll({
navSelector : "div.pagination",
nextSelector : "div.pagination li a",
itemSelector : "#deals div.outerdeal",
loading:{
finishedMsg: '',
img: 'http://www.example.com/img/icons/site/spinner.gif',
msgText: '',
speed: 'fast',
},
},function(newElements) {
var $newElems = $( newElements );
$('#dealcontainer').masonry( 'appended', $newElems );
mason();
});
}
$( document ).ready(function() {
InitInfiniteScroll();
colorize();
});
$(window).resize(function() {
InitInfiniteScroll();
mason();
}).resize();
</script>
I was having the exact same issue despite using imagesLoaded, and after a lot of trial and error I found that the problem can be solved with a setTimeout function. Here is an example from my project:
setTimeout(function() {
masonryContainer.imagesLoaded(function() {
masonryContainer.prepend(newPost);
masonryContainer.masonry('prepended', newPost);
});
}, 500);
The 500ms timeout is arbitrary, so I would play around with that on your page to find the lowest possible value that still fixes your issue. Hope that helps!
Cheers,
Jake
You should use:
$container.masonry('reloadItems');
on mason() function and everything will be replaced in the correct position.
I'm new at Angularjs and I'm trying to create an AngularJS project with jQuery File Upload but I could not distinguish between directives file controllers file and the view.
Can anyone help me by providing me a clear structure of how files should be placed? (controllers, directives, and view)
I wrote something for my very first Angular.js project. It's from before there was an Angular.js example, but if you want to see the hard way, you can have it. It's not the best, but it may be a good place for you to start. This is my directives.js file.
(function(angular){
'use strict';
var directives = angular.module('appName.directives', []);
directives.directive('imageUploader', [
function imageUploader() {
return {
restrict: 'A',
link : function(scope, elem, attr, ctrl) {
var $imgDiv = $('.uploaded-image')
, $elem
, $status = elem.next('.progress')
, $progressBar = $status.find('.bar')
, config = {
dataType : 'json',
start : function(e) {
$elem = $(e.target);
$elem.hide();
$status.removeClass('hide');
$progressBar.text('Uploading...');
},
done : function(e, data) {
var url = data.result.url;
$('<img />').attr('src', url).appendTo($imgDiv.removeClass('hide'));
scope.$apply(function() {
scope.pick.photo = url;
})
console.log(scope);
console.log($status);
$status.removeClass('progress-striped progress-warning active').addClass('progress-success');
$progressBar.text('Done');
},
progress : function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$progressBar.css('width', progress + '%');
if (progress === 100) {
$status.addClass('progress-warning');
$progressBar.text('Processing...');
}
},
error : function(resp, er, msg) {
$elem.show();
$status.removeClass('active progress-warning progress-striped').addClass('progress-danger');
$progressBar.css('width', '100%');
if (resp.status === 415) {
$progressBar.text(msg);
} else {
$progressBar.text('There was an error. Please try again.');
}
}
};
elem.fileupload(config);
}
}
}
]);
})(window.angular)
I didn't do anything special for the controller. The only part of the view that matters is this:
<div class="control-group" data-ng-class="{ 'error' : errors.image }">
<label class="control-label">Upload Picture</label>
<div class="controls">
<input type="file" name="files[]" data-url="/uploader" image-uploader>
<div class="progress progress-striped active hide">
<div class="bar"></div>
</div>
<div class="uploaded-image hide"></div>
</div>
</div>