0

次の問題があります。フォームで POST リクエストを送信すると:

<form id="uploadForm" action="/theme/zip/type/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input id="fileInput" class="input-file" name="upload" type="file">
    <input type="submit" value="Upload" />
</form>

次に、サーバー上にコードがあります：

print request.FILES

サーバー印刷:

<MultiValueDict: {u'upload': [<InMemoryUploadedFile: ID_12241.zip (application/zip)>]}>

このアクションを jQuery コードで段階的に実行すると、次のようになります。

var content = zip.generate();
var options = {
    url: '/theme/zip/type/',
    data: {
       file: content
    }
};
$('#uploadForm').ajaxSubmit(options);

「request.POST」の「file」パラメータにこのファイルがありますが、「request.FILES」は empty() です。私は何を間違っていますか？

4

2 に答える 2

1

JQUery Form Pluginを見てください。ajaxを使用してファイルをアップロードできます。

彼らのウェブサイトのドキュメントによると

Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object.

私のプロジェクトでこれを使用しています。古いブラウザ用に iframe を定義する必要はありません。このプラグインは自動的にそれを行います。以下は、ajax ファイルのアップロードを実装するためのサンプル コードです。

HTML ファイルは次のようになります (html ファイル内の jquery.form.js をダウンロードしてリンクします):-

<form id="uploadForm" method="post" action="/theme/zip/type/"> {% csrf_token %}
    <input type="file" id="fileInput" name="upload"/>
    <button type="submit">Upload</button>
</form>

<script src="jquery-ui.min.js"></script>
<script src="jquery.form.js"></script>

js ファイルに次のコードを追加します。

var options = {
    beforeSubmit:showRequest,  // pre-submit callback
    success:showResponse,  // post-submit callback
    resetForm: false        // reset the form after successful submit
};

//uploadForm is the name of your form
$('#uploadForm').submit(function() {
    // inside event callbacks 'this' is the DOM element so we first
    // wrap it in a jQuery object and then invoke ajaxSubmit

    $(this).ajaxSubmit(options);

    // !!! Important !!!
    // always return false to prevent standard browser submit and 
    // page navigation return false;
});

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it 
    // to a string to display it but the form plugin does 
    // this for you automatically when it submits the data 
    var queryString = $.param(formData); 

    // jqForm is a jQuery object encapsulating the form element. 
    // To access the DOM element for the form do this: 
    // var formElement = jqForm[0]; 

    alert('About to submit: \n\n' + queryString); 

    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the 
    // form submit to continue 
    return true; 
} 

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 

    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\noutput div should have been updated with the responseText.'); 
}

送信ボタンをクリックすると、.submit() 関数が呼び出されます。この関数は、ブラウザーのポストバックを防ぐために重要な false を返します。この関数では、2 つのコールバック関数が定義されています。

  1. showRequestフォームが送信されようとしているときに呼び出されます。ここですべての投稿データを確認できます。
  2. showResponseサーバーが応答を返したときに呼び出されます。

サーバーでは、request.FILES でデータを取得します。関数でアクセスできるサーバーからの JSON 応答を返しますshowResponse。

于 2014-02-22T15:37:39.347 に答える