我有一个适用于Firefox和Chrome的表单，但不适用于Internet Explorer 8.它有一些文本输入和一个文件输入：它是无法正常工作的文件输入。
问题似乎是服务器根本没有获取文件。服务器抛出MultiValueDictKeyError因为我的视图正在尝试查找包含该文件的元素，而request.FILES中没有该元素。
我检查了IE开发人员工具，input元素在表单提交时保存文件。还有其他事情正在发生。
表格中有一个曲线球：我正在使用this thread
的帮助下使用样式输入按钮我的HTML，加上一些内联js：
<form action="{{ order.get_absolute_url }}load/" method="post" enctype="multipart/form-data" class="med order" id="order_form" name="order_form">
<div class="card form_wrapper float_left">
<h2 class="section_header">{{ order.order_number }} - Add Homeowners<span class="status_label">{{ order.get_current_status_display }}</span></h2>
<table id="certified_one_off_table" class="residents">
<thead>
<tr>
<th>Owner Name<span class="ho_required_note">*</span></th>
<th>Co-owner Name</th>
<th>Account #<span class="ho_required_note">*</span></th>
<th>Address<span class="ho_required_note">*</span></th>
<th>Address, Continued</th>
<th>City, State Zip<span class="ho_required_note">*</span></th>
<th>Letter file<span class="ho_required_note">*</span></th>
</tr>
</thead>
<tbody>
<tr class="ho_load_row">
<td>
<input type="text" name="ho_owner-1" value="" class="ho_owner ho_load_field ho_required" />
</td>
<td>
<input type="text" name="ho_co_owner-1" value="" class="ho_co_owner ho_load_field" />
</td>
<td>
<input type="text" name="ho_account_id-1" value="" class="ho_account_id ho_load_field ho_required" />
</td>
<td>
<input type="text" name="ho_mailing_address-1" value="" class="ho_mailing_address ho_load_field ho_required" />
</td>
<td>
<input type="text" name="ho_mailing_address_contd-1" value="" class="ho_mailing_address ho_load_field" />
</td>
<td>
<input type="text" name="ho_mailing_csz-1" value="" class="ho_mailing_csz ho_load_field ho_required" />
</td>
<td id="upload_button_cell">
<div id="certified_upload_button" class="new_button" onclick="getFile(this)">Upload</div>
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="id_ho_document-1" name="ho_document-1" type="file" class="ho_file ho_load_field ho_required" /></div>
</td>
<td id="validate_cell">
<img id="id_ho_document_valid-1" src="/public/img/cross.png" alt="Invalid or no document selected" />
</td>
</tr>
<tr>
<td colspan="6">
<a id="certified_add_ho" href="#">Add Another Homeowner →</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<br />
<center><input type="submit" id="certified_one_off_button" class="new_button_disabled" value="Approve Order for these Homeowners" disabled="disabled" /></center>
<br />
</td>
</tr>
</tfoot>
</table>
</div>
</form>
<script type="text/javascript">
function getFile(obj) { $(obj).siblings('div').children('input').click(); }
</script>
视图代码片段：
if request.method == 'POST':
order_quantity = 0
for row_number in xrange(1, len(request.POST)):
if 'ho_owner-{0!s}'.format(row_number) not in request.POST:
break
document = request.FILES['ho_document-{0!s}'.format(row_number)]
编辑：忘记验证表单的js并启用提交按钮
$(document).ready(function() {
function update_certified_one_off_button() {
var invalid_fields = 0
$('.ho_load_field.ho_required').each(function() {
if ($(this).val() === '') {
invalid_fields += 1;
$(this).css('background-color', '#fff2f2');
} else {
$(this).css('background-color', '#ffffff');
}
});
$('input[name^="ho_document-"]').each(function() {
var ext = $(this).val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) {
invalid_fields += 1;
}
});
var submit_button = $('#certified_one_off_button');
if (invalid_fields > 0) {
submit_button.addClass('new_button_disabled');
submit_button.removeClass('new_button');
submit_button.attr('disabled', 'disabled');
} else {
submit_button.addClass('new_button');
submit_button.removeClass('new_button_disabled');
submit_button.removeAttr('disabled');
}
}
function certified_validate(event) {
var old_name_full = $(event.target).attr('id').split('-');
var old_name = old_name_full[0];
var old_num = parseInt(old_name_full[1]);
var icon = $("#id_ho_document_valid-" + String(old_num));
var ext = $(event.target).val().split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf']) == -1) {
icon.attr('src', '/public/img/cross.png');
alert('Only PDF format documents will be accepted.');
} else {
icon.attr('src', '/public/img/tick.png');
}
}
$('#certified_add_ho').click(function(e) {
e.preventDefault();
var last_row = $('.ho_load_row').last();
last_row.after('<tr class="ho_load_row">' + last_row.html() + '</tr>');
var last_row_img = $('.ho_load_row').last().find('img');
var old_name_full = last_row_img.attr('id').split('-');
var old_name = old_name_full[0];
var old_num = parseInt(old_name_full[1]);
last_row_img.attr('id', old_name + '-' + String(old_num + 1));
last_row_img.attr('src', '/public/img/cross.png');
var last_row_inputs = $('.ho_load_row').last().find('input');
last_row_inputs.each(function() {
$(this).val('').find('.default').attr('selected', 'selected');
old_name = $(this).attr('name').split('-')[0];
$(this).attr('name', old_name + '-' + String(old_num + 1));
var old_id = $(this).attr('id');
if (old_id) {
old_id = old_id.split('-')[0];
$(this).attr('id', old_id + '-' + String(old_num + 1));
}
});
$("#id_ho_document-" + String(old_num + 1)).change(certified_validate);
$('.ho_load_field.ho_required').bind('change keyup', update_certified_one_off_button);
update_certified_one_off_button();
});
$('#order_form .ho_load_field').bind('change keyup', update_certified_one_off_button);
$("#id_ho_document-1").change(certified_validate);
});
编辑2：我设法使用第三方工具捕获我的http请求，看起来我的文件永远不会离开机器：
POST /order/ndVKUeCRT1/load/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, */*
Referer: http://eiger.optimaloutsource.com:8088/order/ndVKUeCRT1/load/
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
Content-Type: multipart/form-data; boundary=---------------------------7dc1bd1f60702
Accept-Encoding: gzip, deflate
Host: eiger.optimaloutsource.com:8088
Content-Length: 899
Connection: Keep-Alive
Cache-Control: no-cache
Cookie: sessionid=0a37e24c25c4b7716249c50eb52b523a; __utma=133342874.1270580592.1320187097.1340128445.1340141010.4; __utmz=133342874.1340055122.2.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmb=133342874.2.10.1340141010; __utmc=133342874
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_owner-1"
phasetwenty
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_co_owner-1"
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_account_id-1"
account
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_mailing_address-1"
address
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_mailing_address_contd-1"
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_mailing_csz-1"
city, CA 90000
-----------------------------7dc1bd1f60702
Content-Disposition: form-data; name="ho_document-1"; filename=""
Content-Type: application/octet-stream
-----------------------------7dc1bd1f60702--
HTTP/1.1 500 INTERNAL SERVER ERROR
Date: Tue, 19 Jun 2012 21:25:31 GMT
Server: Apache/2.2.14 (Ubuntu)
Vary: Cookie
Connection: close
Content-Type: text/html; charset=utf-8
如何让IE正确提交此表单？
答案 0 :(得分：1)
IE（所有版本，甚至IE9）对文件输入的所有“重要”操作都非常敏感。在你的代码中，我看到你人为地触发了对这个输入的点击（这就是function getFile(obj)做的事情），但这在IE中是不允许的。
而是尝试使用以下技术：保持文件输入尺寸不变，但要使其透明 - 并在其下面放置一些更好看的东西。例如，它已经足够好地描述了here。
答案 1 :(得分：0)
您需要删除提交按钮的disabled属性，以便脚本能够单击它。或者，使用JavaScript直接使用document.order_form.submit()提交表单。