[JS] multible upload via 1 file-selectbox - Softwareontwikkeling

woensdag 16 april 2003 09:22

Acties:

Topicstarter

Met welke technieken krijg ik het voor elkaar om ism php bestanden te uploaden voor mijn cms-systeem op de wijze zoals het ook gedaan wordt in onderstaande afbeelding.

http://members.lycos.co.uk/bodday/multibleupload.gif
[understatement]van de bron-code in bovenstaande formulier word ik niet gelukkig

[/understatement]

Het probleem is namelijk dat <input type="file" value="dit niet wordt toegestaan">

Met het schrijven van het script red ik mij wel, ik heb dus alleen een strategie nodig hoe dit probleem aan te pakken.

43% of all statistics are worthless

woensdag 16 april 2003 09:24

Acties:

sjroorda

Wordt het op jouw voorbeeld niet gedaan door elke file stuk voor stuk te uploaden, die in een tijdelijke dir te zetten, en dan te versturen? Of wordt alles pas geupload nadat je op 'send' klikt?

woensdag 16 april 2003 09:27

Acties:

BobDay

Topicstarter

alles wordt geupload nadat op send is geklikt.

[ Voor 8% gewijzigd door BobDay op 16-04-2003 09:27 ]

43% of all statistics are worthless

woensdag 16 april 2003 09:37

Acties:

sjroorda

Dan zou een mogelijkheid kunnen zijn dat naast de 'gewone' zichtbare file-input andere file-inputs op de pagina staan die m.b.v. CSS onzichtbaar zijn gemaakt?

woensdag 16 april 2003 09:39

Acties:

Pelle

🚴‍♂️

Ik denk dat nadat er op 'add' geklikt wordt, die layer onzichtbaar gemaakt wordt en er een nieuwe verschijnt met een lege input type="file". De value wordt vervolgens naar die text-area geschreven.

woensdag 16 april 2003 15:28

Acties:

Verwijderd

Ik denk dat het bestand bij elke klik op "Add to list" geupload wordt. De lijst (plaatje 1 en plaatje 2) geeft aan welke attachments er in de temp-directory op de server staan (zo doet hotmail het iig wel).

Maar de manier van Pelle is natuurlijk veel mooier, zou moeten kunnen werken...

woensdag 16 april 2003 15:56

Acties:

BobDay

Topicstarter

Doekman, in mijn tweede reactie had ik al vermeld dat het uploaden na het versturen pas wordt gedaan.
De manier zoals Pelle aandraagt ben ik nu aan het maken

43% of all statistics are worthless

woensdag 16 april 2003 16:18

Acties:

Verwijderd

BobDay, je heb helemaal gelijk, 'was niet erg constructief. Lezen is moeilijk.

woensdag 16 april 2003 16:19

Acties:

Verwijderd

Het staat me bij dat als je de file input visibility:hidden of display:none maakt dat het bestand niet wordt geupload. Wat je dan nog altijd kunt doen (dat werkt iig):

JavaScript:

1	<input type="file" style="filter:alpha(opacity=0);" />

woensdag 16 april 2003 16:33

Acties:

Pelle

🚴‍♂️

Is dat zo? Ik zou 'm persoonlijk in een divje gooien overigens, en die op display: none zetten, in plaats van van input zelf.

woensdag 16 april 2003 16:42

Acties:

BobDay

Topicstarter

oei, nuttige info!
Ik denk en hoop dat de Pelle manier nog steeds werkt. Ik blijf nog even scripten en kan het dan testen.

43% of all statistics are worthless

woensdag 16 april 2003 18:25

Acties:

Verwijderd

Probeer dit maar eens

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">




<html>
<head>
    <title>Untitled</title>
</head>

<body>




<style>
.myFileSelection {
 font-family:arial;
 font-size:12px;
 width:480px;
 height:160px;
 margin:0px;
 padding:0px;
}

body {
 background-color:buttonface;
 padding:2px;
 margin-left:20px;
 margin-top:0px;
 margin-bottom:0px;
 margin-right:0px;
}

.submitButton {
 height:22px;
}

.buttonOff {
 border:1px solid buttonface;
 cursor:hand;
}

.buttonOn {
  border-left:1px solid white;
  border-top:1px solid white;
  border-right:1px solid #848284;
  border-bottom:1px solid #848284;
  cursor:hand;
}

.menuBar {


}

.buttonPressed {
  border-left:1px solid #848284;
  border-top:1px solid #848284;
  border-right:1px solid white;
  border-bottom:1px solid white;
  padding-left:1px;
  padding-top:1px;
  cursor:hand;
}

.message {
 font-family:arial;
 font-size:11px;
} 

.legend {
 font-family:arial;
 font-size:12px;
}

.fieldset {
 padding-left:7px;
}
</style>

<script>

var ffCount=2;

function swapInSwapOut(theEl) 
{
 var proceed=true;
  //Check for duplicate entry
 var toSearch=document.getElementById("fileField"+theEl).value;
 
 for(i=0;i<document.myFileList.myFiles.options.length;i++) {
  if(document.myFileList.myFiles.options[i].text==toSearch) {
   alert("That file is already in the Upload List");
   proceed=false;
   break;
  }
 }
 
 if(proceed) {
 document.getElementById("uploadButton").disabled=false;
 var newOption = document.createElement("OPTION");
 document.getElementById("myFiles").options.add(newOption);
 newOption.innerText = document.getElementById("fileField"+theEl).value;
 newOption.value = theEl;
 document.myFileList.myFiles.selectedIndex=newOption.index;
 document.myFileList.myFiles.focus();
 
 insertFileBox();
 
  var selectedList="";
  for(i=0;i<document.myFileList.myFiles.options.length;i++)
  {
    if(document.myFileList.myFiles.options[i]!=null) {
    selectedList+=document.myFileList.myFiles.options[i].value + ",";
    }
  }
  document.getElementById("formFFCount").value=selectedList;
 
 ffCount++;
 }
}

function insertFileBox()
{
 var newType="<input type=\"file\" id=\"fileField"+ffCount+"\" onchange=\"swapInSwapOut(" + ffCount + ")\" name=\"fileField"+ffCount+"\">";
 var newFileInput=document.createElement(newType);
 document.myFileList.insertAdjacentElement("AfterBegin",newFileInput);
 document.getElementById("fileField"+ffCount).style.position="absolute"; 
 document.getElementById("fileField"+ffCount).style.top="209px"; 
 document.getElementById("fileField"+ffCount).style.left="310px"; 
 document.getElementById("fileField"+ffCount).style.width="30px"; 
 document.getElementById("fileField"+ffCount).style.zIndex=ffCount; 
 document.getElementById("hider").style.zIndex=ffCount+1;
}

function submitData() {
 document.getElementById("uploadButton").disabled=true;
 document.myFileList.submit();
}

function removeOptionsByValue(selectName, value) {
  for (var i=selectName.options.length-1; i>=0; i--) {
    if (selectName.options[i].value == value) {
      selectName.options[i] = null;
    }
  }
}

function removeFile() {
 
  var selectedList="";
  for(i=0;i<document.myFileList.myFiles.options.length;i++)
  {
   if(document.myFileList.myFiles.options[i].selected==true) {
    selectedList+=document.myFileList.myFiles.options[i].value + ",";
   }
  }
  
  var splitList=selectedList.split(",");
  
  for(i=0;i<splitList.length-1;i++) {
   document.getElementById("fileField"+splitList[i]).disabled=true;
   removeOptionsByValue(document.myFileList.myFiles,splitList[i]);
  }
  
  var selectedList="";
  for(i=0;i<document.myFileList.myFiles.options.length;i++)
  {
    selectedList+=document.myFileList.myFiles.options[i].value + ",";
  }
  
  if(selectedList.length==0) {
   document.getElementById("uploadButton").disabled=true;
  }
  document.getElementById("formFFCount").value=selectedList;
  document.myFileList.myFiles.selectedIndex=0;
}

function keyPressed() {
 if(event.keyCode==46 || event.keyCode==8) {
  removeFile();
  event.cancelBubble=true;
  event.returnValue=0;
 }
}
</script>

<form name="myFileList" method="post" enctype="multipart/form-data" action="multiUpload.cfm">
<table cellspacing=0 cellpadding=0 height=220 width=500 align=center>
 <tr>
  <td height=20 colspan=2 class="menuBar"> 
   
   <table cellspacing=0 cellpadding=0 border=0>
   <tr>
    <td class="buttonOff" width=20 align=center valign=middle onclick="removeFile()" height=20 onmousedown="this.className='buttonPressed'" onmouseover="this.className='buttonOn'" onmouseout="this.className='buttonOff'">[img]"deleteIcon.gif"[/img]</td>
   </tr>
   </table>
   
  </td>
 </tr>
 <tr>
  <td colspan=2>
   <fieldset class="fieldset"><legend class="legend">To add a file to the upload list, click <b>Browse...</b></legend>
   <select name="myFiles" onkeydown="keyPressed()" id="myFiles" multiple class="myFileSelection"></select></fieldset>
  </td>
 </tr>
 <tr>
  <td align=left style="padding-top:10px;"><input type="button" value="Cancel" class="submitButton" onclick="window.close()"></td>
  <td align=right height=20 style="padding-top:10px;">
   <input type="hidden" value="0" id="formFFCount" name="formFFCount">
   <input type="hidden" value="" id="folder" name="folder">
   <input type="hidden" value="5CC7ACF0A7" id="uid" name="uid">
   <input type="file" id="fileField1" onchange="swapInSwapOut('1')" name="fileField1" style="width:30px;zIndex:1;position:absolute;top:209px;left:310px" value="Add File">
   <input type="button" default disabled id="uploadButton" value="Upload Files" class="submitButton" onclick="submitData()">
  </td>
 </tr></form>
</table>


<div id="hider" style="position:absolute;width:10px;height:23px;background-color:buttonface;top:209px;left:304px;zIndex:1000;"></div>


</body>
</html>

woensdag 16 april 2003 20:28

Acties:

Verwijderd

Pelle schreef op 16 April 2003 @ 16:33:
Is dat zo?

Ik heb het even getest, maar het is gelukkig niet zo

Ik had het per ongeluk verwisseld met wat anders

Werkt mooi Gordijnstok!

donderdag 17 april 2003 10:25

Acties:

BobDay

Topicstarter

Verwijderd schreef op 16 April 2003 @ 18:25:
Probeer dit maar eens
code:
1
...heel veel mooie code

woei, Gordijnstok had je dit toevallig liggen of ben jij even heel druk geweest?
In beide gevallen, vriendelijk bedankt! $_/-\o_$

Ik ga jouw script gebruiken, maar ga nog wel een kleine aanpassing maken: ik wil het script laten vragen om een korte beschrijving van de te uploaden files.

Jammer alleen dat mijn reeds geschreven code de prullenbak ik kan.

43% of all statistics are worthless