1

我有一个适用于 Firefox 和 Chrome 的表单，但不适用于 Internet Explorer 8。它有一些文本输入和一个文件输入：它是文件输入不起作用。

问题似乎是服务器根本没有获取文件。服务器抛出MultiValueDictKeyError，因为我的视图正在尝试查找其中包含文件的元素，并且它不存在于request.FILES.

我检查了 IE 开发人员工具，input当表单提交时，该元素正在保存文件。其他事情正在发生。

表单中有一个曲线球：我正在使用样式输入按钮，使用此线程的帮助

我的 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 &rarr;</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：我设法使用 3rd 方工具捕获了我的 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 正确提交此表单？

4

2 回答 2

1

IE（所有版本，甚至 IE9）对文件输入的所有“非平凡”操作都非常敏感。在您的代码中，我看到您人为地触发了对该输入的点击（就是function getFile(obj)这样做的），但这在 IE 中是不允许的。

而是尝试使用以下技术：保持文件输入尺寸不变，但使其透明 - 并在其“下方”放置更美观的东西。例如，这里已经很好地描述了它。

于 2012-06-19T21:38:39.233 回答
0

您需要删除disabled提交按钮的属性，以便脚本能够单击它。或者，直接使用 JavaScript 提交表单document.order_form.submit()。

于 2012-06-19T19:31:38.273 回答