1

Update:

Solved: http://jsfiddle.net/TmUmG/230/




Original question:

I have an image/logo, next to the hidden input type=file: 

<form class="image fit" id="theuploadform">
     <input title="click me to change logo" type="image" src="images/sample_image.jpg" style="width:inherit;height:inherit"/>
     <input type="file" id="userfile" name="userfile" style="display:none" />
</form>

idea is on click the image browse for the file, upload it and refresh the original image. My code works in IE, but not in Chrome/FF ((

click handling:

// click for image upload
$("input[type='image']").click(function () {
    $("input[id='userfile']").click();
});

This prompts me to select a file. Upon onchange, I want to submit the form:

    // upload image form 
$("input[id='userfile']").on("change", function() { 
    //alert('here!');
    var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none"></iframe>');

    $("body").append(iframe);

    var form = $('#theuploadform');
    form.attr("action", "/UploadHandler.ashx");
    form.attr("method", "post");
    form.attr("encoding", "multipart/form-data");
    form.attr("enctype", "multipart/form-data");
    form.attr("target", "postiframe");
    form.attr("file", $('#userfile').val());
    form.submit();

    $("#postiframe").load(function () {
        iframeContents = this.contentWindow.document.body.innerHTML;
        $("#textarea").html(iframeContents);

        var filename = $('#userfile').val().replace(/\\/g, '/');
        var fileNameIndex = filename.lastIndexOf("/") + 1;
        filename = filename.substr(fileNameIndex);

        $("input[type='image']").attr("src", "Uploads/" + filename);
    });
    //return false;
});

all above works in IE 9+.

I just found this post: Upload files using input type="file" field with .change() event not always firing in IE and Chrome Not sure yet, but it sounds relevant.

Community
  • 1
  • 1
Michael L
  • 43
  • 1
  • 6
  • `$("input[id='userfile']").click();` and your other event is `change`? use same event please – guradio Oct 09 '15 at 03:33
  • Is expected result of `form.attr("file", $('#userfile').val());` `File` object at `form` attribute `file` ? – guest271314 Oct 09 '15 at 04:13
  • What is purpose of ` What is purpose of `"Uploads/"` at `$("input[type='image']").attr("src", "Uploads/" + filename);` ? – guest271314 Oct 09 '15 at 04:19
  • I have a handler: UploadHandler.ashx, which reads the form, saves the file in the "Uploads" folder on the server. I am referencing the expected path for the saved image – Michael L Oct 09 '15 at 04:22
  • I am using approach, described in this: [http://stackoverflow.com/questions/7909161/jquery-iframe-file-upload](http://stackoverflow.com/questions/7909161/jquery-iframe-file-upload) – Michael L Oct 09 '15 at 04:25
  • _"saves the file in the "Uploads" folder on the server. "_ `$('#userfile').val()` at `form.attr("file", $('#userfile').val());` not appear to be `File` object ? – guest271314 Oct 09 '15 at 04:31
  • this is just a string file name. found this: http://stackoverflow.com/questions/10214947/upload-files-using-input-type-file-field-with-change-event-not-always-firin?rq=1 – Michael L Oct 09 '15 at 04:53
  • yes for the `onchange` event this is a duplicate ([there](http://stackoverflow.com/questions/19643265/second-use-of-input-file-doesnt-trigger-onchange-anymore) [are](http://stackoverflow.com/questions/12030686/html-input-file-selection-event-not-firing-upon-selecting-the-same-file) [others](http://stackoverflow.com/questions/27380433/)). If you want to get the file name, it is better to get `this.files[0].name` and if you want to send the actual file, you have to send `this.files[0]` (`this` being the input in the `onchange` event handler.) – Kaiido Oct 09 '15 at 06:27

1 Answers1

-1

Solution: use "oninput" instead of "onchange" for firefox.

Kelly
  • 11
  • 2