2016-09-25 5 views
0

アップローダーのコミュニティを送信してください。

私は神人(ROR)とファインアップローダーを統合しようとしています。
イメージをサーバーエンドポイントにアップロードできます。
アップロードされた写真を確実に保存するために、私は自分の既存のフォームでアップロードされた写真情報(サーバーから受信)をajax経由で送信することを選択しました。アップロード者がすべてのファイルを提出するまで待ちます。

私の既存のフォームは、この

<form id="myform" method="post" action="some_path"> 
    <input type="text" name="name"/> 
    <input type="text" name="email"/> 
    <input type="text" name="phone"/> 
    <input type="password" name="password"/> 
    <input type="submit" /> 
    Add some photos 
    <div id="fine-uploader-gallery"></div> 
</form> 

マイ細かいアップローダー構成のようになります。私の質問がある

$(function() { 

var fineuploader = new qq.FineUploader({ 
    element: document.getElementById("fine-uploader-gallery"), 
    template: 'qq-template-gallery', 
    debug: true, 
    request: { 
    endpoint: 'images/cache/upload', 
    inputName: "file" 

    }, 
    thumbnails: { 
    placeholders: { 
     waitingPath: "fine-uploader/placeholders/waiting-generic.png", 
     notAvailablePath: "fine-uploader/placeholders/not_available-generic.png" 

    } 

    }, 
    validation: { 
    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'] 

    } 

    callbacks: { 
    onComplete: maybe add the responseJSON to a local variable and send it later with the form via ajax. 
    } 
} 


}); 

}); 


微アップローダーがアップロードされている場合ように、sumbitボタンを傍受する方法
フォームは送信されません。すべてのアップロードが完了するまで待機し、アップロードされたファイルごとにサーバーから受け取った情報とともに送信します(r esponseJSON)。
私の質問は明確です。

+0

フォームエレメントの内部に素晴らしいアップローダーレンダリングがあるのはなぜですか?それは正しいとは思わない。 –

+0

私は知らないのですか?具体的な理由はありますか?私は自分のコードを変更しても構いません。 – mma7

+0

私は確かにその理由を知らない。これはあなたのコードですね。 –

答えて

0

フォームが送信されないようにするには、フォーム送信イベントをリッスンし、ファイルがまだアップロードされていない場合はデフォルトのブラウザアクションを防止します。

document.getElementById('myForm') 
    .addEventListener('submit', function(event) { 
     var totalFiles = fineuploader.getUploads().length; 
     var successfulUploads = fineuploader.getUploads({ 
     status: qq.status.UPLOAD_SUCCESSFUL 
     }).length; 

     if (totalFiles !== successfulUploads) { 
     event.preventDefault(); 
     } 
    }) 

...あなたのユーザーに警告するために必要なメッセージを自由に追加できます。

関連する問題