I need to upload more than 10000 images togather for a project in php. After changing max_file_uploads to 1000 in php.ini i can only upload 200 photos at a time.now i'm using uplodify but it allows only 999 files to be uploaded at a time.how can increase this limit to 2000?here's my code in the index page`
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadify({
'uploadLimit' : 2000,
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
});
});
</script>
May be you can uploading files with using File API (HTML5) and creat queue with files with some count files?
I think that this is real.
This is my code. Quick wrote. You can change it by yourself.
<!DOCTYPE HTML>
<html>
<body>
<head><meta charset="utf-8"></head>
<form onSubmit="upload_files(this); return false;">
<input type="file" name="files_upload" multiple>
<input type="submit" value="Upload">
</form>
<script>
var tests = {
filereader: typeof FileReader !== 'undefined',
formdata: !!window.FormData
};
var limit = 199; // Limit files in queue.
function upload_files(form) {
var files = form.elements.files_upload.files;
var files_length = files.length;
var files_count = 0;
var xhr = new XMLHttpRequest();
var formdata = new FormData();
for (var i = 0; i < files_length; i++) {
if ((files_count < (limit - 1))) {
formdata.append('files[' + i + ']', files[i]);
files_count++;
}
else {
files_count = 0;
formdata.append('files[' + i + ']', files[i]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'uploader.php');
xhr.send(formdata);
var formdata = new FormData();
}
}
if (files_count < limit && files_count > 0) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'uploader.php');
xhr.send(formdata);
}
}
</script>
</body>
</html>
Related
I'm trying to dynamically update text on a PHP page via AJAX. But, instead of the text coming through at different intervals, it all comes at once. Maybe this is the wrong approach.
index.html
<html>
<head>
<title>Please Update!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.post("hello.php", function(data){
var success = $("#update");
success.css("color", "green");
success.html("> \r " + data + ".");
});
});
</script>
</head>
<body>
<div id="update"></div>
</body>
</html>
hello.php
<?php
echo "Hello World\n";
sleep(1);
echo "\rFoobar\n";
sleep(1);
echo "\rBazboo\n";
?>
I'd like the text to overwrite itself after one second but it comes barreling down the pipe all at once. ;_;
Not sure about this, but it might help you to do...
in PHP
<?php
$result[] = "Hello World\n";
$result[] = "\rFoobar\n";
$result[] = "\rBazboo\n";
print_r($result);
?>
in Ajax result
$.post("hello.php", function(data){
for(let i = 0; i < data.length; i++) {
setTimeout(() => {
// your stuff to do is here by 1 second interval...
var success = $("#update");
success.css("color", "green");
success.html("> \r " + data[i] + ".");
}, 1000*i);
}
});
Simple Representation
var data = ["Hello World\n","\rFoobar\n","\rBazboo\n"];
for(let i = 0; i < data.length; i++) {
setTimeout(() => {
console.log(data[i]);
}, 1000*i);
}
Like Antony suggested. You could create an array in php and encode it as Json
and then create a settimeout().
php
$data = array("Hello World","Foobar","BazBoo");
echo json_encode($data);
jQuery ~ JavaScript
$.ajax({
method: "GET",
url: "hello.php",
success: (res) => {
for (let i = 0; i < res.length; i++) {
setTimeout(() => {
// or use .html(res[i])
$("#update").text(res[i] + "<br>");
}, 1000 * i);
}
}
})
enter image description here
here is the php code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="dropPin/dropPin.css" type="text/css" />
<script type="text/javascript" src="dropPin/dropPin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#map').dropPin('dropMulti',{
fixedHeight:413,
fixedWidth:700,
cursor: 'crosshair',
pinclass: 'qtipinfo'
});
});
</script>
here is the js code:
(function( $ ){
$.fn.dropPin = function(method) {
var defaults = {
fixedHeight: 500,
fixedWidth: 500,
dropPinPath: '/js/dropPin/',
pin: 'dropPin/defaultpin#2x.png',
backgroundImage: 'dropPin/access-map.png',
backgroundColor: '#9999CC',
xoffset : 10,
yoffset : 30, //need to change this to work out icon heigh/width then subtract margin from it
cursor: 'crosshair',
pinclass: '',
userevent: 'click',
hiddenXid: '#xcoord', //used for saving to db via hidden form field
hiddenYid: '#ycoord', //used for saving to db via hidden form field
pinX: false, //set to value if you pass pin co-ords to overirde click binding to position
pinY: false, //set to value if you pass pin co-ords to overirde click binding to position
pinDataSet: '' //array of pin coordinates for front end render
}
var methods = {
init: function(options) {
var options = $.extend(defaults, options);
var thisObj = this;
this.css({'cursor' : options.cursor, 'background-color' : options.backgroundColor , 'background-image' : "url('"+options.backgroundImage+"')",'height' : options.fixedHeight , 'width' : options.fixedWidth});
var i = 10;
thisObj.on(options.userevent, function (ev) {
$('.'+options.pinclass).remove();
i = i + 10;
var $img = $(thisObj);
var offset = $img.offset();
var x = ev.pageX - offset.left;
var y = ev.pageY - offset.top;
var xval = (x - options.xoffset);
var yval = (y - options.yoffset);
var imgC = $('<img class="pin '+options.pinclass+'">');
imgC.css('top', yval+'px');
imgC.css('left', xval+'px');
imgC.css('z-index', i);
imgC.attr('src', options.pin);
imgC.appendTo(thisObj);
$(options.hiddenXid).val(xval);
$(options.hiddenYid).val(yval);
// add hidden fields - can use these to save to database
var hiddenCtl= $('<input type="hidden" name="hiddenpin" class="pin '+options.pinclass+'">');
hiddenCtl.css('top', y);
hiddenCtl.css('left', x);
hiddenCtl.val(x + "#" + y);
hiddenCtl.appendTo(thisObj);
});
},
dropMulti: function(options) {
var options = $.extend(defaults, options);
var thisObj = this;
thisObj.css({'cursor' : options.cursor, 'background-color' : options.backgroundColor , 'background-image' : "url('"+options.backgroundImage+"')",'height' : options.fixedHeight , 'width' : options.fixedWidth});
var i = 10;
thisObj.on(options.userevent, function (ev) {
i = i + 10;
var $img = $(thisObj);
var offset = $img.offset();
var x = ev.pageX - offset.left;
var y = ev.pageY - offset.top;
var xval = (x - options.xoffset);
var yval = (y - options.yoffset);
var imgC = $('<img class="pin">');
imgC.css('top', yval+'px');
imgC.css('left', xval+'px');
imgC.css('z-index', i);
imgC.attr('src', options.pin);
imgC.appendTo(thisObj);
// console.log(ev.target);
$(options.hiddenXid).val(xval);
$(options.hiddenYid).val(yval);
// add hidden fields - can use these to save to database
var hiddenCtl= $('<input type="hidden" name="hiddenpin" class="pin">');
hiddenCtl.css('top', y);
hiddenCtl.css('left', x);
hiddenCtl.val(x + "#" + y);
hiddenCtl.appendTo(thisObj);
});
},
showPin: function(options) {
var options = $.extend(defaults, options);
this.css({'cursor' : options.cursor, 'background-color' : options.backgroundColor , 'background-image' : "url('"+options.backgroundImage+"')",'height' : options.fixedHeight , 'width' : options.fixedWidth});
var xval = (options.pinX);
var yval = (options.pinY);
var imgC = $('<img class="pin">');
imgC.css('top', yval+'px');
imgC.css('left', xval+'px');
imgC.attr('src', options.pin);
imgC.appendTo(this);
$(options.hiddenXid).val(xval);
$(options.hiddenYid).val(yval);
},
showPins: function(options) {
var options = $.extend(defaults, options);
this.css({'cursor' : options.cursor, 'background-color' : options.backgroundColor , 'background-image' : "url('"+options.backgroundImage+"')",'height' : options.fixedHeight , 'width' : options.fixedWidth});
for(var i=0; i < (options.pinDataSet).markers.length; i++)
{
var dataPin = options.pinDataSet.markers[i];
var imgC = $('<img rel="/map-content.php?id='+dataPin.id+'" class="pin '+options.pinclass+'" style="top:'+dataPin.ycoord+'px;left:'+dataPin.xcoord+'px;">');
imgC.attr('src', options.pin);
imgC.attr('title', dataPin.title);
imgC.appendTo(this);
}
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
alert("method does not exist");
}
}
})( jQuery );
I've downloaded this code in google. This code drops a marker to the image. But how can i save the marker that i've drop to the mysql database with the codes given above? what codes to be added or to be modified? so that the markers will be save to the database. and what are the table entities to be used to insert the marker data to the database?
I am new to XMLHttpRequest and I have been using it as a AJAX file uploader using JavaScript's FormData().
The problem I am having is that it seems to upload fine, although I think it is not sending it to the right PHP file or my PHP is wrong because nothing is displayed in the folder where pictures should be.
At the moment, I don't know how to view the returned html data
JavaScript:
$("#form").submit(function(event) {
event.preventDefault();
event.stopPropagation();
var form = $(this);
var file = document.getElementById("file");
var data = new FormData();
var onerror = function(event) {
alert("An error occoured!");
}
var onprogressupdate = function(event) {
if(event.lengthComputable) {
var percent = event.loaded / event.total * 100;
$("#progress").html(percent+"%");
}
}
var onreadystatechange = function(event) {
if(request.status == 200 && request.readyState == 4) {
alert("Uploaded!");
$("#progress").hide();
$("#progress").html("");
}
else {
alert("Alternative state and/or status");
console.log("state: " + request.state);
console.log("readyState: " + request.readyState);
}
}
for(var i = 0; i < file.files.length; i++)
data.append('file[]', file.files[i]);
$("#progress").show();
$("#progress").html("Uploading files...");
var request = new XMLHttpRequest();
request.upload.addEventListener("error", onerror);
request.upload.addEventListener("progress", onprogressupdate);
request.upload.addEventListener("readystatechange", onreadystatechange);
request.open("post", "upload.php");
request.setRequestHeader("Content-type", "multipart/form-data");
request.send(data);
});
Upload page
<?php
if(isset($_FILES["file"])) {
$f = $_FILES["file"];
$dir = "data";
if(!file_exists($dir))
mkdir($dir);
foreach($f["name"] as $k => $name) {
$file = $dir."/".$name;
if($f["error"][$k] == 0 && move_uploaded_file($f["tmp_name"][$k], $file)) {
$uploaded[] = $file;
}
}
die(json_encode($uploaded));
}
?>
Don't set the content type, its set automatically.
Create your FormData object with form element you want to send:
var data = new FormData(this);
instead of
var data = new FormData();
The syntax of the FormData is
new FormData (optional HTMLFormElement form)
without the argument, it is empty, see the reference.
I have a code that sends multiple files to the server using FileReader to display images and FormData to send via ajax.
My code works, the problem is to show the multiple progress bars. If I select only one file, it works.
But if I select multiple files it shows the progress of all files in the last progress bar.
Can anyone help?
(function () {
var input = document.getElementById("images")
function showUploadedItem (file, id) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var template = '<li>'+
'<img src="'+e.target.result+'">'+
'<br />'+
'<progress min="0" max="100" value="0" id="'+id+'"></progress>'+
'</li>';
$("#image-list").append(template);
};
})(file);
reader.readAsDataURL(file);
}
input.addEventListener("change", function (evt) {
for (var i=0, j=this.files.length; i<j; i++) {
file = this.files[i];
formdata = new FormData();
formdata.append("images[]", file);
var xhr = new XMLHttpRequest();
xhr.id = "progress_" + Math.floor((Math.random() * 100000));
xhr.addEventListener("loadstart", function(e){
showUploadedItem(file, xhr.id);
});/*
xhr.addEventListener('progress', function(e) {
}, false);*/
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$("#" + xhr.id).attr('value', Math.floor((e.loaded / e.total) * 100) )
};
/*xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};*/
xhr.open('post', 'upload.php', true);
xhr.send(formdata);
}
}, false);}());
My Php Code:
foreach ($_FILES["images"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
}} echo "<h2>Successfully</h2>";
My html;
<div id="main">
<div style="padding-bottom:10px">
<input type="file" name="images" id="images" multiple />
</div>
<ul id="image-list"></ul>
<br style="clear:both">
</div>
You have a closure issue, use this instead of xhr to refer to the current XMLHttpRequest object in the event callbacks;
function(e){
showUploadedItem(file, this.id);
});
function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
$("#" + this.id).attr('value', Math.floor((e.loaded / e.total) * 100) )
}
I am trying to save graphs on server side. i was succeeded up to save one graph. but i am unable to save more than one graph.
here i mentioned 2 graphs but nly one graph is going to save on server.
how it can be ?
my code is
<script type="text/javascript">
var totalCharts = 2;
function exportCharts(exportType)
{
for( var i = 0; i < totalCharts; i++ ) {
var num = i+1;
var id = "chart"+num+"Id";
exportchart(exportType,id);
}
}
function exportchart(exportType,id)
{
var chart = FusionCharts(id);
// Now, we proceed with exporting only if chart has finished rendering.
if (chart.hasRendered() != true)
{
alert("Please wait for the chart to finish rendering, before you can invoke exporting");
return;
}
// call exporting function
chart.exportChart( {exportFormat: exportType} );
}
</script>
<p align="center">
<input type="button" class="button" value="Export as PNG" onclick="exportCharts('PNG')" id="exportButtonPNG" />
</p>
<div >
<div id="average" style="text-align:center">Loading Chart... </div>
<div id="overall" style="text-align:center">Loading Chart... </div>
</div>
<script type="text/javascript" >
// Render the chart (See documentation for explanation of the codes below)
//echo renderChart("FusionCharts/MSColumn3D.swf", "", $strXML3, "average", 1100, 350);
var chart2 = new FusionCharts("FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1");
chart2.setXMLUrl("average.xml");
chart2.render("average");
var chart1 = new FusionCharts("FusionCharts/MSColumn3D.swf", "chart2Id", "600", "400", "0", "1");
chart1.setXMLUrl("overall.xml");
chart1.render("overall");
</script>
<!-- Google Analytics Tracker Code Starts -->
<script type="text/javascript">
// analytics
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost
+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
if (typeof(_gat) == "object") {
var pageTracker = _gat._getTracker("UA-215295-3"); pageTracker._initData(); pageTracker._trackPageview();
}
</script>
How i can solve this?
You may need to chain the call to exportChart function of each chart you have.
var totalCharts = 2;
(function () {
var totalExported = 0,
exportType;
window.FC_Exported = function() {
exportchart();
};
window.exportchart = function(exportFormat) {
exportType = exportType || exportFormat || 'jpg';
totalExported++ ;
var chart = FusionCharts("chart" + totalExported + "Id");
if (totalExported > totalCharts) {
return;
}
if (chart.hasRendered() != true) {
alert("Please wait for the chart to finish rendering, before you can invoke exporting");
}
// call exporting function
chart.exportChart( {exportFormat: exportType} );
};
}());