1

Firefox と Chrome では機能するフォームがありますが、Internet Explorer 8 では機能しません。いくつかのテキスト入力と 1 つのファイル入力があります。機能していないのはファイル入力です。

問題は、サーバーがファイルをまったく取得していないことです。MultiValueDictKeyErrorビューがファイルを含む要素を検索しようとしているため、サーバーがスローしますrequest.FILES。

IE 開発者ツールを確認したinputところ、フォームの送信時に要素がファイルを保持しています。他にも何かが起こっています。

フォームにはカーブボールが 1 つあります。このスレッドのヘルプを使用して、スタイル付きの入力ボタンを使用しています。

私の 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: サードパーティのツールを使用して 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 に答える