Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Form and file uploading

    I'm looking to automate parts of this procedure, so I'll run through the steps first.

    1. I have a form that uploads an html file.
    2. After the file is uploaded I open the html file and then search through it for all images (build an array of image file names).
    3. Then I display a list of image names with a file input field / browse button next to it to allow upload of images. (this is currently done to ensure an image is not forgotten).
    4. Repeat step 2&3 for css files.
    4. Upload images & css files upon submit.

    This is all currently done in php, what I'm looking to do is eliminate steps 3 & 4 I've seen a few JS scripts that allow for multiple file selection and upload. Looks like they are building an array of files to upload (IE script below found here) I see that it lists all files to be uploaded with full local path prior to submit.

    Is it possible with JS to take first file that is uploaded (IE c:\path\index.html) and use a similar function to build a new file upload list/array since I know the file names and part of the path from file list (array) I am currently building in PHP.
    --- IE I know that \images\pic1.gif, \images\pic2.gif, \css\style1.css needs to be uploaded and would be located in c:\path\images and c:\path\css since the first file was in c:\path\.

    Note: The folks that will be posting these files to the server have no type of FTP access, etc to the server. Also not worried about the file preview in script below (looks like it's not working).

    (Script I found here looking to see if this or something similar could be modified for my use?)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Upload Images </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    	
    	var maxImages = 5;
    
    /* **** Do not edit below this line ****  */
    
    /*   Copyright 2006, Michael J. Hill.  Used with permission. www.javascript-demos.com */
    /*   Free use of the code, so long as both copyright notices are kept intact */
    
    	var root = "";
    	var nInput = "";
    	var IE = true;
    	if (navigator.appName != "Microsoft Internet Explorer"){IE = false}		
    
    	function insertInput(){
    
    		if (nInput.length > Number(maxImages)+Number(2))
    			{
    			 alert('Maximum '+maxImages + ' images');
    			 return false;
    			}
    		var nextUpload = document.createElement('input');
    		nextUpload.type = "file";
    		nextUpload.name = "upLoads[]";
    		nextUpload.size = "25";
    		nextUpload.className = 'fInput';
    		nextUpload.onchange = function(){buildList()}
    		var lastUpload = root.getElementsByTagName('input');
    		lastUpload = lastUpload[lastUpload.length-3];
    		root.insertBefore(nextUpload,lastUpload);
    	}
    
    	function removeInput(){
    		
    		if (nInput.length > 4)
    			{
    			 root.removeChild(nInput[nInput.length-4]);
    			}
    		buildList();
    	}
    
    	function buildList(){
    
    		var nContainer = document.getElementById('nameList');
    		while (nContainer.lastChild)
    			{
    			 nContainer.removeChild(nContainer.lastChild);
    			}
    		var listCollection = [];
    		for (i=0; i<nInput.length; i++)
    			{
    			 if (nInput[i].type == "file")
    				{
    				 var fullName = nInput[i].value;
    				 var fileName = fullName.match(/[^\/\\]+$/);
    				 var splitName = fullName.split(".");
    				 var fileType = splitName[1];
    				 if (!fileType){return}
    				 fileType = fileType.toLowerCase();
    				 if (fileType == 'jpg' || fileType == 'jpeg' || fileType == 'gif' || fileType == 'png')
    					{
    					 if (!IE){listCollection[i] = fileName}
    					 else	{listCollection[i] = fullName}
    					}
    				}
    			}
    		for (i=0; i<listCollection.length; i++)
    			{
    			 var newItem = document.createElement('li');
    			 if (!IE)
    				{
    			 	 newItem.appendChild(document.createTextNode(i+1+'- '+listCollection[i]));
    			 	 nContainer.appendChild(newItem);
    				}
    			 else 	{
    				 newItem.appendChild(document.createTextNode(i+1+'- '));
    				 var newThumb = document.createElement('img')
    				 newItem.appendChild(newThumb);
    				 newThumb.src = listCollection[i];
    				 newThumb.width = '80';
    				 newThumb.height = '60';
    				 nContainer.appendChild(newItem);
    				}
    			}
    		var nBox = document.getElementById('listBox');
    		if (nBox.scrollHeight > 0)
    			{
    			 nBox.scrollTop = nBox.scrollHeight;
    			}
    	}
    
    	function validate(nForm){
    
    		for (i=0; i<nForm.length; i++)
    			{
    			 if (nForm[i].value == "")
    				{
    				 return false;
    				}
    			}
    		return true; 
    	}
    
    	function init(){
    
    		root = document.getElementsByTagName('fieldset')[0];
    		nInput = root.getElementsByTagName('input');
    	}
    
    	onload=init;
    
    </script>
    <style type="text/css">
    
    	 body {margin-top:60px;background-color:#eae3c6}
    	 form {width:283px;margin:auto}
    	 fieldset {padding:5px;background-color:#f0fff0;border:1px solid #87ceeb}
    	 legend {font-family:times;font-size:12pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px;}
    	 label {font-size:12pt;color:#00008B;padding:5px}
    	 ul {margin-top:-15px}
    	.nList {display:block;margin:auto;border:1px solid #87ceeb;font-family:tahoma;font-size:10pt;color:#00008b;width:276px;height:100px;overflow-y:auto;overflow-x:hidden;background-color:#ffffe0;padding:3px}	
    	.fInput {font-family:times;font-size:10pt;margin-bottom:3px;margin-left:8px}	
    </style>
    </head>
    	<body>
    		<h3 align='center'> Upload Your Images </h3>
    		<div id='listBox' class='nList'>
    			<p align='center'> Review Your Choices </p>
    			<ul id='nameList'></ul>
    		</div>
    		<form method="post" action="" onsubmit="return validate(this)">
    		   <fieldset>
    			<legend> Image Upload </legend>
    				<input type='file' name='upLoads[]' size='25' class='fInput' onchange="buildList()">
    				<input type='button' value="Insert" id='insertBtn' style='font-family:times;font-size:10pt;margin-left:40px;margin-top:5px' onclick="insertInput()">
    				<input type='submit' value="Submit" style='font-family:times;font-size:10pt;margin-top:5px'>
    				<input type='button' value="Remove" style='font-family:times;font-size:10pt;margin-top:5px' onclick="removeInput()">
    		   </fieldset>
    		</form>
    		<div style='text-align:center;font-size:8pt;padding:3px;margin:auto'> &copy; Copyright 2006, Michael J. Hill. Used with permission. www.javascript-demos.com</div>
    	</body>
    </html>

    Thank you
    JimM

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,448
    Thanks
    11
    Thanked 598 Times in 578 Posts
    the example look pretty complicated.
    i whipped this up just now, so no promises, but i hope it helps.
    Code:
    
    function rEach(f, List) {
        var z = 0;
        Ray = [];
        len = List.length;
        for (z; z < len; z++) {
            if (f(List[z])) {
                Ray[Ray.length] = f(List[z]);
            }
        }
        return Ray;
    }  
    
     function This(r) {
        return r;
    }  
     function tags(tid) {
        return document.getElementsByTagName(tid);
    }  
     function obVals(ob) {
        var r = [];
        var i = 0;
        for (var z in ob) {
            if (ob.hasOwnProperty(z)) {
                r[i++] = ob[z];
            }
        }
        return r;
    }  
    
    var cssRay=rEach(function(t){return (!!t.href.toString().substr(-3).toLowerCase()=="css") ? t: ""}, tags("link") );
    
    var picRay=obVals(tags("img")).concat(cssRay);
    
    function appendForm(r){
    var i=0;
    var nextUpload = document.createElement('input');
    nextUpload.type = "file";
    nextUpload.name = "upLoads" + i++;
    nextUpload.value=r;
    root.appendChild(nextUpload);
    return;
    }//end append form
    
    
    rEach(appendForm, picRay);


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •