Avatar billede goose Nybegynder
22. juni 2007 - 12:43 Der er 16 kommentarer og
1 løsning

Ekstra validering af data

Jeg bruger nedenstående script til at lave noget thumbnailvisning inden upload og scriptet validerer på om det er GIF eller JPG format.

Jeg vil så gerne have bygget endnu en validering ind, nemlig at filnavnet kun indeholder følgende karakterer: a-z 0-9 - _


<HEAD>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */

/***** CUSTOMIZE THESE VARIABLES *****/

  // width to resize large images to
var maxWidth=100;
  // height to resize large images to
var maxHeight=100;
  // valid file types
var fileTypes=["gif","jpg"];
  // the id of the preview image tag
var outImage="previewField";
  // what to display when the image is not valid
var defaultPic="spacer.gif";

/***** DO NOT EDIT BELOW *****/

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+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 -->
</script>
</HEAD>

<BODY>

<div align="center" style="line-height: 1.9em;">
Test it by locating a valid file on your hard drive:
<br>
<input type="file" id="picField" onchange="preview(this)">
<br>
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
</div>

Nogen der kan kringle den?

/Goose
Avatar billede roenving Novice
22. juni 2007 - 16:06 #1
Prøv f.eks.

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length && source.match(/^[\.a-z0-9_ -]+$/)) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
  }
  setTimeout("applyChanges()",200);
}
Avatar billede roenving Novice
22. juni 2007 - 16:07 #2
-- hov, der skal jo også tillades slashes:

  if (i<fileTypes.length && source.match(/^[\.\/a-z0-9_ -]+$/)) globalPic.src=source;

-- evt. skal der jo også splittes, så det kun er det egentlige fil-navn, der testes !-)
Avatar billede goose Nybegynder
22. juni 2007 - 19:45 #3
Ja, det skal kun være selve filnavnet der skal valideres på og altså ikke stien til filen. How?

/Goose
Avatar billede goose Nybegynder
22. juni 2007 - 20:12 #4
Iøvrigt, så skal det jo nok være sådan, at den ikke viser et preview hvis filnavn og ext ikke er iorden, altså skal alerten komme inden den laver et preview da feltet jo ellers vil være udfyldt med et filnavn som ikke er valid.

/Goose
Avatar billede roenving Novice
24. juni 2007 - 00:31 #5
Jeg ville prøve:

function preview(what){
  var source=what.value.split("/")[what.value.split("/").length-1];
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length && source.match(/^[\.a-z0-9_ -]+$/)) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
  }
  setTimeout("applyChanges()",200);
}

-- absolut utestet !-)
Avatar billede goose Nybegynder
25. juni 2007 - 09:14 #6
Tjaeeee, den melder også fejl selvom filnavnet er korrekt - tror også den validerer på selve stien og ikke kun filnavnet?

/Goose
Avatar billede goose Nybegynder
25. juni 2007 - 12:48 #7
Er kommet frem til nedenstående som ser ud til at virke - se dog spørgsmål efter koden:

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
    var goose=source.substring(source.lastIndexOf("\134")+1,source.lastIndexOf("."));


  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length && goose.match(/^[\.a-z0-9_ -]+$/)) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+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 -->
</script>
</HEAD>
<BODY>
<form>
<input type="file" id="picField" onchange="preview(this)"> <input type="reset" value="Slet indhold">
<br>
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
<br></form>

Det ser ud til at dette virker, dog har jeg måtte indsætte en RESET knap for at slette feltet såfremt det ikke er et gyldigt billede, kan den ikke automatisk slette dette indhold i forbindelse med alerten?

/Goose
Avatar billede goose Nybegynder
25. juni 2007 - 13:05 #8
hmm, skulle være:

var goose=source.substring(source.lastIndexOf("\134")+1,source.lastIndexOf(".")).toLowerCase();

/Goose
Avatar billede roenving Novice
26. juni 2007 - 00:31 #9
-- file inputs er ikke til rådighed for almindelige skrive-operationer, så det lyder helt rigtigt, at det kun er i forbindelse med en reset, at du kan gøre noget ...
Avatar billede goose Nybegynder
26. juni 2007 - 08:25 #10
okay, kan jeg så ikke have flere file inputs, men kun slette indholdet i en af dem i formularen?

En reset sletter jo hele formularen :o(

/Goose
Avatar billede roenving Novice
26. juni 2007 - 14:12 #11
Næh, man kunne måske nok opsamle værdier i felter i nogle javascript-variable, når der blev trykket på f.eks. en input type=reset, og så indsætte dem igen efter f.eks. 500 ms., men da man jo ikke kan skrive til file-inputs, såeh ...
Avatar billede roenving Novice
26. juni 2007 - 14:13 #12
Til gengæld kan man jo oprette nogle hidden fields, som løbende bliver opdateret med andre felters indhold, men det giver jo ikke mulighed for upload ...
Avatar billede goose Nybegynder
26. juni 2007 - 15:09 #13
Nej, jeg er nok bare nød til, at slette de filer der bliver uploadet som ikke er gyldige.

Tak for hjælpen og smid et svar.

/Goose
Avatar billede roenving Novice
26. juni 2007 - 15:18 #14
Velbekomme '-)
Avatar billede roenving Novice
26. juni 2007 - 15:19 #15
Hov, behold selv langt de fleste af dine point !-)
Avatar billede goose Nybegynder
26. juni 2007 - 15:51 #16
Det er helt ok, det er ikke første gang du har bidraget med sparring/hjælp uden at få point, så nu tager jeg chancen og giver dig alle 200 ;o)

/Goose
Avatar billede roenving Novice
27. juni 2007 - 00:07 #17
Tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester