php upload not working in IE8

[sathishbabu.boopathy]

In my app, im using a small form created dynamically by a jquery to upload files to server. This is working perfectly in FF and chrome. the issue is that im getting $_FILES as empty to my upload php.

The file im trying to upload is a Zip file which is very less in size (less than 100 kb)

below is my jquery form part:

*

var form = $("<form/>").prop({
                id : "add-bootfiles-widget",
                method : "post",
                enctype : "multipart/form-data"
        }).addClass("pretty-box").css({
                "position" : "fixed",
                "left" : "50%",
                "top" : "50%",
                "z-index" : "9999",
                "background-color" : "white",
                "padding" : "0px",
                "width" : "420px"
        }).submit(function(event) {
                _addBootfilesSubmit(event, $(this));
        });
        // preserve the page count
        var countControl = $("<input/>").prop({
                type : "hidden",
                name : "count",
                value : $("#count").val()
        });

        form.append(countControl);
var header = $("<div/>").css({
                "background-color" : "#EEE",
                "font-weight" : "bold",
                "padding" : "10px"
        }).text("Add Bootfiles");

        form.append(header);

        // main body
        var body = $("<div/>").css({
                "margin" : "10px auto 0",
                "width" : "400px"
        });

        var div1 = $("<div/>");

        var span1 = $("<span>Bootfiles</span>").css({
                "display" : "inline-block",

                "text-align" : "right"
        });

        span1.append(' <span class="error" style="font-weight:bold">*</span>');

        div1.append(span1);
        var span2 = $("<span>").css({
                "display" : "inline-block",
                "margin-left" : "10px"
        });

        span2.append('<input type="file" name="upfile"/>');

        div1.append(span2);

        body.append(div1);

        var div2 = $("<div/>").css({
                "margin" : "0px auto",
                "width" : "400px"
        });

        var span3 = $("<span/>").css({
                "display" : "inline-block",
                "width" : "100px",
                "text-align" : "right"
        });

        div2.append(span3);

        var span4 = $("<span/>").css({
                "display" : "inline-block",
                "margin-left" : "10px",
                "font-size" : "10px"
        }).text("The maximum number of files is 20K.");

        div2.append(span4);

        body.append(div2);

        var div3 = $("<div/>").css({
                "margin-top" : "10px"
        });

        var span5 = $("<span>Type Scope</span>").css({
        "display" : "inline-block",
                "width" : "100px",
                "text-align" : "right"
        });

        span5.append(' <span class="error" style="font-weight:bold">*</span>');

        div3.append(span5);

        var span6 = $("<span/>").css({
                "display" : "inline-block",
                "margin-left" : "10px"
        });

        var typeScopeControl = $("<select/>").prop({
                "name" : "typeScope"
        });

        typeScopeControl.append('<option value="">Select...</option>');
        typeScopeControl.append('<option value="soak-national">soak-national</option>');
        typeScopeControl.append('<option value="national">national</option>');
        typeScopeControl.append('<option value="local">local</option>');

        span6.append(typeScopeControl);

        div3.append(span6);

        body.append(div3);

        form.append(body);
var footer = $("<div/>").css({
                "clear" : "both",
                "text-align" : "right",
                "margin-top" : "20px",
                "margin-bottom" : "10px",
                "border-top" : "1px solid #CCC",
                "padding-top" : "10px",
                "padding-right": "10px"
        });

        // upload button
        var $uploadButton = $("<input/>").prop({
                type : "submit",
                value : "Upload"
        });

        footer.append($uploadButton);

        footer.append(" ");

        // cancel link
        var cancelLinkId = "add-bootfiles-cancel-link";

        var $cancelLink = $('<a href="">cancel</a>').prop({
                id : cancelLinkId
        }).click(function(event) {
                _addBootFilesCancelLinkClicked(event);
        });

        footer.append($cancelLink);

        form.append(footer);
        alert(form.html());

        var blanket = $("<div/>").prop({
                id : "blanket"
        }).css({
"background": "black",
                "height": "100%",
                "left": "0px",
                "opacity": ".5",
                "position": "fixed",
                "top": "0px",
                "width": "100%",
                "z-index": "2500"
        });

        $(document.body).append(blanket).append(form);

        // final positioning must wait until the form has a height and a width,
        // which does not happen until it is appended to the body
        //
        form.css({
                "margin-top" : form.height() / 2 * -1,
                "margin-left" : form.width() / 2 * -1
        });

*

[LastMitch]

In my app, im using a small form created dynamically by a jquery to upload files to server. This is working perfectly in FF and chrome. the issue is that im getting $_FILES as empty to my upload php.

May I ask how is this related to PHP?

You are using jQuery/Ajax code.

I don't see any PHP code at all?

[Ashenvale]

the $ sign is the PHP part... I guess

[sathishbabu.boopathy]

When the form gets submitted from above jquery to a PHP. there we are checking for a $_FILES. other browsers have that array with all content. But in IE, its empty.

[LastMitch]

When the form gets submitted from above jquery to a PHP. there we are checking for a $_FILES. other browsers have that array with all content. But in IE, its empty.

Did you write this code? I can be honest there is nothing wrong with your ocde.

You mention the jQuery submit to a php file? Are you sure it is submited because I don't see any php file that is being uploaded to in your code you posted above.

It should have something like this:

url: 'yourfile.php',

It should also look like this in the begining of your code the #htmlform is your id for your form (I don't see that either):

$(document).ready(function() { 
// bind form using ajaxForm 
$('#htmlForm').ajaxForm({ 

Did you include this:

http://api.jquery.com/ajaxError/

What IE are you having issue?

There have been issue dealing with IE. You can take a look at these:

http://kimjoyfox.com/blog/jquery-load-function-not-working-in-ie/

https://github.com/blueimp/jQuery-File-Upload/issues/89

As you can see this has nothing to do with PHP.

[sathishbabu.boopathy]

Added encoding property along with enctype property for the form which made it work in IE too.

[LastMitch]

Added encoding property along with enctype property for the form which made it work in IE too.

OK, so the issue is solved? What you mention is in jQuery/Javascript not in PHP. I'm a bit confused why you post this in the first place.