How to add multiple input tag for image preview using Javascript [on hold]
up vote
-2
down vote
favorite
if (window.FileReader) {
var reader = new FileReader(), rFilter = /^(image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
reader.onload = function (oFREvent) {
preview = document.getElementById("uploadPreview")
preview.src = oFREvent.target.result;
preview.style.display = "block";
};
function doTest() {
if (document.getElementById("myfile").files.length === 0) { return; }
var file = document.getElementById("myfile").files[0];
if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }
reader.readAsDataURL(file);
}
} else {
alert("FileReader object not found :( nTry using Chrome");
}<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />
<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />Problem:
This code only display preview for first input tag not for rest.
Please help me to solve this Problem.
I want to preview image in multiple tags.
javascript html
asked 16 hours ago
Tejas Mandhare
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
put on hold as off-topic by Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher 7 hours ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher
If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
up vote
-2
down vote
favorite
if (window.FileReader) {
var reader = new FileReader(), rFilter = /^(image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
reader.onload = function (oFREvent) {
preview = document.getElementById("uploadPreview")
preview.src = oFREvent.target.result;
preview.style.display = "block";
};
function doTest() {
if (document.getElementById("myfile").files.length === 0) { return; }
var file = document.getElementById("myfile").files[0];
if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }
reader.readAsDataURL(file);
}
} else {
alert("FileReader object not found :( nTry using Chrome");
}<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />
<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />Problem:
This code only display preview for first input tag not for rest.
Please help me to solve this Problem.
I want to preview image in multiple tags.
javascript html
asked 16 hours ago
Tejas Mandhare
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
put on hold as off-topic by Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher 7 hours ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher
If this question can be reworded to fit the rules in the help center, please edit the question.
1
idof an HTML element in adocumentshould be unique.
– guest271314
15 hours ago
Hey, welcome to Code Review! This question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Graipher
7 hours ago
add a comment |
up vote
-2
down vote
favorite
up vote
-2
down vote
favorite
if (window.FileReader) {
var reader = new FileReader(), rFilter = /^(image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
reader.onload = function (oFREvent) {
preview = document.getElementById("uploadPreview")
preview.src = oFREvent.target.result;
preview.style.display = "block";
};
function doTest() {
if (document.getElementById("myfile").files.length === 0) { return; }
var file = document.getElementById("myfile").files[0];
if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }
reader.readAsDataURL(file);
}
} else {
alert("FileReader object not found :( nTry using Chrome");
}<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />
<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />Problem:
This code only display preview for first input tag not for rest.
Please help me to solve this Problem.
I want to preview image in multiple tags.
javascript html
asked 16 hours ago
Tejas Mandhare
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
if (window.FileReader) {
var reader = new FileReader(), rFilter = /^(image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
reader.onload = function (oFREvent) {
preview = document.getElementById("uploadPreview")
preview.src = oFREvent.target.result;
preview.style.display = "block";
};
function doTest() {
if (document.getElementById("myfile").files.length === 0) { return; }
var file = document.getElementById("myfile").files[0];
if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }
reader.readAsDataURL(file);
}
} else {
alert("FileReader object not found :( nTry using Chrome");
}<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />
<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />Problem:
This code only display preview for first input tag not for rest.
Please help me to solve this Problem.
I want to preview image in multiple tags.
if (window.FileReader) {
var reader = new FileReader(), rFilter = /^(image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
reader.onload = function (oFREvent) {
preview = document.getElementById("uploadPreview")
preview.src = oFREvent.target.result;
preview.style.display = "block";
};
function doTest() {
if (document.getElementById("myfile").files.length === 0) { return; }
var file = document.getElementById("myfile").files[0];
if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }
reader.readAsDataURL(file);
}
} else {
alert("FileReader object not found :( nTry using Chrome");
}<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />
<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" /> if (window.FileReader) {
var reader = new FileReader(), rFilter = /^(image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
reader.onload = function (oFREvent) {
preview = document.getElementById("uploadPreview")
preview.src = oFREvent.target.result;
preview.style.display = "block";
};
function doTest() {
if (document.getElementById("myfile").files.length === 0) { return; }
var file = document.getElementById("myfile").files[0];
if (!rFilter.test(file.type)) { alert("You must select a valid image file!"); return; }
reader.readAsDataURL(file);
}
} else {
alert("FileReader object not found :( nTry using Chrome");
}<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />
<p>
<input type="file" id="myfile" name="myfile" size="30" onchange="doTest()">
</p>
<img id="uploadPreview" src="" width="100%" style="display:none" />javascript html
javascript html
asked 16 hours ago
Tejas Mandhare
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 16 hours ago
Tejas Mandhare
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 16 hours ago
Tejas Mandhare
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 16 hours ago
Tejas Mandhare
1
asked 16 hours ago
Tejas Mandhare
1
1
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Tejas Mandhare is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
put on hold as off-topic by Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher 7 hours ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher
If this question can be reworded to fit the rules in the help center, please edit the question.
put on hold as off-topic by Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher 7 hours ago
This question appears to be off-topic. The users who voted to close gave this specific reason:
- "Code not implemented or not working as intended: Code Review is a community where programmers peer-review your working code to address issues such as security, maintainability, performance, and scalability. We require that the code be working correctly, to the best of the author's knowledge, before proceeding with a review." – Sᴀᴍ Onᴇᴌᴀ, 200_success, Zeta, Heslacher, Graipher
If this question can be reworded to fit the rules in the help center, please edit the question.
1
idof an HTML element in adocumentshould be unique.
– guest271314
15 hours ago
Hey, welcome to Code Review! This question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Graipher
7 hours ago
add a comment |
1
idof an HTML element in adocumentshould be unique.
– guest271314
15 hours ago
Hey, welcome to Code Review! This question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Graipher
7 hours ago
1
1
id of an HTML element in a document should be unique.– guest271314
15 hours ago
id of an HTML element in a document should be unique.– guest271314
15 hours ago
Hey, welcome to Code Review! This question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Graipher
7 hours ago
Hey, welcome to Code Review! This question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Graipher
7 hours ago
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
idof an HTML element in adocumentshould be unique.– guest271314
15 hours ago
Hey, welcome to Code Review! This question does not match what this site is about. Code Review is about improving existing, working code. Code Review is not the site to ask for help in fixing or changing what your code does. Once the code does what you want, we would love to help you do the same thing in a cleaner way! Please see our help center for more information.
– Graipher
7 hours ago