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

时间:2015-08-14 04:15:24

标签: javascript php jquery html image

请查看说明和问题后面的屏幕截图。 enter image description here

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

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

代码是我添加HTML的PHP​​的一部分。 图像的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;
    }
 ?>

请让我知道如何完成这件事。

1 个答案:

答案 0 :(得分:0)

在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
}

我相信这是做你需要的简单方法......