Simple Jquery FileUploadに追加情報を追加する

私はjuqery fileuploadとajaxフォームの提出を統合しようとしています。 ajaxフォームはテキストを送信し、新しく作成されたイベントのIDを返します。これはアップロード時にリンクするイベントを知るために必要です。簡単なアップロードのデモはここで次のコードSimple Jquery FileUploadに追加情報を追加する

を使用して最初の非ファイルフィールド

$.ajax({ 
     type: 'post', 
     url: '/whats-on/upload-event/', 
     data: JSON.stringify(data), 
     contentType: "application/json; charset=utf-8", 
     traditional: true, 
     success: function (return_data) { 
      console.log(return_data) 
     } 
    });

それは、ファイルアップロードをせずにファイルを送信しますが、次のJSON

Object {status: true, id: 17162}

を返すをアップロードアヤックスです宣言するdata: data,

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery File Upload Example</title> 
</head> 
<body> 

    <input id="fileupload" type="file" data-url="server/php/"> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="js/vendor/jquery.ui.widget.js"></script> 
    <script src="js/jquery.iframe-transport.js"></script> 
    <script src="js/jquery.fileupload.js"></script> 
    <script> 
    $(function() { 
     $('#fileupload').fileupload({ 
      dataType: 'json', 
      done: function (e, data) { 
       //Returns ID as e['id'] and 200 status also with e['status'] 
      } 
     }); 
    }); 
    </script> 
    </body> 
</html>

出典

2016-10-10 Samuel Muiruri

'done'関数の中で別のajaxを呼び出します。 – AHJeebon

ファイル以外のデータをクエリ文字列として渡してください、私の答えを見てください。 – anmarti

あなたは最初のAJAXポストとイベントIDを取得する必要があります：あなたはそれを得た

function uploadClick(){ 
    var eventId = getEvent(); 
    uploadFile(eventId) 
} 

function getEvent(){ 
    // make an ajax and return your id 
}

一つ、その後、イベントIDを示すクエリ文字列を含むURLを作成します。このURLはあなたのファイルを投稿する場所です：

function uploadFile(eventId){ 
    // attatch the id to the URL with query string 
    url = url + '&eventId=' + eventId; 

    // submit here your file 
}

このようにして、同じajaxでファイル自体とイベントIDを呼び出すことができます。サーバー側のアクションでは、このクエリ文字列を取得し、投稿されたファイルを選択する必要があります。

出典

2016-10-10 08:28:16 anmarti

あなたのようなファイルアップロードプラグインのためのコールバックを処理しなければならないことがあります。完全なリファレンスについては

$('#fileupload').fileupload({ 
        url: <url>, 
        type: <HTTP_VERB>, 
        other configurations... 

       }).bind('fileuploadadd', function (e, data) { 
        //fires when you select a file to upload 
       }).bind('fileuploaddone', function (e, data) { 
        //fires when upload completed successfully. equivalent to done call back of jQuery ajax 
       }).bind('fileuploadfail', function (e, data) { 
        //fires when upload fails 
       });

は、以下のlinkをご覧ください。

出典

2016-10-10 08:49:37

Simple Jquery FileUploadに追加情報を追加する

答えて

関連する問題