从 HTML 表单上传 3 张图片。通过 Javascript 将图像发送到 PHP 以上传

Question

请查看描述和问题后面的屏幕截图。

如您所见，我需要从不同的块上传 3 个文件。这些块是根据数据库中的数据数量动态生成的。当我有 1 个文件要上传时，这完全正常，即图像预览功能 （onChange 它显示要上传的图像的预览） 并将其保存到相应的文件夹和创建的子文件夹在运行时。

现在，当我尝试添加更多文件上传时，图像预览功能不起作用，图像也不会保存到文件夹或子文件夹中。请在下面找到以下代码，请注意 cmets 以便更好地理解。

代码是 PHP 的一部分，我也在其中添加了 HTML。 图像的 HTML 表单以及功能的 javascript。

if($x==1){ ?>
        <form id='uploadForm-<?php echo $imgCnt; ?>' action = '' enctype='multipart/form-data' method = 'POST' class="form<?php echo $imgCnt; ?>">  
        <input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" />
                <input type="file"  class="image<?php echo $imgCnt; ?>" name="img1" onChange="readURL(this);" />
                <input type="file"  class="image<?php echo $imgCnt; ?>" name="img2" onChange="readURL(this);" />
        <?php if(!empty($imagepath)){ ?>
            <img id="blah" src="<?php echo $imagepath;?>" alt="your image" /><br/><br/>
        <?php } ?>
        <input type='button' id = '<?php echo $imgCnt; ?>' class='uploadPicture<?php echo $imgCnt; ?> btn btn-primary' value = 'Upload'>
        <!-- <input type="button" value="upload" class="uploadPicture"  id="upload_btn<?php echo $imgCnt; ?>"/> -->
    </form>
    <?php
    } else{
    ?>
    <form id='uploadForm-<?php echo $imgCnt; ?>' action = '' enctype='multipart/form-data' method = 'POST' class="form<?php echo $imgCnt; ?>">
        <input type="file"  class="image<?php echo $imgCnt; ?>" name="img" onChange="readURL(this);" />


        <img id="blah" src="#" alt="your image" /><br/><br/>
        <input type='button' id = '<?php echo $imgCnt; ?>' class='uploadPicture<?php echo $imgCnt; ?> btn btn-primary' value = 'Upload'>
        <!-- <input type="button" value="upload" class="uploadPicture"  id="upload_btn<?php echo $imgCnt; ?>"/> -->
    </form>
    <?php } ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>
        function readURL(input) {      
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    //$('#blah').attr('src', e.target.result).width(300).height(340);
                    $(input).next('img').attr('src', e.target.result).width(300).height(340);
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>


    <script type="text/javascript">
       $('.uploadPicture<?php echo $imgCnt; ?>').unbind().click( function(e) { 
        var form = $('.form<?php echo $imgCnt; ?>')[0];
        var file_data = $('.image<?php echo $imgCnt; ?>').prop('files')[0];
        var file_path = '<?php echo $testpath; ?>';
        var job_id    = '<?php echo $jobid; ?>';
        var form_data = new FormData(form);                  
        form_data.append('file', file_data);
        form_data.append('filepath', file_path);
        form_data.append('jobid', job_id);
        var edit_id = $(this).attr("id");
        $.ajax({
                url: "file.php",
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function (result) {
                        console.log(result)

                }               
            });
        });
    </script>

这是 Javascript 为要上传的图像调用的 PHP。

<?php
include('includes/config.php');
$upload = 'uploads/';
$userid = $_SESSION['userid'];

    $imagePath = $_POST['filepath'];

    $temp = explode(".", $_FILES["file"]["name"]);  
    $jobid    = $_POST['jobid'];
    $extension = end($temp);
    $filename = $_FILES["file"]["tmp_name"];
    if(!empty($userid)){
        $time = time();
        $dbimagepath  = $_POST['filepath'] . $time . '.' . $extension;      

                move_uploaded_file($filename, $imagePath . $time . '.' . $extension);  
        $sql  = "INSERT INTO tbl_image (user_id,job_id,image_path) VALUES ('$userid','$jobid','$dbimagepath')";
        mysqli_query($conn,$sql);
        echo "File Uploaded";
        exit;
    }else{
        echo "something went wrong";
        exit;
    }
 ?>

请告诉我如何完成这件事。

Answer 1

在 PHP 中，需要检查上传的文件是多个文件还是单个文件。因为count() 函数将帮助您做同样的事情。

if(count($_FILES)>0){
    //This means there are multiple files uploaded so your required to use a 
    //loop etc.
   foreach($_FILES as $file){
   //Process file upload using $file, $file['tmp_name'] or $file['filepath'] etc.
   }
}
else
{
    //only single file is uploaded
}

我相信这是满足您要求的简单方法...