---
title: "Hämta länk från ett filfält..."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/146668-hämta-länk-från-ett-filfält"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "oskars"
published: "2006-05-10T13:47:37.000Z"
updated: "2006-05-15T10:25:47.000Z"
replies: 16
views: 625
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/146668-hämta-länk-från-ett-filfält"
---

# Hämta länk från ett filfält...

## #1 — oskars, 2006-05-10T13:47Z

Hej på er,

ja nu ska jag försöka förklara vad jag vill åstadkomma!

Jag har ett "filfält" där man kan klicka på bläddra och välja en bildfil. När man klickat på "Öppna" och valt bilden så får man ju en sökväg till bildfilen i sitt fält brevid "Bläddra"-knappen. Jag vill på något sätt få ha en länk brevid den här som ser ut så här:

\<a href="sökvägen till bilden i filfältet"\>Bild\</a\>

Hur kan jag få tag i sökvägen i bilden i filfältet?

Tacksam för svar!   :bire

Permalänk: https://www.webforum.nu/p/146668

## #2 — oskars, 2006-05-10T15:03Z

Det är alltså sökvägen till bilden på DATORN som jag vill ha fram i ahref-länken :)

Permalänk: https://www.webforum.nu/p/1812894

## #3 — nitro2k01, 2006-05-10T16:22Z

```
document.getElementsById("lankensid").href=
    document.forms["formnamnet"].elements["uploadensnamn"].value;
```

Vet dock inte hur det funkar med säkerhetsinställningar osv, men det bör gå bra.

Permalänk: https://www.webforum.nu/p/1812921

## #4 — antipentA, 2006-05-10T16:26Z

nitro: Det där ger väl bara filnamnet, inte sökvägen?

Permalänk: https://www.webforum.nu/p/1812922

## #5 — nitro2k01, 2006-05-10T16:30Z

> **antipentA skrev:**
>
> nitro: Det där ger väl bara filnamnet, inte sökvägen?

Nej, det ger hela sökvägen.

Permalänk: https://www.webforum.nu/p/1812925

## #6 — oskars, 2006-05-10T17:31Z

nitro. fint! Tack! Glömde säga att jag har 20st olika filfält och behöver en till varje :) Hur ser hela koden ut för det där? Ska jag lägga det i en .js-fil och isf hur kallar jag på den i länken? \*grubblar\*

Permalänk: https://www.webforum.nu/p/1812937

## #7 — oskars, 2006-05-11T09:36Z

Fälten heter så här:

file01
file02
file03
file04
file05
osv

Permalänk: https://www.webforum.nu/p/1813128

## #8 — oskars, 2006-05-12T16:48Z

Okej, jag vet inte hur man använder nitro2ks script... men jag har fått några förslag här:

```
<html>
<head>
<script>
function changeField() {
var ett = document.test.ett.value;
document.test.tva.value = ett;
}
</script>
</head>
<body>
<form name="test">
<input type="file" name="ett" id="ett" onchange="changeField()">
<br /><br />
<input type="submit" id="tva" name="tva" style="border:0;width:100%;">
</form>
</body>
</html>
```

Det här är ganska intressant, det fungerar utmärkt lokalt på hårddisken, men inte online... någon som kan fatta varför och hur åtgärdar man detta? Alltså detta:

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

        function  visa()
        {
            var url = document.form.url.value
			 myWindow = window.open(url, "förhandsgransking", 'toolbar,width=600,height=600')

        }

        -->
    	</script>

    	<a href="javascript:visa()">visa</a>

    	<form name="form">

    	<input type="file" name="url">

    	</form>
```

Tacksam för svar!   :stud

Permalänk: https://www.webforum.nu/p/1813672

## #9 — nitro2k01, 2006-05-12T18:43Z

```
<html>
<head>

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

function fixFileURL(instring){
	return "file:///"+encodeURI(instring.replace(/\\/g, "/"));
}

function cycleinputs(){
	var totalinputs = emptyinputs = 0, els = document.forms["tehform"].elements;

	for (var i=0; i<els.length; i++)
		if (els[i].type=="file"){
			var fname=fixFileURL(els[i].value);

			els[i].onchange=cycleinputs;

			totalinputs++;

			if(!els[i].value)
				emptyinputs++;
			else{
				if (null !== els[i].nextSibling && els[i].nextSibling.tagName=="A"){
					els[i].nextSibling.href = fixFileURL(els[i].value);
					els[i].nextSibling.replaceChild(document.createTextNode(fixFileURL(els[i].value)), els[i].nextSibling.firstChild);
				}else{
					var tempel = document.createElement("A")
					tempel.target="_blank";
					tempel.href = fixFileURL(els[i].value);
					tempel.appendChild(document.createTextNode(fixFileURL(els[i].value)));
					els[i].parentNode.appendChild(tempel);
				}
			}

		}

	if (emptyinputs==0){
		var tempel=document.createElement("DIV"),
			tempel2=document.createElement("INPUT");

		tempel2.type = "file";
		tempel2.name = "file" + totalinputs;

		tempel.appendChild(tempel2);

	 	document.getElementById("filecontainer").appendChild(tempel);

	 	tempel2.onchange=cycleinputs;
	}
}

window.onload=cycleinputs;

--></script>
</head>
<body>

<form name="tehform">

<div id="filecontainer">
	<div><input type="file" name="file0" /></div>
	<div><input type="file" name="file1" /></div>
	<div><input type="file" name="file2" /></div>

</div>
</form>

</body>
</html>
```

Problemet du upplever när du laddar upp sidan beror på att säkerhetsinställningarna inte tillåter window.open att hantera lokala URL'er.

Permalänk: https://www.webforum.nu/p/1813730

## #10 — oskars, 2006-05-12T21:19Z

nitro, det scriptet som du bifogade, ska det fungera korrekt menar du? =)

Permalänk: https://www.webforum.nu/p/1813816

## #11 — nitro2k01, 2006-05-13T07:57Z

Pröva, det är det enda sättet att få veta.

Permalänk: https://www.webforum.nu/p/1813902

## #12 — oskars, 2006-05-13T14:03Z

hej nitro, jo jag gjorde det faktiskt =) det fungerade inte i IE, men fungerade i FF... Vad är det som inte kan stödjas av IE där egentligen?

Permalänk: https://www.webforum.nu/p/1813969

## #13 — nitro2k01, 2006-05-14T09:16Z

> **oskars skrev:**
>
> hej nitro, jo jag gjorde det faktiskt =) det fungerade inte i IE, men fungerade i FF... Vad är det som inte kan stödjas av IE där egentligen?

Körde du det lokalt eller på en server?

Permalänk: https://www.webforum.nu/p/1816846

## #14 — oskars, 2006-05-14T17:54Z

både och =)

Permalänk: https://www.webforum.nu/p/1816970

## #15 — nitro2k01, 2006-05-14T20:21Z

Aha, det verkar ha med säkerhetsinställningar att göra. Men får jag fråga, vad ska du använda det till?

Permalänk: https://www.webforum.nu/p/1817011

## #16 — oskars, 2006-05-15T04:29Z

Jo som sagt. 

Jag har 20st filfält som jag laddar upp bilder med. Jag vill innan jag laddar upp bilderna kunna förhandskolla bilderna innan jag laddar upp dom på ett enkelt sätt... Alltså vill jag ha en länk till vänster om filfälten som länkar till bilderna lokalt på datorn. Visst, det går ju att bara gå in i bildernas mapp, men det här skulle vara 100 gånger smidiare.

Så här kommer det se ut:

01 \[filfält\] \[bläddra-knapp\]
02 \[filfält\] \[bläddra-knapp\]
03 \[filfält\] \[bläddra-knapp\]
04 \[filfält\] \[bläddra-knapp\]
05 \[filfält\] \[bläddra-knapp\]

Där 01-05 är preview-knappar. Notera att det ska vara 20st såna här fält!

Tack för att du tar dig tid!

Permalänk: https://www.webforum.nu/p/1817054

## #17 — oskars, 2006-05-15T10:25Z

Jag har gjort lite efterforskningar och hittat detta scriptet som fungerar bra, men behöver lite modifikationer:

```

<HEAD>

<script type="text/javascript">
  // width to resize large images to
var maxWidth=100;
  // height to resize large images to
var maxHeight=200;
  // valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
  // 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;

  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;">
<br>
<input type="file" id="picField" onchange="preview(this)" onClick="preview(this)"><br />
<input type="file" id="picField" onchange="preview(this)" onClick="preview(this)"><br />
<input type="file" id="picField" onchange="preview(this)" onClick="preview(this)"><br />
<input type="file" id="picField" onchange="preview(this)" onClick="preview(this)"><br />
<br>
<img alt="preview here" id="previewField" src="spacer.gif">

</body>
```

 

Det är perfekt. Det enda som inte fungerar som det ska är det här:

När man valt 1st fil i ett filfält och ska välja fil i nästa filfält... när man klickar på bläddra i filfält nr2 så försvinner bild1 under tiden man väljer bild2.. förstår du? det är lite irreterande eftersom layouten hoppar och förvirrar på min sida.

Är det något du kan modifiera åt mig? För i så fall har jag mitt script färdigt :)

  :birp

Permalänk: https://www.webforum.nu/p/1817113

---

Tråden på webben: https://www.webforum.nu/amne/javascript/146668-hämta-länk-från-ett-filfält
