auto file upload submit using jquery form throws access denied error in IE

Question

I am using jquery form to upload an image without page refresh. Following is the html markup:

    <a href="javascript:void(0);" onclick="UpdateImage();"> 
<img src="@_fullImgPath" name="img-uploader" alt="" title="" /></a>

    @using (Html.BeginForm("UpdateImage", "Profile", FormMethod.Post, new { id = "img-file-upload-form", @class = "form", autocomplete = "off", enctype = "multipart/form-data" }))
    {
        @Html.Hidden("UpdateImageId")
        <input type="file" name="file" id="file" />
    }
    <script language="javascript" type="text/javascript">   
     $(function () {
        $("#img-file-upload-form").ajaxForm({
            iframe: true,
            dataType: "json",
            beforeSubmit: function () {
            },
            success: function (result) {
                alert('done');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('error');
            }
        });

        $("#file").change(function () {
             $("#img-file-upload-form").submit();
        });
    });

     function UpdateImage(id) {
            $("input[id=file]").click();
        }

    </script>

This works fine in Firefox and Chrome, but in IE 8 and 9, it throws access denied error. Is there any fix for this? Or any alternative to upload the image without page refresh?

Have you figured out a way to fix this? I guess you added a new button to submit, instead of programatically submit it, right? — Oana-Elena Danescu, Apr 29 '20 at 15:25

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

What you are trying to is saving image on form submit. Submitting a form will do a postback for the webpage as I guess your markup represent MVC-3 Razor.

I rather would suggest you to use following for ajax request.

   var submitForm=new Form();

Add your image into form control

$.ajax({
    url:'webpage or your method in controller',
    type:'POST/GET',
    data:submitForm,
    dataType:'',
    ContentType:'',
    beforeSend:function(){},
    complete:function(){}, .....
});

for creating dynamic form tag you can refer to following link
How to create a form dynamically using JavaScript?

edited May 23 '17 at 11:43

Community

1
1

answered Dec 18 '12 at 11:55

Hiren Desai

941
1
9
33

to avoid the page refresh, i am using the ajaxForm. It'll take care of the ajax implementation. The code i am using works except in IE. – Prasad Dec 18 '12 at 12:01

auto file upload submit using jquery form throws access denied error in IE

1 Answers1