Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Upload Many Files on One Page 1

Status
Not open for further replies.
forumposters

forumposters

Programmer
Aug 31, 2006
61
US
I need some javascript code that will allow you to add as many files as the user wants to a form. It would also be nice if they could preview the images on the page after they have browsed and select them. I doubt this second part is actually possible, but please let me know if it is or why it is not possible.
 
Sort by date Sort by votes
It's not working in Firefox 2 on Windows Professional and it seems to not work in IE either now.
 
Upvote 0 Downvote
I have no intention to checking line-by-line, this is my edited version of your last-but-one version. (Innocent obvious mistake of double script close tag taken out---but that is not a problem.)
[tt]
<html>
<head>

<script type="text/javascript">
<!--

function addNewFileUpload(){
var uploadControl = (window.event)?event.srcElement:arguments[arguments.length-1].target;

//get the position of the upload control
var uploadPos = uploadControl.name.slice(6, uploadControl.name.length);

//create the preview image
var previewImg = document.createElement("img");
if (uploadControl.value.indexOf("file:///")==-1) {
previewImg.src="file:///"+uploadControl.value.replace(/\\/g,"/");
} else {
previewImg.src=uploadControl.value;
}
var previewDiv = document.getElementById("upload" + uploadPos + "_preview");

//Hide the file upload Control
var controlDiv = document.getElementById("upload" + uploadPos + "_edit");
controlDiv.style.display = "none";

//Create a new set of divs to upload the next image
var containerDiv = document.getElementById("upload_container");
var newContainer = document.createElement("div");
var newPos = parseInt(uploadPos) + 1;
newContainer.id = "upload" + newPos + "_container";
var innerTextSolution = document.createTextNode("Image " + newPos + ":");
newContainer.appendChild(innerTextSolution);

var newEditDiv = document.createElement("div");
newEditDiv.id = "upload" + newPos + "_edit";
var newEditControl = document.createElement("input");
newEditControl.type = "file";
newEditControl.name = "upload" + newPos;
newEditControl.id = "upload" + newPos + "_file";
if(window.addEventListener) {
newEditControl.addEventListener("change", addNewFileUpload, false);
}
else {
newEditControl.attachEvent("onchange", addNewFileUpload);
}
newEditDiv.appendChild(newEditControl);
newContainer.appendChild(newEditDiv);

var newPreviewDiv = document.createElement("div");
newPreviewDiv.id = "upload" + newPos + "_preview";
newContainer.appendChild(newPreviewDiv);

containerDiv.appendChild(newContainer);

}
// --></script>
</head>
<body>
<form name="megauploadform" action="" method="post" enctype="multipart/form-data">
<div id="upload_container">
<div id="upload1_container">Image 1:
<div id="upload1_edit"><input type="file" name="upload1" id="upload1_file" onchange="addNewFileUpload(event)" /></div>
<div id="upload1_preview"></div>
</div>
</div>
</form>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Testing the code you just posted in both IE and Firefox, this is what happens when you try to add images:

Image 1:

Image 2:

Image 3:

There's no thumbnail preview...
 
Upvote 0 Downvote
Check any security blocking... but if you said you got it work before time in ie... I don't know what to say. Here, all run fine.
 
Upvote 0 Downvote
I've done some more research and I've learned that you just can't do this with Javascript in a way that will work with most browsers. However, I imagine you could use javascript in combination with an iframe and some server side processing to do it. I'm going to look more into that and I'll post back here if I find something worth reporting about.
 
Upvote 0 Downvote
If you arrive to that conclusion, why did you then pretend it works on ie and need a ff/moz packup? That conclusion in that form is not only a misleading and much cliche and it needs be qualified. You can make any javascript function _not_ functioning, of course, sure. At the end, one does what one wants.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
338
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
233
JScannell
JScannell
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
245
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
253
JScannell
JScannell
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
142
penguinspeaks
penguinspeaks

Part and Inventory Search

Sponsor

Back
Top