Styjun

Can planetary bodies have a second axis of rotation?

Cheap antenna for new HF HAM

Where Does VDD+0.3V Input Limit Come From on IC chips?

How could artificial intelligence harm us?

Minimize taxes now that I earn more

What was the deeper meaning of Hermione wanting the cloak?

Hilbert's hotel, why can't I repeat it infinitely many times?

Aligning two sets of equations with alignat?

CDG baggage claim before or after immigration?

Spectrum of a Subspace of Matrices

How do I improve in sight reading?

What is a Heptagon Number™?

Resolving moral conflict

Writing a letter of recommendation for a mediocre student

Is there an in-universe reason Harry says this or is this simply a Rowling mistake?

I feel like most of my characters are the same, what can I do?

What can a pilot do if an air traffic controller is incapacitated?

Is there a builtin function to turn selective Echos off?

Asking an expert in your field that you have never met to review your manuscript

How to fix folder structure in Windows 7 and 10

The 100 soldier problem

Does a familiar stay the same after being true polymorphed and then dismissed and resummoned?

What did the controller say during my approach to land (audio clip)?

Paradox regarding phase transitions in relativistic systems

file upload html in edge / internet explorer

What are valid values for the id attribute in HTML?Convert HTML + CSS to PDF with PHP?HTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?Redirect from an HTML pageWhat does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?Why does HTML think “chucknorris” is a color?Login with google button in Internet Explorer 11 / EdgeGoogle Adsense adds not displaying in Internet Explorer and Edge (wordpress site)How to make .css file to run alongside the .html file in Microsoft Edge and Internet Explorer?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

Is there not a working method to upload a file from edge / internet explorer? I am using the following on my site for html input tag:

<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>

When you click on "add", the open file box pops up, but nothing is returned in console (see javascript code below). This code runs fine in Chrome, and displays results in console with no issue.

$('#userfile').on('input', function() 
 var test_test = $('#userfile')[0].files[0];
 console.log($('#userfile')[0].files[0]);

html internet-explorer microsoft-edge

share|improve this question

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

add a comment
 | 

0

Is there not a working method to upload a file from edge / internet explorer? I am using the following on my site for html input tag:

<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>

When you click on "add", the open file box pops up, but nothing is returned in console (see javascript code below). This code runs fine in Chrome, and displays results in console with no issue.

$('#userfile').on('input', function() 
 var test_test = $('#userfile')[0].files[0];
 console.log($('#userfile')[0].files[0]);

html internet-explorer microsoft-edge

share|improve this question

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

add a comment
 | 

Is there not a working method to upload a file from edge / internet explorer? I am using the following on my site for html input tag:

<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>

When you click on "add", the open file box pops up, but nothing is returned in console (see javascript code below). This code runs fine in Chrome, and displays results in console with no issue.

$('#userfile').on('input', function() 
 var test_test = $('#userfile')[0].files[0];
 console.log($('#userfile')[0].files[0]);

html internet-explorer microsoft-edge

share|improve this question

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>

$('#userfile').on('input', function() 
 var test_test = $('#userfile')[0].files[0];
 console.log($('#userfile')[0].files[0]);

share|improve this question

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

share|improve this question

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

asked Mar 28 at 15:04

dataviewsdataviews

36644 silver badges1616 bronze badges

2 Answers
2

active

oldest

votes

1

Based on my testing result, I find that on input is not working in IE and Edge.

you can try to replace on input with on change. It can work with IE and Edge.

Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.

Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.

Modified code:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

Output in IE 11:

Output in MS Edge:

you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.

share|improve this answer

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Was realizing everything you mentioned before I read your reply lol. It's a shame, because I need these things
  
  – dataviews
  Mar 29 at 18:56
  

  
  
  
  

add a comment
 | 

0

Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.

JS FIDDLE

<div class="file-input-wrapper">
 <button class="btn-file-input">Mah Custom Uploadz Button</button>
 <input type="file" name="file" />
</div>

I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.

share|improve this answer

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55400877%2ffile-upload-html-in-edge-internet-explorer%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Based on my testing result, I find that on input is not working in IE and Edge.

you can try to replace on input with on change. It can work with IE and Edge.

Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.

Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.

Modified code:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

Output in IE 11:

Output in MS Edge:

you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.

share|improve this answer

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Was realizing everything you mentioned before I read your reply lol. It's a shame, because I need these things
  
  – dataviews
  Mar 29 at 18:56
  

  
  
  
  

add a comment
 | 

1

Based on my testing result, I find that on input is not working in IE and Edge.

you can try to replace on input with on change. It can work with IE and Edge.

Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.

Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.

Modified code:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

Output in IE 11:

Output in MS Edge:

you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.

share|improve this answer

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Was realizing everything you mentioned before I read your reply lol. It's a shame, because I need these things
  
  – dataviews
  Mar 29 at 18:56
  

  
  
  
  

add a comment
 | 

Based on my testing result, I find that on input is not working in IE and Edge.

you can try to replace on input with on change. It can work with IE and Edge.

Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.

Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.

Modified code:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

Output in IE 11:

Output in MS Edge:

you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.

share|improve this answer

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script>
	 $(document).ready(function()
	
		$("#userfile").on("change", function() 
 			var test_test = $('#userfile')[0].files[0];
 			console.log($('#userfile')[0].files[0]);
		);

	);
	</script>
</head>
<body>
<label for="userfile"><a>add</a></label>

<input id="userfile" name="userfile" type="file" />

</body>
</html>

share|improve this answer

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

answered Mar 29 at 6:10

Deepak-MSFTDeepak-MSFT

2,52711 gold badge22 silver badges88 bronze badges

0

Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.

JS FIDDLE

<div class="file-input-wrapper">
 <button class="btn-file-input">Mah Custom Uploadz Button</button>
 <input type="file" name="file" />
</div>

I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.

share|improve this answer

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges

add a comment
 | 

0

Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.

JS FIDDLE

<div class="file-input-wrapper">
 <button class="btn-file-input">Mah Custom Uploadz Button</button>
 <input type="file" name="file" />
</div>

I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.

share|improve this answer

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges

add a comment
 | 

Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.

JS FIDDLE

<div class="file-input-wrapper">
 <button class="btn-file-input">Mah Custom Uploadz Button</button>
 <input type="file" name="file" />
</div>

I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.

share|improve this answer

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges

<div class="file-input-wrapper">
 <button class="btn-file-input">Mah Custom Uploadz Button</button>
 <input type="file" name="file" />
</div>

share|improve this answer

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges

answered Mar 29 at 20:32

dataviewsdataviews

36644 silver badges1616 bronze badges