[Weaver]

Tänkte dela med mig av en mycket jobbig "bugg" som tog hela dagen att lösa utifall någon annan skulle springa på samma problem.

Jag har en sida där man skall kunna ladda upp en bild. Jag har förenklat exemplet här så att det blir överskådligt.

Formuläret som läggs till ser ut såhär:

<form method="post" action="/upload" enctype="multipart/form-data">
    <input type="file" name="image" />
    <input value="Ladda upp" type="submit" name="submit" />
</form>

Detta fungerar perfekt i alla webbläsare (även IE) som det bör. Problemet kommer när jag skall återskapa detta formuläret dynamiskt med hjälp av jQuery.

var form = $('<form>', {
    action: '/upload',
    method: 'post',
    enctype: 'multipart/form-data'
});

var formInputFile = $('<input />', {
    type: 'file',
    name: 'image'
});

var formSubmit = $('<input />', {
    type: 'submit',
    name: 'submit',
    value: 'Ladda upp'
});

form.append(formInputFile);
form.append(formSubmit);
$('body').append(form);

Denna koden fungerar i alla webbläsare utom just IE. När formuläret skickas så skickas inte fil-datan med.

Av någon konstig anledning måste man lägga till encoding="multipart/form-data" när formuläret skapas dynamiskt för att IE skall acceptera det som ett filuppladdningsformulär.

Form-taggen måste alltså skapas såhär för att IE skall spela med:

var form = $('<form>', {
    action: '/upload',
    method: 'post',
    enctype: 'multipart/form-data',
    encoding: 'multipart/form-data'
});

Så där har ni det, hoppas detta kan bespara in någon utvecklingstid.