JavaScriptを使用して入力タイプ[ファイル]から複数のファイルを読み込みます。

Question

テキストエリアとアップロード画像ボタンがあります。アップロード画像ボタンには複数のオプションがあります。ユーザーが2〜3枚の写真をテキストエリアにテキストとともにアップロードし、ボタンを押すと、関数UserPost（）に送信されます。ここでは、アップロードされたすべての画像を読むために入力タイプ[file]の内容を読み込むプロセスを知りたいと思います。以下は、コードです、親切に助けてください。

<div class="mainsection"> 
    <div> 
     <div class="pull-left postimage"> 
     <?php echo "<img src=profile_pic/".$ProfilePic ." />"; ?> 
     </div> 
     <div class="pull-left posttext"> 
      <div class="postname"><?php echo $Name; ?> 
      </div> 
      <p><?php echo $UT." - ".$Designation." - ".$Company; ?></p> 
     </div> 
     <textarea id="posting" name="posting" rows="2" 
     cols="50" placeholder="Share something here..."> 
     </textarea> 
     <div class="clear"></div> 
     <hr> 
    </div> 

      <!-- Show Image Preview --> 
    <table id="previewTable"> 
     <thead id="columns"></thead> 
     <tbody id="previews"></tbody> 
    </table> 

    <div class="fileUpload btn btn-default"> 
     <span> 
     <i class="fa fa-camera-retro" style="margin-right: 6px;" aria-hidden="true"> 
     </i>Upload Image 
     </span> 
     <input type="file" class="upload" id="input_clone" multiple /> 
    </div> 
    <div> 
     <input class="postall btn btn-primary pull-right" type="submit" onClick="UserPost()" value="Post"> 
    </div> 
    <div class="clear"></div> 
</div> 

これはUserPost（）関数である -

function UserPost() { 
     var x = document.getElementById('posting').value; 

     var timezone_offset_minutes = new Date().getTimezoneOffset(); 
     timezone_offset_minutes = timezone_offset_minutes == 0 ? 0 : -timezone_offset_minutes; 

     $.ajax({ 
     type: "POST", 
     url: "user-post.php?p="+x+"&tz="+timezone_offset_minutes, 
     success: function(data) { 
      $("#mainsectionID").load(" #mainsectionID"); 
      document.getElementById('posting').value=''; 
     } 
     }); 
     } 

Answer 1

それが行わしまった - あなたの質問を1として

<script> 
    function FileDetails() { 

     // GET THE FILE INPUT. 
     var fi = document.getElementById('file'); 

     // VALIDATE OR CHECK IF ANY FILE IS SELECTED. 
     if (fi.files.length > 0) { 

      // THE TOTAL FILE COUNT. 
      document.getElementById('fp').innerHTML = 
       'Total Files: <b>' + fi.files.length + '</b></br >'; 

      // RUN A LOOP TO CHECK EACH SELECTED FILE. 
      for (var i = 0; i <= fi.files.length - 1; i++) { 

       var fname = fi.files.item(i).name;  // THE NAME OF THE FILE. 
       var fsize = fi.files.item(i).size;  // THE SIZE OF THE FILE. 

       // SHOW THE EXTRACTED DETAILS OF THE FILE. 
       document.getElementById('fp').innerHTML = 
        document.getElementById('fp').innerHTML + '<br /> ' + 
         fname + ' (<b>' + fsize + '</b> bytes)'; 
      } 
     } 
     else { 
      alert('Please select a file.') 
     } 
    } 
</script> 

Answer 2

を、ここに私はコンテンツの読み出し処理を知りたいですアップロードされたすべての画像を読み込むための入力タイプ[ファイル]の一覧

私がお勧めするプロセスを知りたい場合はこのリンクを参照してくださいgo there and see how it works