JavaScript - Disallow Characters Like %$& In A File Name In An Upload Form

hi

i m creating a webpage using javascript and php

where i need to upload a doc file or zip and read all the words in doc file

if it is zip i need to read all the words in all the doc files.

i m trying to upload using file input but it does not show path of file only file name

how i m suppose to upload and read it.

I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much!

Also, heres something I'd like to achieve:


The box I'd like to create is at the top, while the default one is at the bottom.

Hello every one never really used a board for something like this but my java is a little limited so i need some help here if possible!

I have a page with 5 file inputs and 5 img tags i have everything working but preview of course changes all the img tags so no madder what browse button i choose all fixed img tags are updated with that preview.

here is a code i found and messed with a little cant seem to figure out how to add a loop or something to update just the called tag if any one could help

Java Script:

<script type="text/javascript">
<!-- Begin
/***** CUSTOMIZE THESE VARIABLES *****/
// width to resize large images to
var maxWidth=115;
// height to resize large images to
var maxHeight=115;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="/images/evolve/badpic.jpg";
/***** DO NOT EDIT BELOW *****/
function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,sou rce.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++){
if (fileTypes[i]==ext){
break;
}
}
globalPic=new Image();
if (i<fileTypes.length){

//FireFox
try{
globalPic.src=what.files[0].getAsDataURL();
}catch(err){
globalPic.src=source;
}
}else {
globalPic.src=defaultPic;
alert(fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}

var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
}
// End -->

previewField is the key i think and also of course the imageout jsut dont know how to go about making the loop if this was perl no problem but like stated above i know little about java coding but minor changes.

below here is the some of the form code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
<td scope="col">
<img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br />
<label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label>
</td>
</tr>
</table>

also ther is one include:

<script type="text/javascript" src="/java/si.files.js"></script>

i went through this code file and the change does not appear to be where the change should ocur im sure its in the actually script need to loop through the images[] field i would think like i would in php

The only thing i could think to do is paste the script code 5 more times and change each variable to 1 2 3 4 5 but then ill have a big php code page there would be a way to make this work i would think

Thanks all and im here for PHP or Perl questions so any help would be great!
If there is a better approach any input would be great!

Hi,

I am trying to only allow a person to enter alpha characters in this field and if they try to enter a number a pop up box will tell them they can only enter alpha characters. Can this be done? Here is my code:

How would you like us to address you? (&quot;Dear Pat&quot Dear&nbsp;
<input name="SALUT" type="text" id="address2" style="color: #000000; border-left: 0px solid #008000; border-right: 0px solid #254D78; border-top: 0px solid #008000; border-bottom: 2px solid #0033CC; background-color: #EBE1BE" tabindex="5" size="15" maxlength="50" onFocus="if(this.value=='SALUT')this.value='';">

Any help would be greatly appreciated.

Thanks

Hi there, I would like to know how I can show the line "Attach another File" right away, instead of what is depicted in my own code of showing it after a file has been attached.

Also, I would like to align "Attach another File" to the right, so that the word "file" will be below the Browse button.


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>
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
var upload_number;
function addFileInput() 
{
 	var d = document.createElement("div");
 	var file = document.createElement("input");
 	file.setAttribute("type", "file");
 	file.setAttribute("name", "attachment"+upload_number);
 	d.appendChild(file);
 	document.getElementById("moreUploads").appendChild(d);
 	upload_number++;
}
    
    </script>
</head>
<body>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</body>
</html>

Hi there, I have a File Upload tool and would like to prevent the users from clicking on the textbox to upload files. Also, I want to disallow the manual entering of file pathname. How should I edit it? I would need to use Javascript.

<input type="file" name="attachment" id="attachment" style="width:300px" />

I'm attempting to pull the hidden iframe file upload trick using javascript. I've go my form file upload and iframe fine, but I can't figure out what to do when it gets server side. There seems to be relatively no documentation on how to handle uploaded files in server-side javascript. Ideas? I'm at a loss.

Hi everybody,

I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT?

Please advise.



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>
    <title></title>
        <script language="javascript" type="text/javascript">
        var fileCount = 1;
        function addOneFile()
        {
            ++fileCount;
            var div = document.getElementById("showFile"+fileCount);
            if ( div != null ) div.style.display = "block";
        }
        </script>
       <style type ="text/css">
       .style37
        {
	        color: Black;
	        margin-left: 99px;
        }
       </style>
    </head>
<body>
                    <table cellpadding="5">
                        <tr>
                            <td style="vertical-align: top">
                                Attachment:
                            </td>
                            <td>
                                <input type="file" name="attachment" id="attachment" style="width:230px" />
                                <div id="showFile2" style="display: none;">
                                    <input name="file2" type="file" />
                                </div>
                                <div id="showFile3" style="display: none;">
                                    <input name="file3" type="file" />
                                </div>
                                <div id="showFile4" style="display: none;">
                                    <input name="file4" type="file" />
                                </div>
                                <div id="showFile5" style="display: none;">
                                    <input name="file5" type="file" />
                                </div>
                                <br />
                                <a href="javascript:addOneFile();" class="style37">Attach another File</a>
                                <br />
                                                              
                                (Restricted to 5 uploads)
                            </td>
                        </tr>
                    </table>
</body>
</html>

hi,
i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button.

is there a way to disable this textbox thru javascript?

thnx

I am trying for a javascript code that would ask for the excel file location when run, fetch data from two columns till eof in an excel file (MS Excel 2010), append it to an existing text file and upload the plain text file to an ftp location.

The ftp username, password and location needs to be hard coded in the script.

Is this possible?

Hi All,

I have created my second Form to File Web Form thanks to some help from other members. Looks great.

I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same).

For some reason, I can't get my Java Script validation to take effect.

I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn.

Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point:

Added Fields: Department, SteetAddress, CityState
Deleted: State/Research Accounts, Vendor Checkbox
Modified: "Type" which is a radio button that I have changed the choices of.

I beleive that's it...I will post my Java Script here and attach my Index File.

Thank you in advance!!

Code:

/********************************************************************************
 *
 * FORM VALIDATION 
 *
 ********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
    if ( grp.length == null ) return grp.checked ? grp.value : null;
    for ( var g = 0; g < grp.length; ++g )
    {
        if ( grp[g].checked ) return grp[g].value;
    }
    return null;
}
// trim a string
function trim(fld)
{
    var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
    fld.value = val;
    return val;
}
 
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
    var email = trim( fld );
    fld.value = email;
    return echk.test(email);
}
 
var digonly = /[^\d]/g
function formatPhone( fld )
{
    var ph = fld.value.replace( digonly, "" );
    if ( ph.length != 10 ) return;
    fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
 
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
    return phchk.test(fld.value);
}
 
function validateForm( frm )
{
	var oops = "";
    
    if ( trim( frm.elements["Username."] ).length  < 5 )
        oops += "You must enter your first and last name\n";
    if ( ! emailCheck( frm.elements["Email."] ) )
        oops += "That does not appear to be a valid email address\n";
	if ( trim( frm.elements["Department."] ).length  < 3)
        oops += "You must enter your department name\n";
    if ( ! phoneCheck( frm.elements["Phone."] ) )
        oops += "That is not a valid 10-digit phone number\n";
    if ( trim( frm.elements["ShipToBuildingRoom."] ).length  < 5 )
        oops += "You must enter your building and room information\n";
	if ( trim( frm.elements["StreetAddress."] ).length  < 5 )
        oops += "You must enter your street address information\n";
	if ( trim( frm.elements["CityZip."] ).length  < 5 )
        oops += "You must enter your city and zip code information\n";
		apptype = getRBValue( frm.elements["Type."] );
    if ( apptype == null )
        oops += "You must check one class\n";
   
    var app = getRBValue( frm.RequireApprovalYesNo );
    if ( app == null )
        oops += "You must specify whether or not approval is required.\n";
    if ( app == "Yes" )
    {
        if ( trim( frm.Approver ).length < 5 )
            oops += "You must enter the name of the approver\n";
        if ( ! emailCheck( frm.ApprovalEmail ) )
            oops += "The approval email is not a valid email address\n";
    }
   
 }
 
function showapp(yesno)
{
    document.getElementById("APP1").style.display = 
    document.getElementById("APP2").style.display = 
    document.getElementById("APP3").style.display = 
		yesno ? "" : "none";
}
 
</SCRIPT>

What I mean by this is how do you load an xml document that has been inputted as a string in a form. I would've assumed it was something like this, but this doesn't seem to be working.

Code:

<html>
<head>
<script type="text/javascript">
function loadXML(file) {
  var moz = (typeof document.implementation.createDocument != 'undefined');
  var ie =  (typeof window.ActiveXObject != 'undefined');
  var xmlDoc;

  if (moz)
    xmlDoc = document.implementation.createDocument("", "", null);
  else if (ie)
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async = false;
  xmlDoc.load(file);
  return xmlDoc;
}
</script>

</head>


<body>

<input type="text" name="input1" size="15"/>
<input type="button" value="LOADXML" loadXML(input1.value)"/>

</body>

</html>

Where 'input1' would be an xml file in the same folder.

Hi; I have three files login.php, process.php and catcher.php. The first one contain the form, the second file is the form action and the last is a second file which must receive the form request as well but not getting redirected to it.

login.php content :
PHP Code:
<form action="process.php" method="post">
<input type="text" name="userid">
<input type="password" name="userpwd">
<input type="submit" value="Submit">
</form> 


So I want the user who click on the Submit button get redirected to process.php as usual and at the seem time send a copy of the request into catcher.php. I am thinking for a hidden iframe but don't know how to de it.
Regards

I'm trying to figure out the proper way to correctly get each full-formation of encoded html (of Unicode), so that I could assign each HTML encoding with its each Unicode characters


HTML Encoded Unicode:

&amp;#2344;&amp;#2351;&amp;#2366; &amp;#2344;&amp;#2375;&amp;#2346;&amp;#2366;&amp;#2354;


I want to retrieve each encoded HTML and assign them into array like this

Code:

    var my_array = new Array();
    my_array [0] = "2344";
    my_array [1] = "2351";
    my_array [2] = "2366";
    my_array [3] = "2344";
    my_array [4] = "2375";
    my_array [5] = "2346";
    my_array [6] = "2366";
    my_array [7] = "2354";

Thanks in Advance for helps