使用 JavaScript 从输入类型 [file] 读取多个文件答案

【问题标题】：Read multiple files from input type[file] using JavaScript使用 JavaScript 从输入类型 [file] 读取多个文件
【发布时间】：2017-11-28 04:36:30
【问题描述】：

我有一个 textarea 和一个上传图片按钮，上传图片按钮有多个选项。当用户上传 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='';
        }
        });
        }

【问题讨论】：

标签： javascript html

【解决方案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>

【讨论】：

【解决方案2】：

根据你的问题，这里我想知道读取输入类型[file]的内容来读取所有上传的图片的过程

如果你想知道这个过程，我会推荐这个链接go there and see how it works

【讨论】：