ファイルをアップロードし、同じページから同じファイルを読み込んで書き直します

Question

多くのデータとファイルをアップロードするためのフォームがあります。ユーザーがファイルをアップロードした場合、ファイルは同じページから表示ボタンをクリックして表示する必要があり、変更があった場合は同じファイルを更新する必要があります。私は1つの形式でファイルアップロードの数を持っています。

私のフォームは...

<fieldset id="pan-step4-new" class="form-style"> 
    <h2 class="fs-title">Please Upload Documents</h2> 
    <div class="black-underline" ></div> 

    <div class="col-md-4"><p>Your Passport Copy</p> </div> 
    <div class="col-md-4 col-xs-12 pan_new_pass_front_label"> 
     <label class="btn btn-default btn-file btn-block" > 
     <h5 id="pan_new_pass_front_label">Attach Passport Front Page</h5> 
     <input type="file" name="pan_new_pass_front"  id="pan_new_pass_front" accept="image/*" /> 
    </label> 
    </div> 
    <div class="col-md-4 col-xs-12 input-group"> 
    <label class="btn btn-default btn-file btn-block"> 
    <h5 id="pan_new_pass_back_label">Attach Passport Address Page</h5> 
    <input type="file" name="pan_new_pass_back" id="pan_new_pass_back" accept="image/*" /> 
     </label> 
     </div> 

    <div class="col-md-4"><p>Your Visa Page</p></div> 
    <div class="col-md-offset-4 col-md-4 col-xs-12 input-group"> 
    <label class="btn btn-default btn-file btn-block"> 
    <h5 id="pan_new_visa_label">Attach Visa Page</h5> 
    <input type="file" name="pan_new_visa" id="pan_new_visa" accept="image/*" /> 
    </label> 
    </div> 
    <div class="col-md-4 "><p>Your Residency Proof in UAE</p></div> 
    <div class="col-md-offset-4 col-md-4 col-xs-12 input-group"> 
    <label class="btn btn-default btn-file btn-block"> 
    <h5 id="pan_new_proof_uae_label">Attach Proof Page</h5> 
    <input type="file" name="pan_new_proof_uae" id="pan_new_proof_uae" accept="image/*" /> 
    </label> 
    </div> 
    <div class="col-md-4"><p>Your Photo</p></div> 
    <div class="col-md-offset-4 col-md-4 col-xs-12 input-group"> 
    <label class="btn btn-default btn-file btn-block"> 
    <h5 id="pan_new_photo_label">Attach Passport Size Photo</h5> 
    <input type="file" name="pan_new_photo" id="pan_new_photo" accept="image/*" /> 
    </label> 
         </div> 
    <input type="button" class="btn btn-prev btn-style previous-button-style" value="prev" id="pan-step4-new-prev" /> 
    <input type="submit" class="btn btn-next btn-style previous-button-style" name="pan_new_submit" value="submit" id="pan_new_submit"/> 
    </fieldset> 

Answer 1

使用DropzoneJSです。 アップロードする前にファイルをプレビューし、アップロードする前にファイルを削除することもできます。