View Full Version : Form and file uploading

06-14-2007, 07:58 PM
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?)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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];

function removeInput(){

if (nInput.length > 4)

function buildList(){

var nContainer = document.getElementById('nameList');
while (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]));
else {
newItem.appendChild(document.createTextNode(i+1+'- '));
var newThumb = document.createElement('img')
newThumb.src = listCollection[i];
newThumb.width = '80';
newThumb.height = '60';
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');


<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}
<h3 align='center'> Upload Your Images </h3>
<div id='listBox' class='nList'>
<p align='center'> Review Your Choices </p>
<ul id='nameList'></ul>
<form method="post" action="" onsubmit="return validate(this)">
<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()">
<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>

Thank you

rnd me
06-15-2007, 07:05 AM
the example look pretty complicated.
i whipped this up just now, so no promises, but i hope it helps.

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++;
}//end append form

rEach(appendForm, picRay);