I have a box and button to choose a file and when I choose my file then it shows in the picture box
and I have file window under each box and can get defference picture in the boxes
Under my picture I have a input line there I want to display only the filename of the picture not the whole pathname..
So it has to do 2 function or ?
so It still shows my picture in the box and its gets only the filename from picture to my input Value how ?
And if it could so I don’t need the filebrowse on button but in the img click it could be nice, but its fine if could not work with img click
Here is my code – ( have 4 function and 4 box ) but the code are the same only the name is different so it gets a difference picture in each box
[code]
function previewFeatureFile() {
var preview = document.querySelector(‘#feature_prev’);
var file = document.querySelector(‘#browse’).files[0];
var reader = new FileReader();
reader.addEventListener(“load”, function() {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
console.log(reader);
}
}
function previewFeatureFiles() {
var preview = document.querySelector(‘#feature_prevs’);
var file = document.querySelector(‘#browse1’).files[0];
var reader = new FileReader();
reader.addEventListener(“load”, function() {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function previewFeature1() {
var preview = document.querySelector(‘#feature_prev1’);
var file = document.querySelector(‘#browse2’).files[0];
var reader = new FileReader();
reader.addEventListener(“load”, function() {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function previewFeature2() {
var preview = document.querySelector(‘#feature_prev2’);
var file = document.querySelector(‘#browse3’).files[0];
var reader = new FileReader();
reader.addEventListener(“load”, function() {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function previewFeature3() {
var preview = document.querySelector(‘#feature_prev3’);
var file = document.querySelector(‘#browse4’).files[0];
var reader = new FileReader();
reader.addEventListener(“load”, function() {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
<div class=”empty”>
<div class=”fill” draggable=”true”> </div>
</div><br>
<div class=”empty”>
<img id=”feature_prev” src=”aadrag.png” width=”160″ height=”160″ />
<input id=”browse” type=”file” onchange=”previewFeatureFile()”>
</div><br>
<div class=”empty”>
<img id=”feature_prevs” src=”aadrag.png” width=”160″ height=”160″ />
<input id=”browse1″ type=”file” onchange=”previewFeatureFiles()”>
</div><br>
<div class=”empty”>
<img id=”feature_prev1″ src=”aadrag.png” width=”160″ height=”160″>
<input id=”browse2″ type=”file” onchange=”previewFeature1()”>
</div><br>
<p>in this part i try to make a onclick on img its open windod but not show the picture in my img then i click done.. </p>
<div class=”empty”>
<a href=”#” onclick=”openFileOption();”><img id=”feature_prev2″ src=”aadrag.png” width=”160″ height=”160″ /></a>
<input id=”browse3″ type=”file” onchange=”previewFeature2()”>
<p>here i try to get the filename of the picture in input – i know its wrong but i dont know how i do, so its only for show you what i want to here</p>
<input id=”feature_prev2″ type=”text” onchange=”previewFeature2()”>
</div><br>
<div class=”empty”>
<img id=”feature_prev3″ src=”aadrag.png” width=”160″ height=”160″ />
<input id=”browse4″ type=”file” onchange=”previewFeature3()”>
<span id=”previewFeature3()”>a</span>
<input id=”feature_prev3″ type=”text” onchange=”previewFeature3()”>
</div><br>
__(Added `[code]…[/code]
in this part i try to make a onclick on img its open windod but not show the picture in my img then i click done.. [/quote]
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<p class="name-output"></p>
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<p class="name-output"></p>
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<p class="name-output"></p>
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<p class="name-output"></p>
<script>
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.previousElementSibling;
var output = fileinput.nextElementSibling;
output.textContent = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
<input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput1"><img src="yourimg.png"></label>
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);">
<input class="name-output">
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<input class="name-output">
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<input class="name-output">
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input class="browse" type="file" onchange="previewFeatureFile(this);">
<p class="name-output"></p>
<script>
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.previousElementSibling;
var output = fileinput.nextElementSibling;
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
input.browse {
display: none;
}
var output = fileinput.nextElementSibling.nextElementSibling;
<script>
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.previousElementSibling;
var output = fileinput.nextElementSibling.nextElementSibling; // <-- here
// we have to get the next sibling which is the label and again the next sibling
// which is the input for the file name
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput1"><img src="images/buttonup.png"></label>
<input class="name-output">
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input id="fileinput2" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput2"><img src="images/buttonup.png"></label>
<input class="name-output">
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input id="fileinput3" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput3"><img src="images/buttonup.png"></label>
<input class="name-output">
<img class="feature_prev" src="aadrag.png" width="160" height="160" />
<input id="fileinput4" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput4"><img src="images/buttonup.png"></label>
<input class="name-output">
<script>
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.previousElementSibling;
var output = fileinput.nextElementSibling.nextElementSibling;
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
<input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput1"><img src="images/buttonup.png"></label>
<input class="name-output">
<input id="fileinput2" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput2"><img src="images/buttonup.png"></label>
<input class="name-output">
<input id="fileinput3" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput3"><img src="images/buttonup.png"></label>
<input class="name-output">
<input id="fileinput4" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput4"><img src="images/buttonup.png"></label>
<input class="name-output">
<script>
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.nextElementSibling.firstElementChild;
var output = fileinput.nextElementSibling.nextElementSibling;
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
<i>
</i><FORM METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 BGCOLOR="#FFFFFF" WIDTH="720">
<TR>
<TD><input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);"></TD>
<TD><label for="fileinput1"><img src="aadrag.png" width="160" height="160"></label></TD>
<TD><input class="name-output"><br></TD></TR>
<br/>
<i> </i><TR><TD><input id="fileinput2" class="browse" type="file" onchange="previewFeatureFile(this);"></TD>
<i> </i><TD><label for="fileinput2"><img src="aadrag.png" width="160" height="160"></label></TD>
<i> </i><TD><input class="name-output"><br></TD></TR>
<i> </i>
<i> </i><TR><TD><input id="fileinput3" class="browse" type="file" onchange="previewFeatureFile(this);"></TD>
<i> </i><TD><label for="fileinput3"><img src="aadrag.png" width="160" height="160"></label></TD>
<i> </i><TD><input class="name-output"><br></TD></TR>
<i> </i>
<i> </i><TR><TD><input id="fileinput4" class="browse" type="file" onchange="previewFeatureFile(this);"></TD>
<i> </i><TD><label for="fileinput4"><img src="aadrag.png" width="160" height="160"></label></TD>
<i> </i><TD><input class="name-output"><br></TD></TR>
</TABLE>
</Form>
<br><br><br>
<br><br> <br/>
<script>
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.nextElementSibling.firstElementChild;
var output = fileinput.nextElementSibling.nextElementSibling;
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
<FORM METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 BGCOLOR="#FFFFFF" WIDTH="720">
<TR>
<TD><input id="fileinput1" data-idx="1" class="browse" type="file" onchange="previewFeatureFile(this);">
</TD>
<TD><label for="fileinput1"><img id="fileimg1" src="aadrag.png" width="160" height="160"></label></TD>
<TD><input id="fileoutput1"><br></TD>
</TR>
<TR>
<TD><input id="fileinput2" data-idx="2" class="browse" type="file" onchange="previewFeatureFile(this);">
</TD>
<TD><label for="fileinput2"><img id="fileimg2" src="aadrag.png" width="160" height="160"></label></TD>
<TD><input id="fileoutput2"><br></TD>
</TR>
<TR>
<TD><input id="fileinput3" data-idx="3" class="browse" type="file" onchange="previewFeatureFile(this);">
</TD>
<TD><label for="fileinput3"><img id="fileimg3" src="aadrag.png" width="160" height="160"></label></TD>
<TD><input id="fileoutput3"><br></TD>
</TR>
<TR>
<TD><input id="fileinput4" data-idx="3" class="browse" type="file" onchange="previewFeatureFile(this);">
</TD>
<TD><label for="fileinput4"><img id="fileimg4" src="aadrag.png" width="160" height="160"></label></TD>
<TD><input id="fileoutput4"><br></TD>
</TR>
</TABLE>
</Form>
<br><br><br>
<i> </i><br><br>
<i> </i><script>
<i> </i> function previewFeatureFile(fileinput) {
<i> </i> var file = fileinput.files[0];
<i> </i> var idx = fileinput.getAttribute("data-idx");
<i> </i> var preview = document.getElementById("fileimg" + idx);
<i> </i> var output = document.getElementById("fileoutput" + idx);
<i> </i> output.value = file.name;
<i> </i> var reader = new FileReader();
<i> </i> reader.addEventListener("load", function () {
<i> </i> preview.src = reader.result;
<i> </i> }, false);
<i> </i> if (file) {
<i> </i> reader.readAsDataURL(file);
<i> </i> }
<i> </i> }
<i> </i></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Fileinput</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
label>img {
max-width: 200px;
}
<i> </i> label {
<i> </i> margin-right: 20px;
<i> </i> }
<i> </i> input.browse {
<i> </i> display: none;
<i> </i> }
<i> </i> .filechooser-group {
<i> </i> display: flex;
<i> </i> align-items: center;
<i> </i> justify-content: center;
<i> </i> }
<i> </i></style>
<i> </i><template id="fileChooserTemplate">
<i> </i> <input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<i> </i> <label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<i> </i> <input id="fileoutput{idx}">
<i> </i></template>
</head>
<body>
<form METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data">
</form>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
makeFileChooser();
}
}
function makeFileChooser() {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> idx++;
<i> </i> }
<i> </i> makeFileChooser();
<i> </i></script>
</body>
</html>
I used a solution that's based on a template. Thus the HTML can be adjusted easily.<input id="fileoutput1" name="img1">
<template id="fileChooserTemplate">
<input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<input id="fileoutput{idx}" name="img{idx}">
</template>
array (size=1)
'files' =>
array (size=5)
'name' =>
array (size=1)
0 => string 'DSCF2729_ji_ji.jpg' (length=18)
'type' =>
array (size=1)
0 => string 'image/jpeg' (length=10)
'tmp_name' =>
array (size=1)
0 => string 'C:WindowsTempphp546.tmp' (length=26)
'error' =>
array (size=1)
0 => int 0
'size' =>
array (size=1)
0 => int 66064
I assume that the same array is available in your ASP script.<i>
</i><template id="fileChooserTemplate">
** <input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<input id="fileoutput{idx}">
</template>
how do i get the full path on picture where it is uploaded fromAFAIK it is not possible in Javascript to get the full path, for security reasons.
eg.
c: images test.jpg[/quote]
I got error then i try to opload files.. from my mobilePlease describe in detail:
but if i doit from my pc its no error maybe it its are on the same net where my server is...[/quote]
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"
<i>
</i><%@ Language=VBScript %>
<link rel="stylesheet" type="text/css" href="draganddrop.css" />
<%
Sub GreatUserMap
Dim objFSO
Dim strPath
Dim Map
Dim UserMap
UserMap = oupload.form("SNr")
if oupload.form("SNr") = "" Then
UserMap = "0"
End If
Map = "@_"
strPath = "/rapporter/@sagsrapport/"& Map & UserMap
Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
If Not objFSO.FolderExists(Server.MapPath(strPath)) Then
objFSO.CreateFolder Server.MapPath(strPath)
End If
Session("sagsmapfile") = "/rapporter/@sagsrapport/"& Map & UserMap
End Sub
'***********************
set oUpload = Server.CreateObject("Persits.Upload")
oUpload.Save("c:FarmsSubdomainappiweb" & Session("sagsmapfile"))
'oUpload.Save("c:upload")
Set oPDF = Server.CreateObject("Persits.PDF")
Set oDoc = oPDF.CreateDocument
Set oPage = oDoc.Pages.Add
Set oDest = oDoc.CreateDest(oPage, "Fit=True")
oDoc.OpenAction = oDest
Set oHelvFont = oDoc.Fonts("Helvetica")
set oCanvas = oPage.Canvas
Call GreatUserMap
'if oUpload.Files.Count = 1 then
' set oLogo = oUpload.Files(1)
' if oLogo.ImageType <> "UNKNOWN" then
' lImageScale = 1
' if oLogo.ImageHeight > 100 then
' lImageScale = 100 / oLogo.ImageHeight
' end if
' if oLogo.ImageWidth > 240 then
' lImageScale2 = 240 / oLogo.ImageWidth
' if lImageScale2 < lImageScale then
' lImageScale = lImageScale2
' end if
' end if
' lImageScale = round(lImageScale, 2)
' sImageParam = "x=54;y=660;scalex=" & lImageScale & ";scaley=" & lImageScale
'Response.Write simageparam
'Response.end
' oCanvas.DrawImage oDoc.OpenImage(oLogo.Path), sImageParam
' end if
'else
'Set oLogo = oDoc.OpenImage( Server.MapPath( oupload.form("Pict1")) )
Set oLogo = oDoc.OpenImage( Server.MapPath( "Logo1.jpg") )
'' oCanvas.DrawText "Logo Goes Here", "x=54;y=730;size=20", oHelvFont <br/>
oCanvas.DrawImage oLogo, "x=10;y=670;width=0.01;"
'end if
'*********************************************************** Toppen
oCanvas.DrawText ""& oupload.form("ProjectName") &"", "x=54; y=650; width=190; size=10; alignment=left; rendering=0", oHelvFont
'*********************************************************** Toppen
oCanvas.DrawText "Invoice", "x=320, y=750; size=70; rendering=1", oHelvFont
oCanvas.DrawText "SNr:", "x=320, y=665, size=12; rendering=0", oHelvFont
oCanvas.DrawText "Opr :", "x=320, y=645, size=12; rendering=0", oHelvFont
oCanvas.DrawText "Date:", "x=320, y=625, size=12; rendering=0", oHelvFont
oCanvas.DrawText oupload.form("SNr"), "x=390, y=665, size=12; rendering=0", oHelvFont
oCanvas.DrawText oupload.form("AuthorName"), "x=390, y=645, size=12; rendering=0", oHelvFont
oCanvas.DrawText Formatdatetime(Now, vbLongDate), "x=390, y=625, size=12; rendering=0", oHelvFont
'==============================================================Bill To and Ship To boxes
set oTable = oDoc.CreateTable("rows=1; cols=1; cellspacing=0; cellpadding=2; height=122; width=220; border=0;bordercolor=white")
oTable.Font = oHelvFont
'*************
'
'********
Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"
'' oCanvas.DrawImage oLogo, "x=54;y=410;width=0.5;height=0.3;"
'
'******************************
<i> </i>
with oTable.Rows(1).Cells(1)
.ClearText
.AddText oupload.form("Notes"), "alignment=left;color=black;size=12"
end with
oCanvas.DrawTable oTable, "x=320;y=580"
'================================================================Header Box
'set oTable = oDoc.CreateTable("rows=2;cols=6;cellpadding=2;height=60;width=500;border=0;bordercolor=black")
'oTable.Font = oHelvFont
'with oTable.rows(1)
' .Height = 22
' .bgcolor = "lightgray"
' sParam = "alignment=2;color=black;size=12"
' .cells(1).addtext "P.O. #", sParam
' .cells(2).addtext "Terms", sParam
' .cells(3).addtext "Ship Date", sParam
' .cells(4).addtext "Ship Via", sParam
' .cells(5).colspan = 2
' .cells(5).addtext "Notes", sParam
'end with
'with oTable.Rows(2)
' .Height = 28
' .bgcolor = "white"
' .cells(1).addtext oupload.form("PurchaseOrder"), sParam
' .cells(2).addtext "Net 30", sParam
' .cells(3).addtext FormatDateTime(Now, vbShortDate), sParam
' .cells(4).addtext "UPS Ground", sParam
' .cells(5).colspan = 2
' .cells(5).addtext oupload.form("Notes"), "alignment=2;color=black;size=10"
'end with
'oCanvas.DrawTable oTable, "x=54; y=452"
'//=================================================================Main Box
set oTable = oDoc.CreateTable("rows=2;cols=4;cellpadding=2;height=300;width=500;border=0")
oTable.Font = oHelvFont
sParam = "alignment=left;color=black;size=12"
sParam2 = "alignment=right; color=black; size=12"
with oTable.Rows(1)
.Height = 22
.BgColor = "lightgray"
.Cells(1).width = 310
.cells(1).addtext "Product", sParam
.Cells(2).width = 30
.cells(2).addtext "Qty", sParam2
.Cells(3).width = 80
.cells(3).addtext "Price", sParam2
.Cells(4).width = 80
.cells(4).addtext "Amount", sParam2
end with
with oTable.rows(2)
.Height = 278
.BgColor = "white"
.Cells(1).width = 310
.Cells(2).width = 30
.Cells(3).width = 80
.Cells(4).width = 80
<i> </i>lTotal = 0
<i> </i>for i = 1 to 2
<i> </i> sProductBox = sProductBox & oupload.form("Product" & i) & vbcrlf
<i> </i> sQtyBox = sQtyBox & oupload.form("Qty" & i) & vbcrlf
<i> </i> Response.Write i
<i> </i> on error resume next 'skip type conversion errors
<i> </i> Price = oUpload.Form("Price" & i)
<i> </i> Price = "$ " & oPDF.FormatNumber(Price, "precision=2, delimiter=true")
<i> </i> sPriceBox = sPriceBox & Price & vbcrlf
<i> </i> Amount = oUpload.Form("Amount" & i)
<i> </i> Amount = "$ " & oPDF.FormatNumber(Amount, "precision=2, delimiter=true")
<i> </i> sAmountBox = sAmountBox & Amount & vbcrlf
<i> </i> on error goto 0
<i> </i>next
<i> </i>.cells(1).addtext sProductBox, sParam
<i> </i>.cells(2).addtext sQtyBox, sParam2
<i> </i>.cells(3).addtext sPriceBox, sParam2
<i> </i>.cells(4).addtext sAmountBox, sParam2
end with
oCanvas.DrawTable oTable, "x=54; y=380"
oCanvas.DrawText "STATUS: Please remit payment", "alignment=left; color=grey; size=12; x=54; y=78", oHelvFont
oName = oupload.form("SNr")
Filename = oDoc.Save( Server.MapPath( "/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"/"& "SNr_" & oName & ".pdf" ), False )
Response.Write "Success! Download your PDF file <A HREF=""/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & Filename & """>here</A>"
response.Write "<br>"
%>
Server.MapPath( "/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & oupload.form("Pict1"))
<i>
</i><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Fileinput</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
label>img {
max-width: 200px;
}
<i> </i>label {
<i> </i> margin-right: 20px;
<i> </i>}
<i> </i>input.browse {
<i> </i> display: none;
<i> </i>}
<i> </i>.filechooser-group {
<i> </i> display: flex;
<i> </i> align-items: center;
<i> </i> justify-content: center;
<i> </i>}
</style>
<template id="fileChooserTemplate">
<input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<input id="fileoutput{idx}" name="img{idx}">
</template>
</head>
<body>
<form METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data">
</form>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
makeFileChooser();
}
}
function makeFileChooser() {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> idx++;
<i> </i>}
<i> </i>makeFileChooser();
</script>
</body>
</html>
<form METHOD="POST" ACTION="show-preview.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data">
<input type="submit" id="submit-btn">
</form>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
makeFileChooser();
}
}
function makeFileChooser() {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> idx++;
<i> </i> // move submit button to the end
<i> </i> var submitBtn = document.getElementById("submit-btn");
<i> </i> document.querySelector("form").appendChild(submitBtn);
<i> </i> }
<i> </i> makeFileChooser();
<i> </i></script>
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "http://yourwebsite.com/rapporter/@sagsrapport/@_"& oupload.form("SNr") &"" & oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"
<i>
</i>Response.Write Request.Form("img1")
<template id="fileChooserTemplate">
<input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<input id="fileoutput{idx}" name="img{idx}">
</template>
Obviously this was wrong: That input contains the name of the image not the image itself. I'm fairly shure that this is the reason why that form doesn't work for you. Change it to this:<template id="fileChooserTemplate">
<input id="fileinput{idx}" name="img{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<input id="fileoutput{idx}">
</template>
<i>
</i><head>
<meta charset="iso-8859-1">
<title>Test Fileinput</title>
<meta name="viewport">
<style>
label>img {
max-width: 200px;
}
<i> </i>label {
<i> </i> margin-right: 20px;
<i> </i>}
<i> </i>input.browse {
<i> </i> display: none;
<i> </i>}
<i> </i>.filechooser-group {
<i> </i> display: flex;
<i> </i> align-items: center;
<i> </i> justify-content: center;
<i> </i>}
</style>
<template id="fileChooserTemplate">
<input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);">
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"><br><br><br><br></label>
<input id="fileoutput{idx}" name="img{idx}" Class="browse"> <br/>
<textarea id="textoutput{idx}" data-idx="{idx}" rows="10" cols="50" class="Text">tilføj tekst</textarea>
</template>
</head>
<form METHOD="POST" ACTION="show-preview.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data">
<table width="50%" cellspacing="0" cellpadding="2" border="0" Align="center">
<tr><td width="100%" align="center" valign="top"></td>
<%
Response.Write "<tr><td width=""15%"" class=""Transparent1"" valign=""middle""><b>Project name :</b></Font></td><td width=""35%"" class=""PageBox"" valign=""middle""><input type=""text"" name=""Projectname"" Class=""topfelt1"" onClick=""this.className='updatetimeaktiv';"" id=""linieBox"" onFocus=""this.className='updatetimeaktiv';"" onBlur=""this.className='topfelt1';"" style=""width:250px; height:24""></td></tr>" & vbCrLf
%>
<i> </i> </td></tr>
<i> </i> </table>
<i> </i>
<br>
<br>
<br>
<br> <br/>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
makeFileChooser();
}
}
function makeFileChooser() {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> idx++;
<i> </i> // move submit button to the end
<i> </i> var submitBtn = document.getElementById("submit-btn");
<i> </i> document.querySelector("form").appendChild(submitBtn);
<i> </i>}
<i> </i>makeFileChooser();
</script>
<input type="submit" id="submit-btn">
</form>
<i>
</i>Response.Write "project name: " & Request.Form("Projectname")
If if move this : ENCTYPE="multipart/form-data"[/quote]
<i>
</i>Response.Write "project name: " & Request.Form("Projectname")
Response.Write "<tr><td width=""15%"" class=""Transparent1"" valign=""middle""><b>Project name :</b></Font></td><td width=""35%"" class=""PageBox"" valign=""middle""><input type=""text"" name=""Projectname"" Class=""topfelt1"" onClick=""this.className='updatetimeaktiv';"" id=""linieBox"" onFocus=""this.className='updatetimeaktiv';"" onBlur=""this.className='topfelt1';"" style=""width:250px; height:24""></td></tr>" & vbCrLf
by ASP?<template id="fileChooserTemplate">
<input id="fileinput{idx}" name="img{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"> <!-- name="img{idx}" added here -->
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"><br><br><br><br></label>
<input id="fileoutput{idx}" Class="browse"> <!-- name="img{idx}" removed here -->
<i> </i><textarea id="textoutput{idx}" data-idx="{idx}" rows="10" cols="50" class="Text">tilføj tekst</textarea>
</template>
<i>
</i><template id="fileChooserTemplate">
<input id="fileinput{idx}" name="img{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"> <!-- name="img{idx}" added here -->
<label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"><br><br><br><br></label>
<input id="fileoutput{idx}" Class="browse"> This line have the same name as the 1st line. are its correct ? and if i remove my class so i still not can se the input in site. and i cannot se what my Request be look like its not working whit Request("img1") so something its wrong<!-- name="img{idx}" removed here -->
<textarea id="textoutput{idx}" data-idx="{idx}" rows="10" cols="50" class="Text">tilføj tekst</textarea>
</template>
<i>
</i><input id="fileoutput{idx}" name="fileoutput{idx}"> <!-- Its miss the name="" now its works on that.
Are where way to in my save.asp to check how many name="fileoutput{idx}" there add on form[/quote]
<i>
</i>counter = 0
while fileoutput[counter] not equal ''
counter = counter + 1
/* Process image file having index = counter */
end while
/* counter now contains number of files */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Fileinput</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
label>img {
max-width: 200px;
}
<i> </i> label {
<i> </i> margin-right: 20px;
<i> </i> }
<i> </i> input.browse {
<i> </i> display: none;
<i> </i> }
<i> </i> .filechooser-group {
<i> </i> display: flex;
<i> </i> align-items: center;
<i> </i> justify-content: center;
<i> </i> }
<i> </i></style>
<i> </i><template id="fileChooserTemplate">
<i> </i> <input id="fileinput{idx}" name="img-file-{idx}" data-idx="{idx}" class="browse" type="file"
<i> </i> onchange="previewFeatureFile(this);">
<i> </i> <label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<i> </i> <input id="fileoutput{idx}" name="img-name-{idx}">
<i> </i></template>
</head>
<body>
<form method="POST" action="asp-uploadUpload1.asp" enctype="multipart/form-data">
<input type="text" id="nr-files" name="nr-files" hidden value="0"> <!-- add this -->
<input type="submit" id="submit-btn">
</form>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
makeFileChooser();
}
}
function makeFileChooser() {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> // enter number of files to hidden input
<i> </i> document.getElementById("nr-files").value = idx - 1; // add this
<i> </i> idx++;
<i> </i> // move submit button to the end
<i> </i> var submitBtn = document.getElementById("submit-btn");
<i> </i> document.querySelector("form").appendChild(submitBtn);
<i> </i> }
<i> </i> makeFileChooser();
<i> </i></script>
</body>
</html>
label {
margin-right: 20px;
}
input.browse {
display: none;
}
.filechooser-group {
display: flex;
align-items: center;
justify-content: center;
}
var idx = 1;
document.getElementById("nr-files").value = idx - 1; // add this
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Fileinput</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
label>img {
max-width: 200px;
}
<i> </i> label {
<i> </i> margin-right: 20px;
<i> </i> }
<i> </i> input.browse {
<i> </i> display: none;
<i> </i> }
<i> </i> .filechooser-group {
<i> </i> display: flex;
<i> </i> align-items: center;
<i> </i> justify-content: center;
<i> </i> }
<i> </i></style>
<i> </i><template id="fileChooserTemplate">
<i> </i> <input id="fileinput{idx}" name="img-file-{idx}" data-idx="{idx}" class="browse" type="file"
<i> </i> onchange="previewFeatureFile(this);">
<i> </i> <label for="fileinput{idx}"><img id="fileimg{idx}" src="aadrag.png" width="160" height="160"></label>
<i> </i> <input id="fileoutput{idx}" name="img-name-{idx}">
<i> </i></template>
</head>
<body>
<form method="POST" action="asp-uploadUpload1.asp" enctype="multipart/form-data">
<input type="text" id="nr-files" name="nr-files" hidden value="0">
<input type="button" id="add-btn" value="Add file" onclick="makeFileChooser();">
<input type="submit" id="submit-btn">
</form>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function makeFileChooser() {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> // enter number of files to hidden input
<i> </i> document.getElementById("nr-files").value = idx - 1;
<i> </i> idx++;
<i> </i> // move submit button to the end
<i> </i> var addBtn = document.getElementById("add-btn");
<i> </i> document.querySelector("form").appendChild(addBtn);
<i> </i> var submitBtn = document.getElementById("submit-btn");
<i> </i> document.querySelector("form").appendChild(submitBtn);
<i> </i> }
<i> </i> makeFileChooser();
<i> </i></script>
</body>
</html>
// enter number of files to hidden input
document.getElementById("nr-files").value = idx - 1;
// enter number of files to hidden input
document.getElementById("nr-files").value = idx;
<body>
<form method="POST" action="asp-uploadUpload1.asp" enctype="multipart/form-data">
<input type="text" id="nr-files" name="nr-files" hidden value="0">
<input type="button" id="add-btn" value="Add file" onclick="makeFileChooser(true);"><!-- changed here -->
<input type="submit" id="submit-btn">
</form>
<script>
var idx = 1;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var idx = fileinput.getAttribute("data-idx");
var preview = document.getElementById("fileimg" + idx);
var output = document.getElementById("fileoutput" + idx);
output.value = file.name;
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function makeFileChooser(open) {
// get basic html from template
var thehtml = document.getElementById("fileChooserTemplate").innerHTML;
<i> </i> // replace placeholder {idx} by current index
<i> </i> thehtml = thehtml.replace(/{idx}/g, idx);
<i> </i> // create container for the filechooser group
<i> </i> var fileChooser = document.createElement("div");
<i> </i> fileChooser.className = "filechooser-group";
<i> </i> // set inner HTML of fieldset as prepared above
<i> </i> fileChooser.innerHTML = thehtml;
<i> </i> // append fieldset to form
<i> </i> document.querySelector("form").appendChild(fileChooser);
<i> </i> // enter number of files to hidden input
<i> </i> document.getElementById("nr-files").value = idx - 1;
<i> </i> idx++;
<i> </i> // move submit button to the end
<i> </i> var addBtn = document.getElementById("add-btn");
<i> </i> document.querySelector("form").appendChild(addBtn);
<i> </i> var submitBtn = document.getElementById("submit-btn");
<i> </i> document.querySelector("form").appendChild(submitBtn);
<i> </i> if (open) fileChooser.firstElementChild.click(); // changed here
<i> </i> }
<i> </i> makeFileChooser();
<i> </i></script>