多个图片上传问题

时间:2016-06-13 16:39:04

标签: javascript php image-uploading filereader

我正在尝试在数据库中插入多个图像。在提交时,我只在$ _FILES []中获得一个图像细节。 为什么其他提交的图像没有以数组形式显示?

另外,upload.php有错误说 第15行的C:\ xampp \ htdocs \ kabootar \ upload.php中的数组到字符串转换

$targetFile = $targetDir.$fileName; 

我如何解决这些问题?

HTML

    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="submit" value="Upload" name="upload">

        <label class="add">Select more..</label>
         <div class="prep">

        <div class="col-md-4">
            <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img" />
   <input type="file" class="inputimg" name="multiple_uploaded_files[]" />
        </div>


         </div>

    </form> 

的javascript

<script type="text/javascript">
$(document).on("click", ".img", function () {

    $(this).closest("div").find(".inputimg").trigger("click");
});

var count = 1;
$(".add").on("click", function () {
    count++;
    if(count <= 5){
        var row = '<div class="col-md-4"> <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" />\n\
       ';
    $(".prep").append(row);

    $(".inputimg").change(function () {
        console.log(this);
        readURL(this);
    });
    }else{
        alert('You are only allowed to add uptp 5 images');
    }


});
$(".inputimg").change(function () {
    readURL(this);
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(input).siblings('.img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

upload.php的

if(isset($_POST['upload']))
{

if(!empty($_FILES)){

  foreach ($_FILES['multiple_uploaded_files']['name'] as $file)
 {
    $targetDir = "upload/";
    $fileName = $_FILES['multiple_uploaded_files']['name'];   
    $targetFile = $targetDir.$fileName; 
        //use the move_uploaded_file() to move your file on your server directory.
if(move_uploaded_file($_FILES['multiple_uploaded_files']['tmp_name'][$file], $targetFile))
{
        //insert file information into db table
 $sql = mysqli_query($link,"INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
 echo 'file inserted';  
 }
    else
    {
        echo 'Query not working';
    }

}
        //fire an insert query that inserts all the file names with comma separated value
    }
else
{
    echo 'No file selected';
}

1 个答案:

答案 0 :(得分:1)

您正在尝试使用数组$ _FILES ['multiple_uploaded_files'] ['name']连接字符串。对于Array to string conversion error

替换代码

$fileName = $_FILES['multiple_uploaded_files']['name'];   

$fileName = $file;   (or)
$fileName = $_FILES['multiple_uploaded_files']['name'][0];   

单个文件上传问题。您尚未在javascript代码中为输入标记添加name属性。

替换

    var row = '<div class="col-md-4"> <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" />\n\';

    var row = '<div class="col-md-4"> <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" name="multiple_uploaded_files[]"/>\n\';

注意:为输入标记添加了name属性。