使用文件上载将更多图像插入MySQL数据库

时间:2017-01-31 18:12:09

标签: php mysql

我有一个问题,选择插入到mysql数据库的图像,当我从上传选择图像(最多3),我进入mysql只选择最后一个图像,我想要选择所有图像< / p>

代码:

<?php include('../../include/conn.php'); ?>
<html>
<head></head>
<body>
<style type="text/css">
.thumbimage {
    float:left;
    width:100px;
    position:relative;
    padding:10px;
}
</style>

<form method="POST" action="imageuploadpro.php" enctype="multipart/form-data">
<tr><input id="imageupload" name="imageupload" type="file" class="imageupload" enctype="multipart/form-data" multiple accept=".gif,.jpg,.jpeg,.png"/>
<div id="wrapper">
    <td width="200" height="100" bgcolor="#DFF0FF">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <br />
   <tr><div id="preview-image"></div></tr></table></td>
</div>
 <input type="submit" name="submit_image" value="Upload">
</form>
<?php
if (!isset($_FILES['imageupload']['name']))
{
 echo "insert image";
}
else
{
$imagename=$_FILES["imageupload"]["name"]; 

//Get the content of the image and then add slashes to it 
$imagetmp=addslashes (file_get_contents($_FILES['imageupload']['tmp_name']));


//Insert the image name and image content in image_table
$insert_image="INSERT INTO `Annunci` (`image`,`name`) VALUES('$imagetmp','$imagename')";

mysql_query($insert_image);
}
?>

<div id="textDiv"></div>

<script type='text/javascript' src='./jquery-1.9.1.js'></script>

<script type="text/javascript">
var countImages = 0;

$("#imageupload").on('change', function () {
    var countFiles = $(this)[0].files.length;

    var imgPath = $(this)[0].value;
    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
    var image_holder = $("#preview-image");

    //image_holder.empty();

    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
        if (typeof (FileReader) != "undefined") {
            for (var i = 0; i < countFiles; i++) {
                if(countImages >=3 )
                {
var div = document.getElementById("textDiv");
    div.textContent = "Non puoi inserire più di 3 immagini";
    var text = div.textContent;
                {
                break;
                }
                }
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("<img />", {
                        "src": e.target.result,
              "class": "thumbimage" //questo imposta la dimensione delle immagini dichiarate nello stile(inizio)
                    }).appendTo(image_holder);
                }
                image_holder.show();
                reader.readAsDataURL($(this)[0].files[i]);
                countImages++;
            }
        }
        else {
            alert("It doesn't supports");
        }
    }
    else {
        alert('Formati consentiti gif - png - jpg');
    }
});
</script>
</body>
</html>

有人可以帮助我吗?

0 个答案:

没有答案