Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

image preview and save to a folder

7 Posts 4 Posters 0 Views 1 Watching

M Offline
M Offline
Member 11166318

wrote on last edited by

#1

we want to upload a image file and preview to page and save to folder using javascript and c# code
Z A S 3 Replies Last reply

0
M Member 11166318

we want to upload a image file and preview to page and save to folder using javascript and c# code
Z Offline
Z Offline
ZurdoDev

wrote on last edited by

#2

There are examples online. Are you stuck somewhere?

There are only 10 types of people in the world, those who understand binary and those who don't.
1 Reply Last reply

0
M Member 11166318

we want to upload a image file and preview to page and save to folder using javascript and c# code
A Offline
A Offline
Afzaal Ahmad Zeeshan

wrote on last edited by

#3

If you're talking about ajax functionality for uploading, then please read this post of mine. Uploading the files – HTML5 and jQuery way![^]

The shit I complain about It's like there ain't a cloud in the sky and it's raining out - Eminem ~! Firewall !~
S 1 Reply Last reply

0
A Afzaal Ahmad Zeeshan

If you're talking about ajax functionality for uploading, then please read this post of mine. Uploading the files – HTML5 and jQuery way![^]

The shit I complain about It's like there ain't a cloud in the sky and it's raining out - Eminem ~! Firewall !~
S Offline
S Offline
Simewu

wrote on last edited by

#4

Here:

<html>
<body>
<input id='input' type='file' onchange='newImage()'/>

Preview:

<button onclick='downloadImage()'>Download</button>
<script>
var input=document.getElementById('input'); //the <input> element
var image=document.getElementById('img'); //the element

function newImage(){
if(!input.files||input.value=='') return; //if there is no file then exit function
var file=input.files[0]; //get the file
if(!file.type.match('image.*')){ //if file is not an image
input.value=''; //clear input
alert('Images only!');
return; //exit function
}
var reader=new FileReader(); //now we read the image
reader.readAsDataURL(file); //convert image into a string
reader.onload=function(f){ //once the image string is received...
image.src=f.target.result; //send the image string to the image element
}
}

function downloadImage(){
if(!image.src){
alert('There is nothing to download!');
return; //exit function if there is no image
}
var a=document.createElement('a');
a.setAttribute('href',image.src);
a.setAttribute('download','image.png');
a.click();
}
</script>
</body>
</html>

Your welcome :-\
A 1 Reply Last reply

0
S Simewu

Here:

<html>
<body>
<input id='input' type='file' onchange='newImage()'/>

Preview:

<button onclick='downloadImage()'>Download</button>
<script>
var input=document.getElementById('input'); //the <input> element
var image=document.getElementById('img'); //the element

function newImage(){
if(!input.files||input.value=='') return; //if there is no file then exit function
var file=input.files[0]; //get the file
if(!file.type.match('image.*')){ //if file is not an image
input.value=''; //clear input
alert('Images only!');
return; //exit function
}
var reader=new FileReader(); //now we read the image
reader.readAsDataURL(file); //convert image into a string
reader.onload=function(f){ //once the image string is received...
image.src=f.target.result; //send the image string to the image element
}
}

function downloadImage(){
if(!image.src){
alert('There is nothing to download!');
return; //exit function if there is no image
}
var a=document.createElement('a');
a.setAttribute('href',image.src);
a.setAttribute('download','image.png');
a.click();
}
</script>
</body>
</html>

Your welcome :-\
A Offline
A Offline
Afzaal Ahmad Zeeshan

wrote on last edited by

#5

I believe you wanted to send this message to OP. Didn't you?

The shit I complain about It's like there ain't a cloud in the sky and it's raining out - Eminem ~! Firewall !~
S 1 Reply Last reply

0
A Afzaal Ahmad Zeeshan

I believe you wanted to send this message to OP. Didn't you?

The shit I complain about It's like there ain't a cloud in the sky and it's raining out - Eminem ~! Firewall !~
S Offline
S Offline
Simewu

wrote on last edited by

#6

Your right, my bad
1 Reply Last reply

0
M Member 11166318

we want to upload a image file and preview to page and save to folder using javascript and c# code
S Offline
S Offline
Simewu

wrote on last edited by

#7

Here:

<html>
<body>
<input id='input' type='file' onchange='newImage()'/>

Preview:

<button onclick='downloadImage()'>Download</button>
<script>
var input=document.getElementById('input'); //the <input> element
var image=document.getElementById('img'); //the element

function newImage(){
if(!input.files||input.value=='') return; //if there is no file then exit function
var file=input.files[0]; //get the file
if(!file.type.match('image.*')){ //if file is not an image
input.value=''; //clear input
alert('Images only!');
return; //exit function
}
var reader=new FileReader(); //now we read the image
reader.readAsDataURL(file); //convert image into a string
reader.onload=function(f){ //once the image string is received...
image.src=f.target.result; //send the image string to the image element
}
}

function downloadImage(){
if(!image.src){
alert('There is nothing to download!');
return; //exit function if there is no image
}
var a=document.createElement('a');
a.setAttribute('href',image.src);
a.setAttribute('download','image.png');
a.click();
}
</script>
</body>
</html>

Your welcome :-\
1 Reply Last reply

0

Log in to reply