View multiple browsed images with unique ID - javascript

After searching in stackoverflow, finally I found a code that can browse multiple images and preview them one-by one. However, when I inspected the element in the browser, all the id for each image is same.
So, I hope anyone can help me how to modify this code so that each image which is browsed has its own unique id.
Here is the fiddle:
And
Here is the html form:
<input id="imgInput" type="file" name="file[]" multiple style="display:none;"/>
<input type="button" onclick="$('#imgInput').click();" value="Choose File" />
<output id="result" ></output>
<div style="margin-top:150px;" id="uploadedcontent"></div>
Here is the JS code:
var ftype = new Array();
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
var count = 0;
var count1 = 0;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
div.innerHTML = "<img id='img_" + count + "' class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}

It just needs the count used on the div, added to the img just a tiny change see fiddle below
http://jsfiddle.net/ekzfz9ck/4/
var ftype = new Array(), count1=0;
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
var count = 0;
var count1 = 0;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
count1++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
// below we add the id using the count used for the div;
div.innerHTML = "<img id='img_" + count1 + "' class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}

Related

Select one Particular sheet instead of listing all the sheets. Google app script, Code

I got this code from here : Display Spreadsheet Data to HTML Table
thanks to the great work of Cooper.
function htmlSpreadsheet(ssO) {
var br='<br />';
var s='';
var hdrRows=1;
var ss=SpreadsheetApp.openById(ssO.id);
var sht=ss.getSheetByName(ssO.name);
var rng=sht.getDataRange();
var rngA=rng.getValues();
s+='<table>';
for(var i=0;i<rngA.length;i++)
{
s+='<tr>';
for(var j=0;j<rngA[i].length;j++)
{
if(i<hdrRows)
{
s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
else
{
s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
s+='</body></html>';
var namehl=Utilities.formatString('<h1>%s</h1>', ss.getName());
var shnamehl=Utilities.formatString('<h2>%s</h2>', sht.getName());
var opO={hl:s,name:namehl,shname:shnamehl};
return opO;
}
function updateSpreadsheet(updObj) {
var i=updObj.rowIndex;
var j=updObj.colIndex;
var value=updObj.value;
var ss=SpreadsheetApp.openById(updObj.id);
var sht=ss.getSheetByName(updObj.name);
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}
function doGet() {
var userInterface=HtmlService.createHtmlOutputFromFile('htmlss').setWidth(1000).setHeight(450);
return userInterface.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getAllSpreadSheets() {
var files=DriveApp.getFilesByType(MimeType.GOOGLE_SHEETS);
var s = '';
var vA=[['Select Spreadsheet',0]];
while(files.hasNext())
{
var file = files.next();
var fileName=file.getName();
var fileId=file.getId();
vA.push([fileName,fileId]);
}
//return vA;
return {array:vA,type:'sel1'};
}
//working on this function right now 2017/11/08
function getAllSheets(ssO) {
var ss=SpreadsheetApp.openById(ssO.id);
var allSheets=ss.getSheets();
var vA=[['Select Sheet']];
for(var i=0;i<allSheets.length;i++)
{
var name=allSheets[i].getName();
vA.push([name]);
}
return {array:vA,type:'sel2'};
}
What I am trying to do is on a Single sheet. That is I don't want to browse all sheets and select among them~
I have tried modifying this code
function getAllSpreadSheets() {
var files=DriveApp.getFilesByType(MimeType.GOOGLE_SHEETS);
var s = '';
// var vA=[['Select Spreadsheet',0]];
while(files.hasNext())
{
// var file = files.next();
var fileName=file.getName();
var fileId=file.getId();
vA.push([fileName,fileId]);
}
//return vA;
return {array:vA,type:'sel1'};
}
I have used sheet Id instead of file.getId(), But It just don't work.
Please help me.
Change:
var files = DriveApp.getFilesByType(MimeType.GOOGLE_SHEETS)
To getFileById():
var file = DriveApp.getFileById("sheet Id");
Then remove the loop:
function getSingleSpreadSheet() {
var file = DriveApp.getFileById("sheet Id")
var fileName = file.getName()
var fileId = file.getId()
var vA = []
vA.push([fileName, fileId])
return {
array: vA,
type:'sel1'
}
}

Display list of images by image count variable

I have this variables:
var imagesCount = 3;
var imageUrl = "http://www.example.com/";
var imageId = "000-000-000";
and I need to get a list like this:
<img src="http://www.example.com/GetImage.aspx?cid=000-000-000&num=1" />
<img src="http://www.example.com/GetImage.aspx?cid=000-000-000&num=2" />
<img src="http://www.example.com/GetImage.aspx?cid=000-000-000&num=3" />
Any help please.
Here implementation on JS, without jQuery.
var imagesCount = 3,
imageUrl = "http://www.example.com/GetImage.aspx?cid=",
imageId = "000-000-000",
fragment = document.createDocumentFragment(),
i,
image;
for (i = 1; i <= imagesCount; i++) {
image = document.createElement('img');
image.setAttribute('src', imageUrl + imageId + '&num=' + i);
fragment.appendChild(image);
}
document.getElementById('images').appendChild(fragment)
<div id="images"></div>
for (i = 1; i <= imagesCount; i++) {
document.writeln(imageUrl + "GetImage.aspx?cid=" + imageId + "&num=" + i + " />");
}
Just use this JS
for (var i=1; i <= imagesCount; i++){
var img = "<img src='http: //www.example. com/GetImage.aspx?cid=000-000-000&num="+ i +" />";
$(".yourContainerClass").append(img) ;
}
Must have jquery for this to work
I'm not sure whether I get your question right, but shouldn't the following work?
for(var i=1 ; i <= imagesCount; i++){
var img = $('<img />');
img.attr('src', imageUrl + "GetImage.aspx?cid=" + imageId + "&num=" + i);
img.appendTo('#imagediv');
}

Reset button for each preview image

I don't want to create a remove button; for each images which are previewed before they are going to be uploaded. The reason is because each image has a unique id, so that if it uses a remove button it will mess up the id arrangement when one of the images is removed.
I know this is a little complicated.
How to create a reset button for each images? So, when the user click the reset button, it will open the window of the user computer to pick the new image, and the id of the new picked image is still the same as before.
Here is my code:
var ftype = new Array(), count1 = 0;
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
var count = 0;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
count1++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
div.innerHTML = "<img id='img_" + count1 + "' class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}
MY FIDDLE

Images preview before uploading

So I have here my upload script and it has a function that the user can preview selected images before uploading but my problem is that every time I'll upload all images available for preview it is always the last file chosen.
Heres my code:
<script type="text/javascript">
$(document).ready(function(){
function readURL(input){
if(input.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$(".form-holder").append("<img class='prev' />")
$(".prev").attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#btn_up").change(function(){
readURL(this);
});
});
</script>
Try This Code
HTML
<input id="imgInput" type="file" name="file[]" multiple style="display:none;"/>
<input type="button" onclick="$('#imgInput').click();" value="Choose File" />
<output id="result" ></output>
<div style="margin-top:150px;" id="uploadedcontent"></div>
JS
var ftype = new Array();
$("#imgInput").change(function () {
readURL(this);
});
function readURL(input) {
var files = input.files;
var output = document.getElementById("result");
var count = 0;
var count1 = 0;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";
}
output.insertBefore(div, null);
});
picReader.readAsDataURL(file);
}
}
$('body').on('click','.boxclose','',function(e){
var spanid = $(this).attr('id');
var splitval = spanid.split('_');
$('#div_' + splitval[1]).remove();
});
DEMO HERE

javascript inline code link generating chrome extension

I'm trying to make an extension for chrome that grabs data from a website and I'm having trouble making the links clickable. I CAN NOT use javascript inside the link (ex: href="javascript:myfunction(param);")
I need to create a div for each title, then create a onclick function that handles the div's innerhtml, and I can't get it to work.
here is my code so far:
document.addEventListener('DOMContentLoaded', function () {
$().ready(function () {
var url = 'http://somewebsite';
$.get(url, function (data) {
data = data.split("<tr name=\"hover\">");
var name;
var link;
var count = data.length;
count++;
for(var i = 1; i < data.length; i++){
data[i] = data[i].replace("<br>","<br />");
data[i] = data[i].replace("class=\"thread_link\"", "");
data[i] = data[i].replace("<td class=\"forum_thread_post\" align=\"center\">0</td>","");
data[i] = data[i].replace("<td class=\"forum_thread_post\">","");
data[i] = data[i].replace("</td>","");
data[i] = data[i].replace('<td class="forum_thread_post" align="center">0</td>','');
if(i != data.length-1){
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div><br /><br />");
}else{
data[i] = data[i].split("</table>")[0];
data[i] = data[i].replace("<a href=\"", "");
data[i] = data[i].replace("</a>", "");
data[i] = data[i].split("\" >");
data[i][1] = data[i][1].split("<");
document.write('<div id="' + data[i][1][0] + '">' + data[i][1][0] + data[i][0] + "</div>");
}
}
//document.body.innerHTML = '';
//console.log(data);
});
});
});
document.write('</script>');
function getshow(url){
alert(url);
document.body.innerHTML = '';
$.get("http://somewebsite" + url, function (dat) {
document.write(dat);
});
}

Categories