/    Sign up×
Community /Pin to ProfileBookmark

Issue in filename and img show

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>
[/code]

__(Added `[code]…[/code]` tags ~ MOD)__

to post a comment

87 Comments(s)

Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — I really hobe some one could help me out.
Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — Hi Snookiewar, do you want to have one output for each image or one output for all of them?

And I don't understand this at all:
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]
Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — 1st step: You need only one function for all input fields:
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;p class="name-output"&gt;&lt;/p&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;p class="name-output"&gt;&lt;/p&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;p class="name-output"&gt;&lt;/p&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;p class="name-output"&gt;&lt;/p&gt;
&lt;script&gt;
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);
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — Sempervivum

thanks...

But can i get the name into a input line " value " ?

And are there way to make the browse part to img click? so

i can click on image and i get the filebrowser

But its very nice.. much smallere code..
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — @Sempervivum#1602622

I have explain wrong..

in my box i have a Add image picture and what i want insted filebrowse button i want to click on Add image picture and its open filebrowser...

And then it do the thing you all ready have do for me.. 😀

And if i could get the name in input line and not in <P
Copy linkTweet thisAlerts:
@daveyerwinApr 08.2019 — " i want insted filebrowse button i want to click on Add image picture and its open filebrowser..."

browser security does not allow this

file can only be selected by user

not grammatically
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — DaveyErwin

I want to do the same when i click on button but insted for click on button then i click on my img

so the filebrowser open and i choose my file just like what Sempervivum have show me and i get filename to in my <p

but insted to put my filename into <p i hobe i could get it into input line.

iknow you can click on image then filebrowse open but i dont know it works whit function part.








Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — Check if this does what you intend to do:
&lt;input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput1"&gt;&lt;img src="yourimg.png"&gt;&lt;/label&gt;

You can hide the file input so that only your button image is visible.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — @Sempervivum#1602631

you first code its what i want in my img scr.. its show the picture..

and the filename show in <p >

but insted the filename in the input

<input name="pict" id="1" class="browse" type="text" Value="here i want the file name">
Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — Still don't underständ. My browser (Opera) displays it like this:

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-04-08/1554756030-210558-fileinput.png]

Filename right to the button "Datei auswählen" is created by the browser.

Triangel up at the right is the custom image in the label.

Filename below is inserted by the script.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — Yes

how do i explain my self..

here i get the Filename ---> <p class="name-output"></p>

but if i could get the Filename in this ---> <input name="pict" id="1" class="browse" type="text" value="Filename">

so i get input value = Filename
Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — PS: Read your last posting again: Do you want to add the filename as the value of an input instead of a paragraph?
Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — Out postings crossed. This is very easy. Just change paragraph to input and set value instead of textContent:
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;input class="name-output"&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;input class="name-output"&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;input class="name-output"&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;p class="name-output"&gt;&lt;/p&gt;
&lt;script&gt;
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);
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — Yes now i get the filename in to my input value..

This you make. can i still use?

<input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);">

<label for="fileinput1"><img src="yourimg.png"></label>

And can i remove the file browser with button and then only have img clicks that you have shown with that label


Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — Yes, if this is useful for you, you can keep it. You can hide the file input by e. g. this CSS:
input.browse {
display: none;
}

However you have to take into account the label by this Javascript:
var output = fileinput.nextElementSibling.nextElementSibling;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — Where i put

var output = fileinput.nextElementSibling.nextElementSibling;

not sure what you mean

så if i make this

<img class="feature_prev" src="aadrag.png" width="160" height="160" />

<input class="browse" type="file" onchange="previewFeatureFile(this);">

<input class="name-output">

so its will still show my picture and then i get filename in value

and if i make the class so i can hide the filebrowser button and input ?

its understand right
Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — It's in the javascript:
&lt;script&gt;
function previewFeatureFile(fileinput) {
var file = fileinput.files[0];
var preview = fileinput.previousElementSibling;
var output = fileinput.nextElementSibling.nextElementSibling; // &lt;-- 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);
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 08.2019 — i can not se what the difference in this code only you put the line in..

But now i not get the filename in to my input value.. maybe i jus have to have the filebrowser where its works

And its not change the picture.. then i click on this picture or filebrowse...

i am little confuse on this,, and maybe i have doit wrong...

Copy linkTweet thisAlerts:
@SempervivumApr 08.2019 — This is the complete code that works for me:
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput1"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input id="fileinput2" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput2"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input id="fileinput3" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput3"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;img class="feature_prev" src="aadrag.png" width="160" height="160" /&gt;
&lt;input id="fileinput4" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput4"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;script&gt;
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);
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 09.2019 — Sempervivum

Yes i can see its works but i mean there the picture shows. its where i want my : onclick so you have one picture and input line

then you click on picture then choose your file and its will change the picture to what picture you have choose..

Can it be like this ?

Thanks for your code, its look nice :D
Copy linkTweet thisAlerts:
@SempervivumApr 09.2019 — Ah, I think, now I've got it: Click the button, choose a picture, then replace the button image by the picture?

Try this:
&lt;input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput1"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;input id="fileinput2" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput2"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;input id="fileinput3" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput3"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;input id="fileinput4" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput4"&gt;&lt;img src="images/buttonup.png"&gt;&lt;/label&gt;
&lt;input class="name-output"&gt;
&lt;script&gt;
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);
}
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 09.2019 — Yes Sir 😄

Its just like what i want… Thank You very much… :D
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 14.2019 — Sempervivum


just a small question, can you possibly. make it so that you remove the boxes that are there and via a button then you can create a picture so every time you click on that button it creates a new image where you add the image you want?

so actually you can create 10 if you want or 20 but they each get their name in the input field

is it something you can or is it too extensive?
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 14.2019 — I have just found out this code you have make the last one...

If i put it between like this..

If i put my code in between form og table its not work in explore

and same think in chrome or edge but in chrome and edge its work whit form but not table

are there way to fix it?


<i>
</i>&lt;FORM METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data"&gt;
&lt;TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 BGCOLOR="#FFFFFF" WIDTH="720"&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;label for="fileinput1"&gt;&lt;img src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;input class="name-output"&gt;&lt;br&gt;&lt;/TD&gt;&lt;/TR&gt;
<br/>
<i> </i>&lt;TR&gt;&lt;TD&gt;&lt;input id="fileinput2" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;&lt;/TD&gt;
<i> </i>&lt;TD&gt;&lt;label for="fileinput2"&gt;&lt;img src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
<i> </i>&lt;TD&gt;&lt;input class="name-output"&gt;&lt;br&gt;&lt;/TD&gt;&lt;/TR&gt;
<i> </i>
<i> </i>&lt;TR&gt;&lt;TD&gt;&lt;input id="fileinput3" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;&lt;/TD&gt;
<i> </i>&lt;TD&gt;&lt;label for="fileinput3"&gt;&lt;img src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
<i> </i>&lt;TD&gt;&lt;input class="name-output"&gt;&lt;br&gt;&lt;/TD&gt;&lt;/TR&gt;
<i> </i>
<i> </i>&lt;TR&gt;&lt;TD&gt;&lt;input id="fileinput4" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;&lt;/TD&gt;
<i> </i>&lt;TD&gt;&lt;label for="fileinput4"&gt;&lt;img src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
<i> </i>&lt;TD&gt;&lt;input class="name-output"&gt;&lt;br&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/Form&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;br&gt;&lt;br&gt; <br/>
&lt;script&gt;
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);
}
}
&lt;/script&gt;

Edited by Sempervivum: Inserted code tags
Copy linkTweet thisAlerts:
@SempervivumApr 14.2019 — The current javascript depends on related elements fileinput, label and output being siblings. However in your new, table based HTML they are not. There are several ways to fix this. Instead of navigating through the DOM I've assigned indexed IDs to the elements.
&lt;FORM METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data"&gt;
&lt;TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 BGCOLOR="#FFFFFF" WIDTH="720"&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;input id="fileinput1" data-idx="1" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;/TD&gt;
&lt;TD&gt;&lt;label for="fileinput1"&gt;&lt;img id="fileimg1" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;input id="fileoutput1"&gt;&lt;br&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;input id="fileinput2" data-idx="2" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;/TD&gt;
&lt;TD&gt;&lt;label for="fileinput2"&gt;&lt;img id="fileimg2" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;input id="fileoutput2"&gt;&lt;br&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;input id="fileinput3" data-idx="3" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;/TD&gt;
&lt;TD&gt;&lt;label for="fileinput3"&gt;&lt;img id="fileimg3" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;input id="fileoutput3"&gt;&lt;br&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;input id="fileinput4" data-idx="3" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;/TD&gt;
&lt;TD&gt;&lt;label for="fileinput4"&gt;&lt;img id="fileimg4" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;&lt;/TD&gt;
&lt;TD&gt;&lt;input id="fileoutput4"&gt;&lt;br&gt;&lt;/TD&gt;
&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/Form&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;

<i> </i>&lt;br&gt;&lt;br&gt;

<i> </i>&lt;script&gt;
<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>&lt;/script&gt;

BTW: Please insert code tags when posting code, they will improve readability:

https://www.bbcode.org/examples/?id=15
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 14.2019 — Thanks...

i will try it..


are there a way to make a button then i click on it , its make at pictbox an open file dialogi window and i choose the pict.

and every time i click on button its make a new pictbox a give them a difference name and id ?
Copy linkTweet thisAlerts:
@SempervivumApr 14.2019 — Yes, that's fairly easy and frequently required. And again there are several ways to do it. I took the chance and additionally changed the HTML as yours was outdated. Check if you can go with it.
&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Test Fileinput&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;style&gt;
label&gt;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>&lt;/style&gt;
<i> </i>&lt;template id="fileChooserTemplate"&gt;
<i> </i> &lt;input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
<i> </i> &lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
<i> </i> &lt;input id="fileoutput{idx}"&gt;
<i> </i>&lt;/template&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data"&gt;
&lt;/form&gt;
&lt;script&gt;
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>&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
I used a solution that's based on a template. Thus the HTML can be adjusted easily.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 15.2019 — Thanks very much 😀 … its work very nice..

I thing i have to buy you som beer or vine 😁

But how can i see the name or number on the input there show img filename

and the same thing on the other lines

so i can save it in my database ?

Copy linkTweet thisAlerts:
@SempervivumApr 15.2019 — What do you mean "name or number"? This: fileinput[b]2[/b]? You can easily add an additional hidden input and put any information you need into it.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 15.2019 — i mean

every time its make a new input and img

how can i see what name its get...

i mean.. Ex. img1, img2 i hope it makes sense
Copy linkTweet thisAlerts:
@SempervivumApr 15.2019 — Unfortunately I still don't understand. Maybe you mean the name attribute which is necessary for accessing the value in the server side script, e. g.:
&lt;input id="fileoutput1" name="img1"&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 15.2019 — in the input name="img1" but its will be same name on all of the created input name="img1"

how to get defference name in name="?"
Copy linkTweet thisAlerts:
@SempervivumApr 15.2019 — Change it in the template and it will be dynamic:
&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}" name="img{idx}"&gt;
&lt;/template&gt;

{idx} will be replaced by the current, dynamic index or number
Copy linkTweet thisAlerts:
@SempervivumApr 15.2019 — Remark: It might be useful for you that the filename is also present in the POST variable FILES when you upload the images to the server. Output of PHP:
array (size=1)
'files' =&gt;
array (size=5)
'name' =&gt;
array (size=1)
0 =&gt; string 'DSCF2729_ji_ji.jpg' (length=18)
'type' =&gt;
array (size=1)
0 =&gt; string 'image/jpeg' (length=10)
'tmp_name' =&gt;
array (size=1)
0 =&gt; string 'C:WindowsTempphp546.tmp' (length=26)
'error' =&gt;
array (size=1)
0 =&gt; int 0
'size' =&gt;
array (size=1)
0 =&gt; int 66064
I assume that the same array is available in your ASP script.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 16.2019 — Where i put what code in???

On JavaScript or ???

I get and error then i try to opload file on my phone

Persits.PdfManager.1 error ' 800a0001'

The sytem cannot find the file specified

I think its must be input line where miss where its show full path " C:billedertest.jpg"
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 16.2019 — <i>
</i>&lt;template id="fileChooserTemplate"&gt;
** &lt;input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}"&gt;
&lt;/template&gt;



how do i get the full path on picture where it is uploaded from

eg.

c: images test.jpg

I got error then i try to opload files.. from my mobile

but if i doit from my pc its no error maybe it its are on the same net where my server is...

and what i can understand from the error its because its not get the path of the picture i have choose
Copy linkTweet thisAlerts:
@SempervivumApr 16.2019 — how do i get the full path on picture where it is uploaded from

eg.

c: images test.jpg[/quote]
AFAIK it is not possible in Javascript to get the full path, for security reasons.

I got error then i try to opload files.. from my mobile

but if i doit from my pc its no error maybe it its are on the same net where my server is...[/quote]
Please describe in detail:

What steps did you execute when you tried to upload?

What error message did you get?

What type of mobile did you use (Android, iOS, ...)?
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 16.2019 — I get and error then i try to opload file on my phone

Persits.PdfManager.1 error ' 800a0001'

The sytem cannot find the file specified

/demo_makeinvoice.asp, line 124

And in the Line 124 its.
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"&amp; oupload.form("SNr") &amp;"" &amp; oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"


and its on IOS . Iphone

and doesnt matter i use chrome or safai on iPhone then i got the error.

But if i doit again and choose the same picture

and click on my button " create pdf " so its works.. but not the first time i choose the picture.

But i dont have probs on my pc

And all the code works in Edge and chrome… in explore dont work thit img click,,

Just a litle info.. doesnt matter its work in explore.. not many there use it more

<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"&amp; oupload.form("SNr") &amp;"" &amp; oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"


i use the code you have give med to choose the picture.

and then i click on my botton " save pdf-opload pict"

its go to my page - demo_makeinvoice.asp

And in this page: ( demo_makeinvoice.asp )

<i>
</i>&lt;%@ Language=VBScript %&gt;
&lt;link rel="stylesheet" type="text/css" href="draganddrop.css" /&gt;
&lt;%
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/"&amp; Map &amp; 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/"&amp; Map &amp; UserMap
End Sub



'***********************

set oUpload = Server.CreateObject("Persits.Upload")
oUpload.Save("c:FarmsSubdomainappiweb" &amp; 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 &lt;&gt; "UNKNOWN" then
' lImageScale = 1
' if oLogo.ImageHeight &gt; 100 then
' lImageScale = 100 / oLogo.ImageHeight
' end if
' if oLogo.ImageWidth &gt; 240 then
' lImageScale2 = 240 / oLogo.ImageWidth
' if lImageScale2 &lt; lImageScale then
' lImageScale = lImageScale2
' end if
' end if
' lImageScale = round(lImageScale, 2)
' sImageParam = "x=54;y=660;scalex=" &amp; lImageScale &amp; ";scaley=" &amp; 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 ""&amp; oupload.form("ProjectName") &amp;"", "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/@_"&amp; oupload.form("SNr") &amp;"" &amp; 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 &amp; oupload.form("Product" &amp; i) &amp; vbcrlf
<i> </i> sQtyBox = sQtyBox &amp; oupload.form("Qty" &amp; i) &amp; vbcrlf
<i> </i> Response.Write i
<i> </i> on error resume next 'skip type conversion errors
<i> </i> Price = oUpload.Form("Price" &amp; i)
<i> </i> Price = "$ " &amp; oPDF.FormatNumber(Price, "precision=2, delimiter=true")
<i> </i> sPriceBox = sPriceBox &amp; Price &amp; vbcrlf
<i> </i> Amount = oUpload.Form("Amount" &amp; i)
<i> </i> Amount = "$ " &amp; oPDF.FormatNumber(Amount, "precision=2, delimiter=true")
<i> </i> sAmountBox = sAmountBox &amp; Amount &amp; 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/@_"&amp; oupload.form("SNr") &amp;"/"&amp; "SNr_" &amp; oName &amp; ".pdf" ), False )

Response.Write "Success! Download your PDF file &lt;A HREF=""/rapporter/@sagsrapport/@_"&amp; oupload.form("SNr") &amp;"" &amp; Filename &amp; """&gt;here&lt;/A&gt;"

response.Write "&lt;br&gt;"
%&gt;

Copy linkTweet thisAlerts:
@SempervivumApr 17.2019 — No one in this forum who has knowledge about ASP?

One approach might be to output the result of MapPath:
Server.MapPath( "/rapporter/@sagsrapport/@_"&amp; oupload.form("SNr") &amp;"" &amp; oupload.form("Pict1"))
What is "SNr" and "Pict1"?
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 17.2019 — SNr = name of my input line " like a subject of title of it " and Pict1 its name on my picture line

i just use the first code you give me, because the last one you have give me can i not use right now

because i have not find out to make multiply on my save pdf .asp so every time i get a picturebox this IDnr so i not get it in my save asp so i just try to get this on to work and if i get it to work so i will try the last code.

and i can not get it to work whit opload file then i use the last code. but i will use it then i have this one to work

Its so i get idea how to get it all work.

the result of the mapPath i works on computer but not on iPhone. and i not sure how to get this fix..

i will try to make at simple asp.site to opload simple files and check it on my phone. if this work so its something i my code there go wrong

i have think abourt i could take the MapPath in to Session and then i get it there then put it in to the line

so i call it 2 times

if i do it from me phone, 1 time i get error but if i go back and try again and choose the same picture so its work..

Copy linkTweet thisAlerts:
@SnookiewarauthorApr 19.2019 — Sempervivum

I will now use the last code you have make to me...

This One here...

<i>
</i>&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Test Fileinput&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;style&gt;
label&gt;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>}
&lt;/style&gt;
&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}" name="img{idx}"&gt;
&lt;/template&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form METHOD="POST" ACTION="demo_makeinvoice.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data"&gt;
&lt;/form&gt;
&lt;script&gt;
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();
&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;


Are there solution to make a button , then you click on it its send you to a preview site and there i can click on save it or cancel….

So you can se how its look before it will besave...

Do you now the code to the preview site?
Copy linkTweet thisAlerts:
@SempervivumApr 19.2019 — Yes, you can easily add a submit button to the form and then can send it to the preview site. In the javascript we have to shift that button to the end of the form when a new filechooser group is added.
&lt;form METHOD="POST" ACTION="show-preview.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data"&gt;
&lt;input type="submit" id="submit-btn"&gt;
&lt;/form&gt;
&lt;script&gt;
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>&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 19.2019 — okay Thanks..

So in my preview site there can i make like this

Request.form("img{idx}") but i replace {idx} to 1 or 2 or 3 ?
Copy linkTweet thisAlerts:
@SempervivumApr 19.2019 — Yes, this should be possible.
Copy linkTweet thisAlerts:
@SempervivumApr 19.2019 — BTW: Did you fix the issue at uploading from iPhone?
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 19.2019 — Okay Thanks...

No not yet.. i will now get this code to work.

But i maybe have found the solutions

In description from Asppdf

are this line wrong
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "/rapporter/@sagsrapport/@_"&amp; oupload.form("SNr") &amp;"" &amp; oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"


What i can understand from the description i have to make like this
<i>
</i>Set oLogo = oDoc.OpenImage( Server.MapPath( "http://yourwebsite.com/rapporter/@sagsrapport/@_"&amp; oupload.form("SNr") &amp;"" &amp; oupload.form("Pict1")))
oCanvas.DrawImage oLogo, "x=54;y=400;ScaleX=.1,Scaley=.2;"

Or i set C:

so your write the all mappath string its should be the solutions.

But i have not try. because i get some other problem.. then i make a pdf...

If my text are long then its overlap my next text not auto size it..

So i just try to make a table and not use cells and rows and use y and x cordination but make a table then use x and y cordination and let table do the job and autosize..

Then i have to make all code over and start from scratch so i decide to use the last code from you so i do from this so i not have to make it twice :D
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 19.2019 — hmm.. not working whit
<i>
</i>Response.Write Request.Form("img1")

on my preview.asp

Its blank are the jave there doit so its not work..

If i make a simple form and write something at makeit same line then its show the text from img1
Copy linkTweet thisAlerts:
@DrammerApr 19.2019 — Asppdf wrote the ultimate solution to the problem.
Copy linkTweet thisAlerts:
@SempervivumApr 19.2019 — In posting #34 I posted this template:
&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}" name="img{idx}"&gt;
&lt;/template&gt;
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:
&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" name="img{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}"&gt;
&lt;/template&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 20.2019 — okay..

But i have try to only have this Form

<i>
</i>&lt;head&gt;
&lt;meta charset="iso-8859-1"&gt;
&lt;title&gt;Test Fileinput&lt;/title&gt;
&lt;meta name="viewport"&gt;
&lt;style&gt;
label&gt;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>}
&lt;/style&gt;
&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}" name="img{idx}" Class="browse"&gt; <br/>
&lt;textarea id="textoutput{idx}" data-idx="{idx}" rows="10" cols="50" class="Text"&gt;tilføj tekst&lt;/textarea&gt;
&lt;/template&gt;
&lt;/head&gt;


&lt;form METHOD="POST" ACTION="show-preview.asp" NAME="InvoiceForm" ENCTYPE="multipart/form-data"&gt;
&lt;table width="50%" cellspacing="0" cellpadding="2" border="0" Align="center"&gt;
&lt;tr&gt;&lt;td width="100%" align="center" valign="top"&gt;&lt;/td&gt;

&lt;%
Response.Write "&lt;tr&gt;&lt;td width=""15%"" class=""Transparent1"" valign=""middle""&gt;&lt;b&gt;Project name :&lt;/b&gt;&lt;/Font&gt;&lt;/td&gt;&lt;td width=""35%"" class=""PageBox"" valign=""middle""&gt;&lt;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""&gt;&lt;/td&gt;&lt;/tr&gt;" &amp; vbCrLf

%&gt;

<i> </i> &lt;/td&gt;&lt;/tr&gt;
<i> </i> &lt;/table&gt;
<i> </i>
&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;br&gt; <br/>
&lt;script&gt;
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();
&lt;/script&gt;
&lt;input type="submit" id="submit-btn"&gt;
&lt;/form&gt;

And in my preview.asp.

i have this

<i>
</i>Response.Write "project name: " &amp; Request.Form("Projectname")


and its show nothing..

So i not get info from form.. and why i dont know
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 20.2019 — I have found why i not can get any info...

If if move this :

ENCTYPE="multipart/form-data"

From my form its works but that info its use ??

else can i not opload the files .right ?
Copy linkTweet thisAlerts:
@SempervivumApr 20.2019 — If if move this : ENCTYPE="multipart/form-data"[/quote]
You mean: "remove"? I experienced the same.

ENCTYPE="multipart/form-data" is needed when uploading files:

https://developer.mozilla.org/de/docs/Web/HTML/Element/form
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 20.2019 — yes this can i see.

But then i use it so can i not use

<i>
</i>Response.Write "project name: " &amp; Request.Form("Projectname")


Are there a another solutions to doit..

do you know how to do
Copy linkTweet thisAlerts:
@SempervivumApr 20.2019 — Currently I don't understand why you create this line:
Response.Write "&lt;tr&gt;&lt;td width=""15%"" class=""Transparent1"" valign=""middle""&gt;&lt;b&gt;Project name :&lt;/b&gt;&lt;/Font&gt;&lt;/td&gt;&lt;td width=""35%"" class=""PageBox"" valign=""middle""&gt;&lt;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""&gt;&lt;/td&gt;&lt;/tr&gt;" &amp; vbCrLf
by ASP?

And I don't get why you are using a table for your form. IMO this is not necessary.

And you should place the Javascript below the table, the current structure is confusing.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 20.2019 — Its a test for find the solutions to use ENCTYPE="multipart/form-data"

I use the code whit java script what you have made the last one...

But its not working.

So i make at test site to find out how i could get the value from a input to another page from the form there use

ENCTYPE="multipart/form-data"

So its only to find the solutions.

I still use your code
Copy linkTweet thisAlerts:
@SempervivumApr 20.2019 — Did I understand you correctly? Earlier you wrote that creating the PDF works roughly with a previous form, extension: iPhone.

But it does not work with the dynamic form (with template).

If so I recommend to focus on asppdf and get the dynamic form working. Please post your previous form where creating the PDF works.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 21.2019 — 

Sorry my late reply

But I post it later.

I build the asp page again

for I have probs with that folder

It continues to tease

also on pc now ..

So I'm just trying another solution to create that mappath so it works ..

Must throw it up as soon as I have solved that part ...
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 22.2019 — 
Before making the code it created a new picture box every time you add a picture

there I called my input "Pict1"

But now it's called img {idx}

but when I make a Request ("img1") it fails

what should i write in my Request to get the image in the image box img {idx}
Copy linkTweet thisAlerts:
@SempervivumApr 22.2019 — As I wrote previously I posted a wrong template as I was unsure about your intention. This should be correct:
&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" name="img{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt; &lt;!-- name="img{idx}" added here --&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}" Class="browse"&gt; &lt;!-- name="img{idx}" removed here --&gt;

<i> </i>&lt;textarea id="textoutput{idx}" data-idx="{idx}" rows="10" cols="50" class="Text"&gt;tilføj tekst&lt;/textarea&gt;
&lt;/template&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 22.2019 — okay and my request will look like this

Request.("img1")

and if there are 2 picture

then next

Request("img2")

have i understand it right ?
Copy linkTweet thisAlerts:
@SempervivumApr 22.2019 — Yes, as far as I understand it this should be correct.
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 23.2019 — No not work..

i cannot use this

oupload.form("img1") its says no files

So what its the name on my picturebox every time i upload picture to my box...

What i understand its will be img and a number every time i make a picture box then img1+1 so i have 2 so

img1 and img2???

But what are the name on my input line there i get the filename on picture ????
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 24.2019 — <i>
</i>&lt;template id="fileChooserTemplate"&gt;
&lt;input id="fileinput{idx}" name="img{idx}" data-idx="{idx}" class="browse" type="file" onchange="previewFeatureFile(this);"&gt; &lt;!-- name="img{idx}" added here --&gt;
&lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/label&gt;
&lt;input id="fileoutput{idx}" Class="browse"&gt; 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&lt;!-- name="img{idx}" removed here --&gt;

&lt;textarea id="textoutput{idx}" data-idx="{idx}" rows="10" cols="50" class="Text"&gt;tilføj tekst&lt;/textarea&gt;
&lt;/template&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 24.2019 — @Sempervivum#1602841 this code where do i put it ???

And what will the code do?
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 24.2019 — @Snookiewar#1603062

I find the soulotion why its not work
<i>
</i>&lt;input id="fileoutput{idx}" name="fileoutput{idx}"&gt; &lt;!-- Its miss the name="" now its works on that.


One question

Are where way to in my save.asp to check how many name="fileoutput{idx}" there add on form so if where are add 4 so

in my save.asp can get fileoutput1, fileoutput2, fileoutput3, fileoutput4
Copy linkTweet thisAlerts:
@TehseenApr 24.2019 — @Sempervivum#160
Copy linkTweet thisAlerts:
@SnookiewarauthorApr 24.2019 — @Tehseen#1603070

I cannot use this video ????
Copy linkTweet thisAlerts:
@SempervivumApr 25.2019 — Are where way to in my save.asp to check how many name="fileoutput{idx}" there add on form[/quote]
As I have no knowledge of ASP I am only able to give you some pseudo code:
<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 */
Copy linkTweet thisAlerts:
@IndependentCPApr 29.2019 — i use this code for my website.
Copy linkTweet thisAlerts:
@pandeyacademyMay 02.2019 — You can visit my site and flow image code step by step.

Get in touch with more info:-http://www.pandeyacademy.org/
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 06.2019 — @IndependentCP#1603177

what have this done whit PDF ?????
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 06.2019 — @Sempervivum#1603089

sorry.. i have been on a trip..

but its not work.. sorry
Copy linkTweet thisAlerts:
@SempervivumMay 06.2019 — I remember that I didn't understand the code you posted and I didn't know the source of this code. However I know that you use ASPPDF. Do you also use use ASPUPLOAD? If so it would be fairly easy to save the images and then use them in ASPPDF. The procedure is described in the docu:

http://www.aspupload.com/manual_simple.html

http://www.aspupload.com/manual_memory.html

http://www.asppdf.com/manual_05.html

http://support.persits.com/pdf/demo_invoice.asp

Maybe there is a way to get the uploaded images in ASPDF directly but I didn't find a resource for this.
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 09.2019 — Sempervivum

I mean in the script you have make there i add a new image every time i click on piturebox.

are there way to count how many pictures there are add.?


I mean in the script you have made where it adds a new image every time I click on the picture box

so the one in the script counts the number of pictures added.

Then I will make an asp code that intercepts that number and makes it in a session so I can use it on the next page as well.
Copy linkTweet thisAlerts:
@SempervivumMay 09.2019 — That can be done easily. I added two lines and marked the by "add this":
&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Test Fileinput&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;style&gt;
label&gt;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>&lt;/style&gt;
<i> </i>&lt;template id="fileChooserTemplate"&gt;
<i> </i> &lt;input id="fileinput{idx}" name="img-file-{idx}" data-idx="{idx}" class="browse" type="file"
<i> </i> onchange="previewFeatureFile(this);"&gt;
<i> </i> &lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
<i> </i> &lt;input id="fileoutput{idx}" name="img-name-{idx}"&gt;
<i> </i>&lt;/template&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form method="POST" action="asp-uploadUpload1.asp" enctype="multipart/form-data"&gt;
&lt;input type="text" id="nr-files" name="nr-files" hidden value="0"&gt; &lt;!-- add this --&gt;
&lt;input type="submit" id="submit-btn"&gt;
&lt;/form&gt;
&lt;script&gt;
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>&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 11.2019 — Thanks.. :D

i have another question… its not to the same thing (pdf file)

Its something to user can upload one file an time

Its to another solutions. its use to users can upload a file. and only 1 file

Here my form to choose the file i want to opload

<head>

<meta charset="iso-8859-1">

<title>Test Fileinput</title>

<meta name="viewport">

<style>

label>img {

max-width: 200px;

}

label {
margin-right: 20px;
}

input.browse {
display: none;
}

.filechooser-group {
display: flex;
align-items: center;
justify-content: center;
}

</style>

<FORM METHOD="POST" ACTION="_pictupload.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" type="file" onchange="previewFeatureFile(this);">

</TD>

<TD><label for="fileinput1"><img id="fileimg1" src="/images/aadrag.png" width="160" height="160"></label></TD>

<TD><input id="fileoutput1" name="fileoutput1"><br></TD>

</TR>

<TR>

<br><TD><INPUT TYPE="SUBMIT" VALUE="Upload file">

</TD>

</TABLE>

</Form>

<br><br><br>

<script>

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);

}

}

</script>

'///////////////////////////////////////////////////////////////////////////////



My code to opload the file

<%

Dim objUpload

Set objUpload = Server.CreateObject("Persits.Upload")

objUpload.SetMaxSize 9000000, True

'objUpload.AllowedFilesList = "gif, bmp, jpg, png"

On Error Resume Next

Dim strUploadPath ' Definer en variabel til stien

strUploadPath = "/@members/"

Dim intFileCount

intFileCount = objUpload.Save(Server.MapPath(strUploadPath))

If Err.Number = 8 Then

Response.Write "Filen er for stor. Prøv igen."

Else

If Err <> 0 Then

Response.Write "Der opstod en fejl : " & Err.Description

Else

Response.Write "<br>" & intFileCount & " fil(er) uploadet.<br>" & vbCrLf

Response.Write "<br>Vent et øjeblik og du bliver stillet tilbage til medarbejd list" & vbCrLf

End If

End If

On Error Goto 0

Set objUpload = Nothing

%>


My problem its.

Its not upload file.. its gets nothing to upload.

And i cannot see what its wrong
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 27.2019 — @Sempervivum#1603516

sorry my late answer..

Then i open the page.. then the value of th nr-files are 1

and then i add one picture its change to 2

Its make nr-files to 1 before i have add one picture. how to fix to 0 before i add
Copy linkTweet thisAlerts:
@SempervivumMay 27.2019 — The variable idx is initialised by 1:
var idx = 1;
However, the input containing the number of is set to idx-1:
document.getElementById("nr-files").value = idx - 1; // add this
Initial status: One filechooser visible - no file selected yet - number of files = 0

After the first file has been selected: Two filechoosers visible - one file selected - number of files = 1

and so on ...

Should be OK this way.
Copy linkTweet thisAlerts:
@ariyanbetonMay 28.2019 — Check if this does what you intend to do:

<input id="fileinput1" class="browse" type="file" onchange="previewFeatureFile(this);">

<label for="fileinput1"><img src="yourimg.png"></label>

You can hide the file input so that only your[url=http://nilpala.com]قیر[/url]button image is visible.
Copy linkTweet thisAlerts:
@4squarelogicMay 29.2019 — Thanks for sharing such kind of information.
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 30.2019 — @Sempervivum#1604073

Thanks.. will try..

Can you remember the code you made to me where i click on imagebox then i could upload a images.

and its make a new image box..

Could it be then i go to page there are a button then i click on this then i first add a picturebox

and then i click on button again then its add 1 more picture box..

so its not add a picture box then i have click on picturebox and upload

Right now. ihave picturebox then i click on it i can uploadpicture then its done so its make a new picturebox

there i have to click on it so i can upload picture.

I want to have a button insted so then i click on button its make new picturebox else the same code there its give fileoutput1, fileoutput2, fileoutput3 and ect.
Copy linkTweet thisAlerts:
@SempervivumMay 30.2019 — Try this:
&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Test Fileinput&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;style&gt;
label&gt;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>&lt;/style&gt;
<i> </i>&lt;template id="fileChooserTemplate"&gt;
<i> </i> &lt;input id="fileinput{idx}" name="img-file-{idx}" data-idx="{idx}" class="browse" type="file"
<i> </i> onchange="previewFeatureFile(this);"&gt;
<i> </i> &lt;label for="fileinput{idx}"&gt;&lt;img id="fileimg{idx}" src="aadrag.png" width="160" height="160"&gt;&lt;/label&gt;
<i> </i> &lt;input id="fileoutput{idx}" name="img-name-{idx}"&gt;
<i> </i>&lt;/template&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form method="POST" action="asp-uploadUpload1.asp" enctype="multipart/form-data"&gt;
&lt;input type="text" id="nr-files" name="nr-files" hidden value="0"&gt;
&lt;input type="button" id="add-btn" value="Add file" onclick="makeFileChooser();"&gt;
&lt;input type="submit" id="submit-btn"&gt;
&lt;/form&gt;
&lt;script&gt;
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>&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 31.2019 — @Sempervivum#1604206

Yes like this… but there are only one bug..

if i click on picturebox and choose a picture

then its not count. on the first box..

and then i click on button and the new picturebox show then count its 1 but

there are 2 box. so the first box have no number

So if my count its 2. then there are 3 picturebox..

Could it be like this:

you only can click on button to add a picture. and not on picturebox .

so i think if i click on button then choose af picture and picture shows in first picture box

and if i click on button again and choose a picture then its add this picture and count its 2

Hobe you understand me.
Copy linkTweet thisAlerts:
@SempervivumMay 31.2019 — Try to change this:
// enter number of files to hidden input
document.getElementById("nr-files").value = idx - 1;

to this:
// enter number of files to hidden input
document.getElementById("nr-files").value = idx;
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 31.2019 — @Sempervivum#1604228

yes now its count right..

Are its possible then you click on button then op dialog window and its add the picture

so you dont have to first click on button then on picture box to add picture..
Copy linkTweet thisAlerts:
@SempervivumMay 31.2019 — That's fairly easy. I've marked the lines I changed by "changed here":
&lt;body&gt;
&lt;form method="POST" action="asp-uploadUpload1.asp" enctype="multipart/form-data"&gt;
&lt;input type="text" id="nr-files" name="nr-files" hidden value="0"&gt;
&lt;input type="button" id="add-btn" value="Add file" onclick="makeFileChooser(true);"&gt;&lt;!-- changed here --&gt;
&lt;input type="submit" id="submit-btn"&gt;
&lt;/form&gt;
&lt;script&gt;
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>&lt;/script&gt;
Copy linkTweet thisAlerts:
@SnookiewarauthorMay 31.2019 — @Sempervivum#1604239

Yes. but its stil start whit picturebox on the site... and if i click on this and add picture its not count..

What i want there are no picturebox before i click on button..

So then i go to the site.. i can choose add file or save..

and then i click add file, then i choose a file.. and then the file shows.. and if i want add more file then click on button..

no imagebox shows only thefile i have add and the button to add nad send
×

Success!

Help @Snookiewar spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...