Connect Input type file name to random Generated Number of Input textbox (eg: 23_img)

**iaa** · 05-13-2015, 04:02 AM

Dear Sir,

Not the best of Jscript me, so please be kind enough to help me:

Each time the page refresh I get a Random Number to the Input text box and that works. Also there is a code that passes the Image select to the Input text box - I am doing this so I could send the complete path of the input text box to MySQL DB, When user selects the Image name,

My Requirement is: "" I want to connect the Random Number with the Image name""". Now When select the image the random number disappears and Only the image name is there.

Please I want to display as: 63325_standard_icon.jpg (random number _ Image)

Please help.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP MySQL Insert Data MySqli way 5.5 New PHP OOP)</title>

    <link type="text/css" rel="stylesheet" href="css/main.css" media="all" />    
	<script type='text/javascript' src='js/jquery-1.8.3.js'></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>


	<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $(function(){
        var fileInput = $('.upload-file');
        var maxSize = fileInput.data('max-size');
        $('.upload-form').submit(function(e){
            if(fileInput.get(0).files.length){
                var fileSize = fileInput.get(0).files[0].size; // in bytes
                if(fileSize>maxSize){
                    alert('file size is more then' + maxSize + ' bytes');
                    return false;
                }else{
    //                alert('file size is correct- '+fileSize+' bytes');
                }
            }else{
                alert('choose file, please');
                return false;
            }
            
        });
    });
    });//]]>  
    
    
    
    var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
    function ValidateSingleInput(oInput) {
        if (oInput.type == "file") {
            var sFileName = oInput.value;
             if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                 
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    oInput.value = "";
                    return false;
                }
            }
        }
        return true;
    }
	</script>


<!-- generate Random Number -->
<script type='text/javascript'>
	window.onload=function(){
	function randomNumber (m,n)
	{
	  m = parseInt(m);
	  n = parseInt(n);
	  var YourRandomNumber = Math.floor( Math.random() * (n - m + 1) ) + m;
	  document.getElementById('bigimage').value = YourRandomNumber;
	
	}
	
	randomNumber (00000,99999);
	}
</script>
<!-- generate Random Number -->
   
    
</head>

<body>

<form class="upload-form" action="save.php" name="frmAdd" method="post" enctype="multipart/form-data">

        <table>


                
                <tr>
                    <td>Image upload</td>
                    <td>
                    	<p class="msg"></p>
						<p><label for="select_file">Select jpg / jpeg / gif / png file</label></p>
						<!--30kb = 30000 bytes so less than 30KB the jascript validation is-->
						<input type="file" name="file" id="file" class="upload-file" data-max-size="30000" onchange="ValidateSingleInput(this);" >
                    </td>
                <tr>                                      
	
    
                <tr>
                    <td>Big image  <!-- gets the value from Input file type to send the image path to MySQL DB --></td>
                    <td><input type='text' name='bigimage' id='bigimage' value="" readonly /></td>
                </tr>    
                        
                               
                <td></td>
                <td>
               		<input type="submit" name="submit" value="submit">
                </td>
                </tr>
        </table>
  
</form>


<div class="add_db_wrapper">

<a href="index.php">Grid Data</a>

</div>



	<!-- gets the value from Input file type to send the image path to MySQL DB -->
	<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $("#file").change(function(e){
       
        var fname=$("#file").val().split('\\').pop().split('/').pop();
        $('#bigimage').val(fname);
    });
    });//]]>  
    
    </script>
	<!-- gets the value from Input file type to send the image path to MySQL DB --></td>    


</body>

</html>

Appreciate your Help.

**jscheuer1** · 05-13-2015, 05:18 AM

If I understand correctly, change the highlighted line as shown:

Code:

	<!-- gets the value from Input file type to send the image path to MySQL DB -->
	<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $("#file").change(function(e){
       
        var fname=$("#file").val().split('\\').pop().split('/').pop();
        $('#bigimage').get(0).value += '_' + fname;
    });
    });//]]>  
    
    </script>
	<!-- gets the value from Input file type to send the image path to MySQL DB -->

But - this will only work for the first time this is done. For example, if the file is too big and a different file is chosen, that name will be appended to the number plus underscore plus previous name. The fact that these functions are spread about and not integrated may make it hard to prevent that. I'll have a look though.

Just did, unless the random number is either stored separately, or a different one is generated in case of a problem with the original choice of file (invalid name, too big, etc.) The scripts will need to be integrated more.

Also, I question the use of the random number. Although it's unlikely that the same random number will be generated AND a user will pick a filename that matches that of another that had that same random number prepended to it, it could happen. You might be better off generating a timestamp.

This should take care of all that except the possibility of duplication due to random as opposed to timestamp number being used:

Code:

	<!-- gets the value from Input file type to send the image path to MySQL DB -->
	<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $("#file").change(function(e){
       
        var fname=$("#file").val().split('\\').pop().split('/').pop();
        var rnum = $.trim($('#bigimage').val());
        rnum = rnum.indexOf('_') > -1? rnum.substring(0, rnum.indexOf('_')) : rnum;
        $('#bigimage').val(rnum + '_' + fname);
    });
    });//]]>  
    
    </script>
	<!-- gets the value from Input file type to send the image path to MySQL DB -->

**iaa** · 05-13-2015, 08:30 AM

Dear Sir (jscheuer),

This is my Second post and you saved me - want to thank you so much for being a Savior and we know your a Savior and A Genius!

Thanks Sir.

Thanks Sir God Bless.
IAA

**iaa** · 05-13-2015, 02:50 PM

Dear Sir

I tried my code and I think there's a small Problem I noticed my not thinking far. I am adding a Random number to the input text box and connecting the users selected Image name to it with your code.

1. This then makes the user selected image as: name01.jpg
2. that value printed in input text box with generated number as: 33434_name01.jpg

SO Sir when calling the php file to folder and the path is different.

Sir so I thought to add a Image upload when click the input text box...

Code:


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  

  <style type='text/css'>
    input[type=file] {
    display:block;
    height:0;
    width:0;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';
    
    $('input[type=text]').val(val);
});
});//]]>  

</script>


</head>
<body>
  <input type="text" name="bigimage" id='bigimage'/>
  <input type="file" name="file" id="file" class="upload-file" >
    
</body>


</html>

Adding your code works sir with the generated number "Not" but repeats the same image name.

Code:

<script type='text/javascript'>
                    $(window).load(function(){
                    $("#file").change(function(e){
                       
                        var fname=$("#file").val().split('\\').pop().split('/').pop();
                        var rnum = $.trim($('#bigimage').val());
                        rnum = rnum.indexOf('_') > -1? rnum.substring(0, rnum.indexOf('_')) : rnum;
                        $('#bigimage').val(rnum + '_' + fname);
                    });
                    });
                    
                    </script>

Sir, Could you please help me to get the random number to the Input text box file upload to be as: 34343_image.jpg (random number and Image name)
pleaseeee.

My Entire code is index.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <link type="text/css" rel="stylesheet" href="css/main.css" media="all" />    
	<script type='text/javascript' src='js/jquery-1.8.3.js'></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>

  <style type='text/css'>
    input[type=file] {
    display:block;
    height:0;
    width:0;
	}
  </style>
  


	<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $(function(){
        var fileInput = $('.upload-file');
        var maxSize = fileInput.data('max-size');
        $('.upload-form').submit(function(e){
            if(fileInput.get(0).files.length){
                var fileSize = fileInput.get(0).files[0].size; // in bytes
                if(fileSize>maxSize){
                    alert('file size is more then' + maxSize + ' bytes');
                    return false;
                }else{
    //                alert('file size is correct- '+fileSize+' bytes');
                }
            }else{
                alert('choose file, please');
                return false;
            }
            
        });
    });
    });//]]>  
    
    
    
    var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
    function ValidateSingleInput(oInput) {
        if (oInput.type == "file") {
            var sFileName = oInput.value;
             if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                 
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    oInput.value = "";
                    return false;
                }
            }
        }
        return true;
    }
	</script>


	<!-- cehck box val to input txt box and send to db the input text box values taken from the checkbox-->
	<script type='text/javascript'>//<![CDATA[ 
			$(window).load(function(){
			$('.chkbx').click(function(){
				var text = "";
				$('.chkbx:checked').each(function(){
					text += $(this).val()+',';
				});
				text = text.substring(0,text.length-1);
				
				$('#textbx').val(text);
			});
			});//]]>      
    </script>
	<!-- cehck box val to input txt box and send to db the input text box values taken from the checkbox-->     
    
    
    <!-- generate Random Number -->
    <script type='text/javascript'>
        window.onload=function(){
        function randomNumber (m,n)
        {
          m = parseInt(m);
          n = parseInt(n);
          var YourRandomNumber = Math.floor( Math.random() * (n - m + 1) ) + m;
          document.getElementById('bigimage').value = YourRandomNumber;
        
        }
        
        randomNumber (00000,99999);
        }
    </script>
    <!-- generate Random Number -->    
    
    


	<!-- file upload whn click input text box-->
	<!--    I changed my logic since adding a generated no to a Input text bog and _ image name is diferent to the user selected file name that goes to the folder (file.jpng) and image path
    as in input text box (23232_img.jpg)-->
	<script type='text/javascript'>//<![CDATA[ 
    $(function(){
    $('input[id=bigimage]').click(function() {
        $('input[type=file]').trigger('click');
    });
    
    $('input[type=file]').change(function() {
        var vals = $(this).val(),
            val = vals.length ? vals.split('\\').pop() : '';
        
        $('input[id=bigimage]').val(val);
    });
    });//]]>  
    
    </script>    
	<!-- file upload whn click input text box-->    
    
    
</head>

<body>

<form class="upload-form" action="save.php" name="frmAdd" method="post" enctype="multipart/form-data">

        <table>

              
                <tr>
                    <td>Image upload</td>
                    <td>
                    	<p class="msg"></p>
						<p><label for="select_file">Select jpg / jpeg / gif / png file</label></p>
						<!--30kb = 30000 bytes so less than 30KB the jascript validation is-->
						<input type="file" name="file" id="file" class="upload-file" data-max-size="30000" onchange="ValidateSingleInput(this);" >
                    </td>
                <tr>                                      
	
    
                <tr>
                    <td>Big image  <!-- gets the value from Input file type to send the image path to MySQL DB --></td>
                    <td><input type='text' name='bigimage' id='bigimage' readonly /></td>
                </tr>    
                        
                               
                <td></td>
                <td>
               		<input type="submit" name="submit" value="submit">
                </td>
                </tr>
        </table>
  
</form>


<div class="add_db_wrapper">

<a href="index.php">Grid Data</a>

</div>




    <!-- chkbox validate -->
	<script>try {$("form").on("click", ":checkbox", function(event){
	  $(":checkbox:not(:checked)", this.form).prop("disabled", function(){
			return $(this.form).find(":checkbox:checked").length == 5;
		});
	  });
	  } catch (error) { throw error; }    
    </script>
    <!-- chkbox validate -->
    
    

    <!-- limit description text-->    
	<script>try {function maxLength(el) {	
	if (!('maxLength' in el)) {
		var max = el.attributes.maxLength.value;
		el.onkeypress = function () {
			if (this.value.length >= max) return false;
		};
	}
	
	}
	maxLength(document.getElementById("description"));
	} catch (error) { throw error; }
	</script>
    <!-- limit description text-->     



	<!-- gets the value from Input file type to send the image path to MySQL DB -->
            	   <!--New from Dynamic Drive Forums from:Sir jscheuer1 -->	
                    <!-- gets the value from Input file type to send the image path to MySQL DB -->
                    <script type='text/javascript'>
                    $(window).load(function(){
                    $("#file").change(function(e){
                       
                        var fname=$("#file").val().split('\\').pop().split('/').pop();
                        var rnum = $.trim($('#bigimage').val());
                        rnum = rnum.indexOf('_') > -1? rnum.substring(0, rnum.indexOf('_')) : rnum;
                        $('#bigimage').val(rnum + '_' + fname);
                    });
                    });
                    
                    </script>
                    <!-- gets the value from Input file type to send the image path to MySQL DB -->    
	<!-- gets the value from Input file type to send the image path to MySQL DB --></td>    



</body>

</html>

Sir, Could you please help me to get the random number to the Input text box file upload to be as: 34343_image.jpg (random number and Image name)
pleaseeee.

Thank you.

**jscheuer1** · 05-14-2015, 02:32 PM

Well, that's a little different page then now, isn't it? This code is no longer used to advantage, get rid of it or comment it out:

Code:

                    <script type='text/javascript'>
                    $(window).load(function(){
                    $("#file").change(function(e){
                       
                        var fname=$("#file").val().split('\\').pop().split('/').pop();
                        var rnum = $.trim($('#bigimage').val());
                        rnum = rnum.indexOf('_') > -1? rnum.substring(0, rnum.indexOf('_')) : rnum;
                        $('#bigimage').val(rnum + '_' + fname);
                    });
                    });
                    
                    </script>

The place where we can do what we want is now here (changes/additions highlighted):

Code:

	<!-- file upload whn click input text box-->
	<!--    I changed my logic since adding a generated no to a Input text bog and _ image name is diferent to the user selected file name that goes to the folder (file.jpng) and image path
    as in input text box (23232_img.jpg)-->
	<script type='text/javascript'>//<![CDATA[ 
    $(function(){
    $('input[id=bigimage]').click(function() {
        $('input[type=file]').trigger('click');
    });
    
    $('input[type=file]').change(function() {
        var vals = $(this).val(),
            val = vals.length ? vals.split('\\').pop() : '';
        var rnum = $('input[id=bigimage]').val().split('_')[0];
        $('input[id=bigimage]').val(rnum + '_' + val);
    });
    });//]]>  
    
    </script>    
	<!-- file upload whn click input text box-->

Note: I could have used the same method (indexOf('_')) here as well, but had been thinking about it and split('_')[0] works just as well with fewer steps.

**iaa** · 05-15-2015, 04:04 AM

Dear Sir

Thank you so much for the Reply. Yes this worked but the Random Image disappears when select the image and Image name is Duplicated.

Now the Name is Duplicated in this way the path to Mysql and the file name that goes in Submit is different.

Its a Jquery file upload using Input so this way both are same that goes to the folder and the MySQL Path.

Sir if the 34343_filename.jpg comes is fine. I mean the Random number without disapearing and the name appear.

Here is the code Sir.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link type="text/css" rel="stylesheet" href="css/main.css" media="all" /> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<!--<script type='text/javascript' src='js/jquery-1.8.3.js'></script>
<script type="text/javascript" src="js/jquery.min.js"></script>-->

  <style type='text/css'>
    input[type=file] {
    display:block;
    height:0;
    width:0;
	}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more then' + maxSize + ' bytes');
return false;
}else{
// alert('file size is correct- '+fileSize+' bytes');
}
}else{
alert('choose file, please');
return false;
}

});
});
});//]]> 



var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; 
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}

if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}
</script>


<!-- cehck box val to input txt box and send to db the input text box values taken from the checkbox-->
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);

$('#textbx').val(text);
});
});//]]> 
</script>
<!-- cehck box val to input txt box and send to db the input text box values taken from the checkbox--> 


<!-- generate Random Number -->
<script type='text/javascript'>
window.onload=function(){
function randomNumber (m,n)
{
m = parseInt(m);
n = parseInt(n);
var YourRandomNumber = Math.floor( Math.random() * (n - m + 1) ) + m;
document.getElementById('bigimage').value = YourRandomNumber;

}

randomNumber (00000,99999);
}
</script>
<!-- generate Random Number --> 




<!-- file upload whn click input text box-->
<!-- I changed my logic since adding a generated no to a Input text bog and _ image name is diferent to the user selected file name that goes to the folder (file.jpng) and image path
as in input text box (23232_img.jpg)-->
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';
    
    $('input[type=text]').val(val);
});
});//]]>  

</script>
<!-- file upload whn click input text box--> 


</head>

<body>

<form class="upload-form" action="save.php" name="frmAdd" method="post" enctype="multipart/form-data">

<table>


<tr>
<td>Image upload</td>
<td>
<p class="msg"></p>
<p><label for="select_file">Select jpg / jpeg / gif / png file</label></p>
<!--30kb = 30000 bytes so less than 30KB the jascript validation is-->
<input type="file" name="file" id="file" class="upload-file" data-max-size="30000" onchange="ValidateSingleInput(this);" >
</td>
<tr> 


<tr>
<td>Big image <!-- gets the value from Input file type to send the image path to MySQL DB --></td>
<td><input type='text' name='bigimage' id='bigimage' readonly /></td>
</tr> 


<td></td>
<td>
<input type="submit" name="submit" value="submit">
</td>
</tr>
</table>

</form>


<div class="add_db_wrapper">

<a href="index.php">Grid Data</a>

</div>




<!-- chkbox validate -->
<script>try {$("form").on("click", ":checkbox", function(event){
$(":checkbox:not(:checked)", this.form).prop("disabled", function(){
return $(this.form).find(":checkbox:checked").length == 5;
});
});
} catch (error) { throw error; } 
</script>
<!-- chkbox validate -->



<!-- limit description text--> 
<script>try {function maxLength(el) {	
if (!('maxLength' in el)) {
var max = el.attributes.maxLength.value;
el.onkeypress = function () {
if (this.value.length >= max) return false;
};
}

}
maxLength(document.getElementById("description"));
} catch (error) { throw error; }
</script>
<!-- limit description text--> 



<!-- gets the value from Input file type to send the image path to MySQL DB -->
<!--New from Dynamic Drive Forums from:Sir jscheuer1 -->	
<!-- gets the value from Input file type to send the image path to MySQL DB -->

                        <script type='text/javascript'>//<![CDATA[ 
                        $(function(){
                        $('input[id=bigimage]').click(function() {
                            $('input[type=file]').trigger('click');
                        });
                        
                        $('input[type=file]').change(function() {
                            var vals = $(this).val(),
                                val = vals.length ? vals.split('\\').pop() : '';
                            var rnum = $('input[id=bigimage]').val().split('_')[0];
                            $('input[id=bigimage]').val(rnum + '_' + val);
                        });
                        });//]]>  
                        
                        </script>     
<!-- gets the value from Input file type to send the image path to MySQL DB --> 
<!-- gets the value from Input file type to send the image path to MySQL DB --></td> 



</body>

</html>

Thank Sir please help.

**jscheuer1** · 05-15-2015, 07:14 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link type="text/css" rel="stylesheet" href="css/main.css" media="all" /> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<!--<script type='text/javascript' src='js/jquery-1.8.3.js'></script>
<script type="text/javascript" src="js/jquery.min.js"></script>-->

  <style type='text/css'>
    input[type=file] {
    display:block;
    height:0;
    width:0;
	}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more then' + maxSize + ' bytes');
return false;
}else{
// alert('file size is correct- '+fileSize+' bytes');
}
}else{
alert('choose file, please');
return false;
}

});
});
});//]]> 



var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; 
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}

if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}
</script>


<!-- cehck box val to input txt box and send to db the input text box values taken from the checkbox-->
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);

$('#textbx').val(text);
});
});//]]> 
</script>
<!-- cehck box val to input txt box and send to db the input text box values taken from the checkbox--> 


<!-- generate Random Number -->
<script type='text/javascript'>
window.onload=function(){
function randomNumber (m,n)
{
m = parseInt(m);
n = parseInt(n);
var YourRandomNumber = Math.floor( Math.random() * (n - m + 1) ) + m;
document.getElementById('bigimage').value = YourRandomNumber;

}

randomNumber (00000,99999);
}
</script>
<!-- generate Random Number --> 




<!-- file upload whn click input text box-->
<!-- I changed my logic since adding a generated no to a Input text bog and _ image name is diferent to the user selected file name that goes to the folder (file.jpng) and image path
as in input text box (23232_img.jpg)-->
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '',
        rnum = $('#bigimage').val().split('_')[0];
    $('#bigimage').val(rnum + '_' + val);
});
});//]]>  

</script>
<!-- file upload whn click input text box--> 


</head>

<body>

<form class="upload-form" action="save.php" name="frmAdd" method="post" enctype="multipart/form-data">

<table>


<tr>
<td>Image upload</td>
<td>
<p class="msg"></p>
<p><label for="select_file">Select jpg / jpeg / gif / png file</label></p>
<!--30kb = 30000 bytes so less than 30KB the jascript validation is-->
<input type="file" name="file" id="file" class="upload-file" data-max-size="30000" onchange="ValidateSingleInput(this);" >
</td>
<tr> 


<tr>
<td>Big image <!-- gets the value from Input file type to send the image path to MySQL DB --></td>
<td><input type='text' name='bigimage' id='bigimage' readonly /></td>
</tr> 


<td></td>
<td>
<input type="submit" name="submit" value="submit">
</td>
</tr>
</table>

</form>


<div class="add_db_wrapper">

<a href="index.php">Grid Data</a>

</div>




<!-- chkbox validate -->
<script>try {$("form").on("click", ":checkbox", function(event){
$(":checkbox:not(:checked)", this.form).prop("disabled", function(){
return $(this.form).find(":checkbox:checked").length == 5;
});
});
} catch (error) { throw error; } 
</script>
<!-- chkbox validate -->



<!-- limit description text--> 
<script>try {function maxLength(el) {	
if (!('maxLength' in el)) {
var max = el.attributes.maxLength.value;
el.onkeypress = function () {
if (this.value.length >= max) return false;
};
}

}
maxLength(document.getElementById("description"));
} catch (error) { throw error; }
</script>
<!-- limit description text--> 
</td> 



</body>

</html>

**iaa** · 05-15-2015, 02:21 PM

Dear Sir,

Yes this is working and I thank you so much Dear Sir. Sorry for the trouble made.

I added the jquery upload and it worked perfect

God bless Sir thanks a million.

Thank you.

Thread: Connect Input type file name to random Generated Number of Input textbox (eg: 23_img)

Thread Tools

Search Thread

Connect Input type file name to random Generated Number of Input textbox (eg: 23_img)

Similar Threads

How to read from textbox and input number into script .

issue with <input type='textbox'>

need help! about calling input type="file" by using checkbox.

Create a random number in the value= attribute on a hidden input field

<input type=file keep the value in php???

Bookmarks

Bookmarks

Posting Permissions