1
Firefox 및 Chrome에서는 작동하지만 Internet Explorer 8에서는 작동하지 않는 양식이 있습니다. 일부 텍스트 입력과 하나의 파일 입력이 있습니다. 작동하지 않는 파일 입력입니다.Internet Explorer에서 파일 업로드가 작동하지 않습니다.
문제는 서버가 파일을 전혀 가져 오지 못하는 것 같습니다. 내보기가 파일을 포함하는 요소를 조회하려고 시도하기 때문에 서버가 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 : 나는 제 3 자 도구를 사용하여 내 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가 제대로이 양식을 제출 얻을 수 있습니까?
그럴듯한 것 같습니다. 시도해 볼게. – Chris
덧붙여서, [유니폼] (http://uniformjs.com/)이라는 매우 유용한 플러그인이 있습니다.이 플러그인은 파일 하나를 포함하여 모든 입력 스타일을 크게 단순화합니다.) – raina77ow