fineuploader画像のアップロードにはアップロードされたファイルのキャプションが含まれています

Question

1つのDBレコードに対して5つの別々のファイルアップロードがあるレガシーアプリがあります。各ファイルのアップロードの横には、アップロードされたファイルのキャプションを入力するフィールドがあります。

ギャラリー全体をfineUploaderギャラリーに置き換え、最大10個のファイルをアップロードできるようにすることを検討しています。

しかし、古いシステムでは、画像のALTタグの各画像にウェブ表示に関連するキャプションを付けると便利でした。

私は、それぞれにfineuploaderとキャプションフィールドを使用して複数の単一のファイルアップロードで対処することができましたが、私はページ上にたくさんあることから離れたいと思っています。

アップロードの際にファイル名を変更するオプションがあるので、オプションである可能性がありますが、非常に長く/乱雑なファイル名になり、アクセントやその他の文字に問題が発生する可能性があります。

誰もが良いアプローチを提案できますか？

Answer 1

組み込みのファイル名の編集機能を使用することをお勧めします。これは私に最も適切だと思われますが、最も簡単な方法です。

別のアプローチは、以下が含まれます。

1. あなたファインアップローダーテンプレートにファイル入力フィールドを追加します。これにより、ユーザーが入力したキャプション値が保持されます。この見た目をプロジェクトに適したものにするには、CSSが必要になるでしょう。
2. autoUpload optionがfalseに設定されたファインアップローダを初期化します。これにより、ユーザーはキャプションを入力し、ボタンをクリックしてファイルをアップロードできます（後で追加されます）。
3. onUpload callback handlerを登録してください。ここでは、テキスト入力に格納されている関連ファイルのキャプションの値を読み取り、setParams API methodというファイルに関連付けます。

your templateのファイルリスト部分は次のようになります。

<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals"> 
    <li> 
     ... 
     <input class="caption"> 
    </li> 
</ul> 

をそして、あなたのファインアップローダのコードは、このロジックが含まれます（たとえば、request.endpointとelementなどの重要なものの無関係なオプションがオンに焦点を維持するために取り残さあなたの質問）：

var uploader = new qq.FineUploader({ 
    autoUpload: false, 
    callbacks: { 
     onUpload: function(id) { 
     var fileContainer = this.getItemByFileId(id) 
     var captionInput = fileContainer.querySelector('.caption') 
     var captionText = captionInput.value 

     this.setParams({caption: captionText}, id) 
     } 
    } 
}) 

サーバーは、各ファイルのアップロード要求の一部として、関連する値とともに「キャプション」パラメータを受け取ります。