Hi I am using http://www.fyneworks.com/jquery/multiple-file-upload/ for multiple upload file.
But I need the same feature for some dynamic file uploader also. so I crated a function addElement() for that. The problem is the dynamic element is creating correctly but multiple upload feature is not working.
<title>Add Element</title>
<script language="javascript">
this.num = 1;
function addElement(){
$top = document.getElementById('top');
newId = document.createElement('div');
id = 'my'+this.num;
newId.setAttribute('id', id );
newId.innerHTML = "<input type='file' name='DocumentFiles2' class='multi' />";
$top.appendChild(newId);
this.num++;
}
function removedThis( id ){
var d = document.getElementById('top');
d.removeChild(id);
}
</script>
</head>
<body>
<input type='file' name='DocumentFiles[]' class='multi' /><!-- This one is working -->
<input type="button" name="button" value="Add Element" onclick="addElement()" />
<div id="top" ></div>
</body>
</html>
There is any alternative way to do this or make this to work.?
Add this code after calling addElement and removedThis and check
function addElement(){
.....
.....
reinit();
}
function removedThis( id ){
.....
.....
reinit();
}
function reinit()
{
$('input[name="DocumentFiles[]"]').MultiFile({
// your code
});
}
Related
I know I have no issues with installing uploadprogress extension because when I tried this very simple tutorial: http://www.ultramegatech.com/2010/10/create-an-upload-progress-bar-with-php-and-jquery/, it worked beautifully!
I then tweaked it just a little bit to have a very simple (not jQuery-UI) progress bar, which also worked. Here's the working code:
upload_getprogress.php:
<?php
if (isset($_GET['uid'])) {
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
echo round($status['bytes_uploaded']/$status['bytes_total']*100);
}
else {
echo 100;
}
}
?>
upload_form.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Something</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#progress-bar, #upload-frame {
display: none;
}
</style>
<script>
(function ($) {
var pbar;
var started = false;
$(function () {
$('#upload-form').submit(function() {
$('#upload-form').hide();
pbar = $('#progress-bar');
pbar.show();
$('#upload-frame').load(function () {
started = true;
});
setTimeout(function () {
updateProgress($('#uid').val());
}, 1000);
});
});
function updateProgress(id) {
var time = new Date().getTime();
$.get('upload_getprogress.php', { uid: id, t: time }, function (data) {
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
started = progress < 100;
updateProgress(id);
}
started && $('#inner').css('width', progress+ "%");
});
}
}(jQuery));
</script>
<style>
#progress-bar
{
height:50px;
width:500px;
border:2px solid black;
background-color:white;
margin:20px;
}
#inner
{
height:100%;
background-color:orange;
width:0%;
}
</style>
</head>
<body>
<form id="upload-form"
method="post"
action="upload.php"
enctype="multipart/form-data"
target="upload-frame" >
<input type="hidden"
id="uid"
name="UPLOAD_IDENTIFIER"
value="<?php echo $uid; ?>" >
<input type="file" name="file">
<input type="submit" name="submit" value="Upload!">
</form>
<div id="progress-bar"><div id='inner'></div>
<iframe id="upload-frame" name="upload-frame"></iframe>
</body>
</html>
All fine and dandy, no issues! So I know for a fact there is nothing wrong with the way I've set up the uploadprogress extension.
However, having completed the demo successfully, I needed to integrate it into my javascript and jQuery intensive web-app, which includes file uploads.
Now when I try it, I get “NULL” from the uploadprogress_get_info() function. Why?
In my application page, my image upload form is created dynamically. But at the beginning of my page (and before the user hits a button that dynamically creates an image upload form), I am using this line:
<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='<?php echo md5(uniqid(mt_rand())); ?>' />
Is this the problem? Is there a specific time or place this hidden input should be present?
Before including the above line at the top of my page, I've also included a long .js file that includes a bunch of jQuery plugins, but starts with the following code:
var started = false;
function updateProgress(id) {
console.log("updating progress"); // this msg appears, so i know i'm getting this far
var time = new Date().getTime();
$.get('upload_getprogress.php', { uid: id, t: time }, function (data) {
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
started = progress < 100;
updateProgress(id);
}
//started && pbar.progressbar('value', progress);
$('#inner').css('width', progress+ "%");
});
}
// a lot more functions, then:
function imageDialog(imgtype, x, y, editsource) {
// this function dynamically generates a dialog for image uploading
// which shows up when a user hits an "image upload" button
// there's lots of code that creates a new form which is assigned to $imgform
// lots of elements and a couple of iframes are appended to $imgform
// then finally:
$imgform.submit(function() {
pbar = $('#progress-bar');
$('#inner').css('width', "0%");
pbar.show();
started = true;
setTimeout(function () {
updateProgress($('#uid').val());
}, 1000);
});
/* other irrelevant stuff */
}
However, while the upload progress bar shows up as expected, it never increases in progress.
So I edited the upload_getprogress.php to look like this:
if (isset($_GET['uid'])) {
$uid = $_GET['uid'];
//$status = uploadprogress_get_info($_GET['uid']);
echo "progress for $uid is: ".uploadprogress_get_info($uid);
}
In Firefox, I can see the response of the ajax call, and what I get as output from upload_getprogress.php is:
progress for 6e728b67bd526bceb077c02231d2ec6f is:
I tried to dump $status into a variable and output to file, and the file said:
the current uid: 02e9a3e0214ffd731265ec5b0b220b4c
the current status: NULL
So basically, the status is consistently returning NULL. Why? This was (and still is) working fine in the demo, what could be going wrong while integrating it into my web app code? There's nothing wrong with the image uploading on its own - my images are getting uploaded fine, but the progress isn't getting tracked!
The form that gets created dynamically looks like this:
<div class="dialog-container">
<form id="imgform" method="post" enctype="multipart/form-data" action="upload_1-img.php" target="upload_target">
Select image:
<br>
<input id="image" type="file" name="image">
<div id="imgwrapper"></div>
<input id="filename" type="hidden" value="" name="filename">
<input id="upath" type="hidden" value="xxxxxxxxxxxxxxxxxxxxxxxxxx" name="upath">
<center>
<input id="imgupload" type="submit" onclick="showUploadedItem()" value="Upload">
<input id="clearcrop" type="button" disabled="disabled/" value="Clear selection">
<input id="imgapproved" type="button" disabled="disabled" value="Done">
<input id="imgcancel" type="button" value="Cancel">
</center>
</form>
</div>
<div id="progress-bar"><div id='inner'></div></div>
<!-- etc etc some other elements -->
</div>
and my own upload_1-img.php starts off with:
$filename = $_FILES["image"]["tmp_name"];
$file_info = new finfo(FILEINFO_MIME);
$bfr = $file_info->buffer(file_get_contents($filename)) or die ("error");
// some more stuff, getting file type and file's $name
if( /* a bunch of conditions */ )
move_uploaded_file( $_FILES["image"]["tmp_name"], $upath . "/" . $name);
Woohoo! I figured it out, thanks to this bug:
https://bugs.php.net/bug.php?id=57505
Basically, just I removed this static line from the page where users get to upload files:
<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='<?php echo md5(uniqid(mt_rand())); ?>' />
and in my javascript function that creates the image dialog dynamically, I just added the hidden input dynamically, right above the line where I generated the file input.
So the relevant part of the dynamically created form then looks like:
<input type='hidden' name='UPLOAD_IDENTIFIER' id='uid' value='1325a38f3355c0b1b4' />
<input id="image" type="file" name="image">
Now since this is getting dynamically created via javascript anyway, I can just replace that value above with a random js function.
Now the progress bar is advancing as it ought to! :D
I'm using html5 js to upload multiple images. Why when we upload multiple images does the result (PHP: print_r($_FILES['upimg']['name'])) only shows details of the last selected image?
For Example:(i selected following image name)
111111.gif
222222.gif
333333.gif
PHP code only last selected image show: 333333.gif
But I want to show details from all the images.
What do I do?
DEMO: http://codepad.viper-7.com/16abeG
FULL CODE:
<!doctype html>
<html>
<head>
<?php
if($_FILES){
echo '<pre>';
print_r($_FILES['upimg']['name']);
//for($i=0; $i<count($_FILES['name']); $i++){
//if ($_FILES['error'][$i] == 0) {
////do your stuff here, each image is at $_FILES['tmp_name'][$i]
//}
//}
}
?>
<title>file input click() demo</title>
<script type="text/javascript">
function doClick() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
}
function handleFiles(files) {
var d = document.getElementById("fileList");
if (!files.length) {
d.innerHTML = "<p>No files selected!</p>";
} else {
var list = document.createElement("ul");
d.appendChild(list);
for (var i=0; i < files.length; i++) {
var li = document.createElement("li");
list.appendChild(li);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[i]);;
img.height = 60;
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
li.appendChild(img);
var info = document.createElement("span");
info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
li.appendChild(info);
}
}
}
</script>
</head>
<body>
<p>This is a demo of calling <code>click()</code> on a form's file picker.
Note that the file input element is actually hidden here, so the
user doesn't have to see the path to the selected file.</p>
Select some files
<div id="fileList">
<p>No files selected!</p>
</div>
<form action="#" method="post" enctype="multipart/form-data">
<input name="upimg[]" type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<input type="submit" value="Click to see the result">
</form>
</body>
</html>
Your logic i think is wrong you use HTML 5, but not upload images via AJAX you use form for this method.
Miltiple is only HTML 5 and you can't use for PHP purpose without AJAX.
I created similar plugin you can check : https://github.com/dimitardanailov/js-control-files-uploader
Try wrapping it in a for loop somewhat like the code you have commented out....
if(isset($_FILES["upimg"]["name"])) {
for($i=0; $i<count($_FILES["upimg"]["name"]);$i++) {
echo $_FILES["upimg"]["name"][$i];
}
}
why don't you use tag before any of the .parent div?
for width ratio you of course can do it using jquery.
myElement.width = (parentElement.width/100)*40
i m creating dynamic text box on onclick event the code is running properly text box are created but the problem is when i create new text box and fill the some value on the first text values are store properly and again create the new text box that time first text box value are automatically delete or null i m trying to solve this error but not getting answer properly please help me....
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form>
</body>
</html>
Please try this,
<script type="text/javascript" language="javascript">
function changeIt() {
var divTag = document.createElement("input");
document.body.appendChild(divTag);
}
</script>
<input type="button" value="Create"
onclick="changeIt();" />
createTextbox is not explicitly available. You'll have to get it by using document.getElementById. Like this...
var createTextbox = document.getElementById("createTextbox");
createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >";
By using createTextbox.innerHTML =, you replace the current content of the div.
Use the appendChild function to solve it, here is one example:
function addInput(){
//get the div element
var d = document.getElementById('myDiv');
//create an input element
var i = document.createElement("input");
//add it to the div
d.appendChild(i);
}
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink()
{
document.getElementById('createTB').innerHTML="<input type='text' />";
}
</script>
</head>
<body>
<div id="createTB"></div>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
Im using the following (seemingly common) method to save scroll position on submit in a php page:
<script type="text/javascript">
<!-- script for scroll position on submit -->
function saveScrollPositions(theForm) {
if(theForm) {
var scrolly = typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement.scrollTop;
var scrollx = typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement.scrollLeft;
theForm.scrollx.value = scrollx;
theForm.scrolly.value = scrolly;
}
}
</script>
</head>
<body>
<form id="ReportForm<?php echo $userNumber; ?>" name="ReportForm" method="POST" action="<?php echo $editFormAction; ?>" onsubmit="return saveScrollPositions(this);">
<input type="hidden" name="scrollx" id="scrollx" value="0" />
<input type="hidden" name="scrolly" id="scrolly" value="0" />
-- various form controls here --
</form>
<?php
$scrollx = 0;
$scrolly = 0;
if(!empty($_REQUEST['scrollx'])) {
$scrollx = $_REQUEST['scrollx'];
}
if(!empty($_REQUEST['scrolly'])) {
$scrolly = $_REQUEST['scrolly'];
}
?>
<script type="text/javascript">
window.scrollTo(<?php echo "$scrollx" ?>, <?php echo "$scrolly" ?>);
</script>
</body>
In the body the form is wrapped by a repeat region to get multiple reports from a database, but each form in the loaded page at runtime needs a unique id, so in the form tag i have:
id="reportForm<?php echo $userNumber ?>"
which causes the saveScrollPositions to fail. Removing the userNumber that is tacked on to the end works. Any idea how i can fix this?
I very much appreciate any help you can offer on this and thank you in anticipation.
Kind regards,
John
I'm trying to create page where the user can add & delete "soliders".
I'm looking for something like this:
[Text-box][Delete]
[Text-box][Delete]
[Add-Solider]
And I want it to support mysql, so the user can change the values later.
I've been searching, but i can't seem to find any with mysql-support.
It should also have a max-amount.
Have any of you dealt with something similar before? I would greatly appreciate any help!
I give here an example for Add and Remove elements.
<html>
<head>
<title>Add Element</title>
<script language="javascript">
this.num = 1;
function addElement(){
$top = document.getElementById('top');
newId = document.createElement('div');
id = 'my'+this.num;
newId.setAttribute('id', id );
newId.innerHTML = "<a href='javascript:void(0); ' onclick='removedThis( "+id +")' >Added Element"+id+"</a>";
$top.appendChild(newId);
this.num++;
}
function removedThis( id ){
var d = document.getElementById('top');
d.removeChild(id);
}
</script>
</head>
<body>
<input type="button" name="button" value="Add Element" onclick="addElement()" />
<div id="top" ></div>
</body>
</html>
Reference: javascript/php/mysal
I give here an example of jQuery. Then you can save <div id="boxes"> into mysql and induce again.
jQuery
<script type="text/javascript">
$(function () {
$("#add_new").click(function () {
var box = $("<div>[Text-box]<a class=\"del\" href=\"javascript:void;\">[Delete]</a></div>");
$("#boxes").append(box);
$(box).find(".del").click(function () {
$(box).remove();
});
});
});
</script>
HTML:
<div id="boxes"></div>
<button id="add_new">[Add-Solider]</button>