Help with fileupload object

Richard Deeming

You might struggle to get that working with older browsers, but most modern browsers[^] can do that on the client-side. (The notable exception being IE10 or earlier.) There are various pre-built plugins to do this - for example:

Upload Preview jQuery Plugin[^] (uses jQuery[^]);
Bootstrap File Input - © Kartik[^] (uses Bootstrap[^])

Or you could roll-your-own - this StackOverflow answer[^] seems like a good place to start.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

turbosupramk3

The stackflow answer is great and I can see it working exactly as I would like here Edit fiddle - JSFiddle[^] but I cannot get it to work in Visual Studio with my own project? Below is what I have, I feel like this is a pretty dumb question, but I cannot figure out what is wrong?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Updater.aspx.cs" Inherits="Updater.Updater" %>

    if (input.files && input.files\[0\]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files\[0\]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Exchange Avatar</title>

</head>
<body>
<form id="form1" runat="server">
<br /><br /><br />

     <input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
 </form>

</body>
</html>

Richard Deeming

The <script> block needs to be within the document - just before the closing </body> tag would be a good place. You also need to add a reference to jQuery, since you're using it to wire up the event handler. The jQuery CDN[^] is probably the simplest way to add this. There's no need for the xmlns declaration on the <html> tag, since you're using HTML5, not XHTML. You also don't need the language attribute on the <script> tag, since Javascript is the only supported language.

<!DOCTYPE html>
<html>
<head runat="server">
<title>Exchange Avatar</title>
</head>
<body>
<form id="form1" runat="server">
<br /><br /><br />
<input type="file" id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>

<!-- Include jQuery: -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<!-- Your script: -->
<script>
function readURL(input) {
    if (input.files && input.files\[0\]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#blah").attr("src", e.target.result);
        }
        reader.readAsDataURL(input.files\[0\]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});
</script>

</body>
</html>

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

turbosupramk3

Thanks for the reply and the code, does this preview the image on your machine? For some reason it does not on my machine and when I change the form to add an onchange event it tells me that "imagepreview is undefined" ?

I even have this function as well, inside of the script tags

function imagepreview(input) {
if (input.file && input.files[0] {

            var fildr = new FileReader();
            fildr.onload = function(e) {
                $('#imgprw').attr('src', e.target.result);
            }
            fildr.readAsDataURL(input.files\[0\]);

Richard Deeming

The code I posted works fine on my machine. Which browser are you using?

turbosupramk3 wrote:

if (input.file && input.files[0] {

You're missing a closing ) on that line.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

turbosupramk3

I thought I had IE11, but it is actually IE9 which I'm going to guess is my problem? I also tried Chrome (v 52.xx) and Firefox (v 28) and neither of those worked either?

Richard Deeming

IE10 and earlier doesn't support the APIs needed to preview images. Firefox and Chrome should be fine, though. Check the developer console to see if you're getting any errors.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

turbosupramk3

I'm only getting 2 warning messages Warning 2 Validation (HTML5): Attribute 'crossorigin' is not a valid attribute of element 'script'. c:\users\xxxxx\documents\visual studio 2012\Projects\Updater\Updater\Updater.aspx 122 128 Warning 1 Validation (HTML5): Attribute 'integrity' is not a valid attribute of element 'script'. c:\users\xxxxx\documents\visual studio 2012\Projects\Updater\Updater\Updater.aspx 122 64

Richard Deeming

Try using the developer tools to step through the function. Debug with Breakpoints | Web Tools - Google Developers[^] Debugger - Firefox Developer Tools | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

turbosupramk3

I think it is something where the entire image path has to be in the code. Thank you for the help