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
        });

*

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.

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.

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.