doudou_3636 2014-03-14 17:24
浏览 58
已采纳

通过PHP上传多个图像,并将所有图像的名称保存在mysql中的一行表中

I have a php upload script which have 2 files to process uploaded image. the first file contain html form and ajax script. this script work fine for uploading one image and save the image name and image patch to mysql table.

look at the codes:

Upload.php:

<?php    
if($loggedin) {
    $contents = "
<frame>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Ajax Upload and Resize with jQuery and PHP - Demo</title>
<script type=\"text/javascript\" src=\"Images/js/jquery-1.10.2.min.js\"></script>
<script type=\"text/javascript\" src=\"Images/js/jquery.form.min.js\"></script>

<script type=\"text/javascript\">
$(document).ready(function() { 

    var progressbox     = $('#progressbox');
    var progressbar     = $('#progressbar');
    var statustxt       = $('#statustxt');
    var completed       = '0%';

    var options = { 
            target:   '#output',   // target element(s) to be updated with server response 
            beforeSubmit:  beforeSubmit,  // pre-submit callback 
            uploadProgress: OnProgress,
            success:       afterSuccess,  // post-submit callback 
            resetForm: true        // reset the form after successful submit 
        }; 

     $('#MyUploadForm').submit(function() { 
            $(this).ajaxSubmit(options);            
            // return false to prevent standard browser submit and page navigation 
            return false; 
        });

//when upload progresses    
function OnProgress(event, position, total, percentComplete)
{
    //Progress bar
    progressbar.width(percentComplete + '%') //update progressbar percent complete
    statustxt.html(percentComplete + '%'); //update status text
    if(percentComplete>50)
        {
            statustxt.css('color','#fff'); //change status text to white after 50%
        }
}

//after succesful upload
function afterSuccess()
{
    $('#submit-btn').show(); //hide submit button
    $('#loading-img').hide(); //hide submit button

}

//function to check file size before uploading.
function beforeSubmit(){
    //check whether browser fully supports all File API
   if (window.File && window.FileReader && window.FileList && window.Blob)
    {

        if( !$('#imageInput').val()) //check empty input filed
        {
            $(\"#output\").html(\"Are you kidding me?\");
            return false
        }

        var fsize = $('#imageInput')[0].files[0].size; //get file size
        var ftype = $('#imageInput')[0].files[0].type; // get file type

        //allow only valid image file types 
        switch(ftype)
        {
            case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
                break;
            default:
                $(\"#output\").html(\"<b>\"+ftype+\"</b> Unsupported file type!\");
                return false
        }

        //Allowed file size is less than 1 MB (1048576)
        if(fsize>8388608) 
        {
            $(\"#output\").html(\"<b>\"+bytesToSize(fsize) +\"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.\");
            return false
        }

        //Progress bar
        progressbox.show(); //show progressbar
        progressbar.width(completed); //initial value 0% of progressbar
        statustxt.html(completed); //set status text
        statustxt.css('color','#000'); //initial color of status text


        $('#submit-btn').hide(); //hide submit button
        $('#loading-img').show(); //hide submit button
        $(\"#output\").html(\"\");  
    }
    else
    {
        //Output error to older unsupported browsers that doesn't support HTML5 File API
        $(\"#output\").html(\"Please upgrade your browser, because your current browser lacks some new features we need!\");
        return false;
    }
}

//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Bytes';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

}); 

</script>
<link href=\"Images/style/style.css\" rel=\"stylesheet\" type=\"text/css\">
</head>
<body>
<div id=\"upload-wrapper\">
<div align=\"center\">
<h3>Upload your Image</h3>
<span class=\"\">Image Type allowed: Jpeg, Jpg, Png and Gif. | Maximum Size 8 MB</span>
<form action=\"Process.php\" onSubmit=\"return false\" method=\"post\" enctype=\"multipart/form-data\" id=\"MyUploadForm\">
<input name=\"ImageFile\" id=\"imageInput\" type=\"file\" />
<input type=\"submit\"  id=\"submit-btn\" value=\"Upload\" />
<img src=\"Images/images/ajax-loader.gif\" id=\"loading-img\" style=\"display:none;\" alt=\"Please Wait\"/>
</form>
<div id=\"progressbox\" style=\"display:none;\"><div id=\"progressbar\"></div ><div id=\"statustxt\">0%</div></div>
<div id=\"output\"></div>
</div>
</div>

</body>
</html>
</frame>
                ";
}else header("Location: login.php?return=upload.php");
?>

And, this file is for processing the submitted form:

Process.php:

<?php
if(isset($_POST))
{
    ############ Edit settings ##############
    $ThumbSquareSize        = 100; //Thumbnail will be 200x200
    $BigImageMaxSize        = 300; //Image Maximum height or width
    $ThumbPrefix            = "thumb_"; //Normal thumb Prefix
    $DestinationDirectory   = '/www/site/Images/uploads/'; //specify upload directory ends with / (slash)
    $Quality                = 90; //jpeg quality
    ##########################################

    //check if this is an ajax request
    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
        die();
    }

    // check $_FILES['ImageFile'] not empty
    if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name']))
    {
            die('Something wrong with uploaded file, something missing!'); // output error when above checks fail.
    }

    // Random number will be added after image name
    $RandomNumber   = rand(0, 9999999999999); 

    $ImageName      = str_replace(' ','-',strtolower($_FILES['ImageFile']['name'])); //get image name
    $ImageSize      = $_FILES['ImageFile']['size']; // get original image size
    $TempSrc        = $_FILES['ImageFile']['tmp_name']; // Temp name of image file stored in PHP tmp folder
    $ImageType      = $_FILES['ImageFile']['type']; //get file type, returns "image/png", image/jpeg, text/plain etc.

    //Let's check allowed $ImageType, we use PHP SWITCH statement here
    switch(strtolower($ImageType))
    {
        case 'image/png':
            //Create a new image from file 
            $CreatedImage =  imagecreatefrompng($_FILES['ImageFile']['tmp_name']);
            break;
        case 'image/gif':
            $CreatedImage =  imagecreatefromgif($_FILES['ImageFile']['tmp_name']);
            break;          
        case 'image/jpeg':
        case 'image/pjpeg':
            $CreatedImage = imagecreatefromjpeg($_FILES['ImageFile']['tmp_name']);
            break;
        default:
            die('Unsupported File!'); //output error and exit
    }

    //PHP getimagesize() function returns height/width from image file stored in PHP tmp folder.
    //Get first two values from image, width and height. 
    //list assign svalues to $CurWidth,$CurHeight
    list($CurWidth,$CurHeight)=getimagesize($TempSrc);

    //Get file extension from Image name, this will be added after random name
    $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
    $ImageExt = str_replace('.','',$ImageExt);

    //remove extension from filename
    $ImageName      = preg_replace("/\\.[^.\\s]{3,4}$/", "", $ImageName); 

    //Construct a new name with random number and extension.
    $NewImageName = $ImageName.'-'.$RandomNumber.'.'.$ImageExt;
    $NewThumbImageName = $ThumbPrefix.$NewImageName;

    //set the Destination Image
    $thumb_DestRandImageName    = $DestinationDirectory.$ThumbPrefix.$NewImageName; //Thumbnail name with destination directory
    $DestRandImageName          = $DestinationDirectory.$NewImageName; // Image with destination directory

    //Resize image to Specified Size by calling resizeImage function.
    if(resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType))
    {
        //Create a square Thumbnail right after, this time we are using cropImage() function
        if(!cropImage($CurWidth,$CurHeight,$ThumbSquareSize,$thumb_DestRandImageName,$CreatedImage,$Quality,$ImageType))
            {
                echo 'Error Creating thumbnail';
            }
        /*
        We have succesfully resized and created thumbnail image
        We can now output image to user's browser or store information in the database
        */

        // Insert info into database table!
    $chkquery = mysql_query("SELECT * FROM `ID_Card` WHERE `UserName`='{$ir['username']}'")or die(mysql_error());
        if(mysql_num_rows($chkquery) > 0){

            while($chkquerys = @mysql_fetch_array($chkquery)){
            $answer=$chkquerys['Approved'];
                if($answer == 1) {
                        echo '<table width="100%" border="0" cellpadding="4" cellspacing="0">';
                        echo '<tr>';
                        echo '<td align="center"> some text:<br><br> <img src="'.$chkquerys['ImageName'].'" alt="Image"></td>';
                        echo '</tr>';
                        echo '</table>';
                        die();

                }if($answer == 0) {
                        echo '<table width="100%" border="0" cellpadding="4" cellspacing="0">';
                        echo '<tr>';
                        echo '<td align="center"> some text:<br><br> <img src="'.$chkquerys['ImagePath'].''.$chkquerys['ImageName'].'" alt="Image"></td>';
                        echo '</tr>';
                        echo '</table>';
                        die();
                }

            }
        }   else{
        /* DB Connect code goes here... */
        mysql_query("INSERT INTO `Images`(Id,`UserName`,`ImageName`,`ThumbName`,`ImagePath`,`Approved`,`Ip`,`Date`)
        VALUES (Null,'Null','$NewImageName','$NewThumbImageName','Images/uploads/','0','IP',unix_timestamp())")or die(mysql_error());}

        echo '<table width="100%" border="0" cellpadding="4" cellspacing="0">';
        echo '<tr>';
        echo '<td align="center">Dear '.$ir['username'].', your Image was uploaded successfully. please waiting for review and verify.</td>';
        echo '</tr><tr>';
        echo '<td align="center"><img src="Images/uploads/'.$NewImageName.'" alt="Resized Image"></td>';
        echo '</tr>';
        echo '</table>';


        }else{
        die('Resize Error'); //output error
    }
}


// This function will proportionally resize image 
function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)
{
    //Check Image size is not 0
    if($CurWidth <= 0 || $CurHeight <= 0) 
    {
        return false;
    }

    //Construct a proportional size of new image
    $ImageScale         = min($MaxSize/$CurWidth, $MaxSize/$CurHeight); 
    $NewWidth           = ceil($ImageScale*$CurWidth);
    $NewHeight          = ceil($ImageScale*$CurHeight);
    $NewCanves          = imagecreatetruecolor($NewWidth, $NewHeight);

    // Resize Image
    if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))
    {
        switch(strtolower($ImageType))
        {
            case 'image/png':
                imagepng($NewCanves,$DestFolder);
                break;
            case 'image/gif':
                imagegif($NewCanves,$DestFolder);
                break;          
            case 'image/jpeg':
            case 'image/pjpeg':
                imagejpeg($NewCanves,$DestFolder,$Quality);
                break;
            default:
                return false;
        }
    //Destroy image, frees memory   
    if(is_resource($NewCanves)) {imagedestroy($NewCanves);} 
    return true;
    }

}

//This function corps image to create exact square images, no matter what its original size!
function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType)
{    
    //Check Image size is not 0
    if($CurWidth <= 0 || $CurHeight <= 0) 
    {
        return false;
    }

    //abeautifulsite.net has excellent article about "Cropping an Image to Make Square bit.ly/1gTwXW9
    if($CurWidth>$CurHeight)
    {
        $y_offset = 0;
        $x_offset = ($CurWidth - $CurHeight) / 2;
        $square_size    = $CurWidth - ($x_offset * 2);
    }else{
        $x_offset = 0;
        $y_offset = ($CurHeight - $CurWidth) / 2;
        $square_size = $CurHeight - ($y_offset * 2);
    }

    $NewCanves  = imagecreatetruecolor($iSize, $iSize); 
    if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize, $iSize, $square_size, $square_size))
    {
        switch(strtolower($ImageType))
        {
            case 'image/png':
                imagepng($NewCanves,$DestFolder);
                break;
            case 'image/gif':
                imagegif($NewCanves,$DestFolder);
                break;          
            case 'image/jpeg':
            case 'image/pjpeg':
                imagejpeg($NewCanves,$DestFolder,$Quality);
                break;
            default:
                return false;
        }
    //Destroy image, frees memory   
    if(is_resource($NewCanves)) {imagedestroy($NewCanves);} 
    return true;

    }

}

As I said this Script works prefect for one file... But, how can I change it to work with 3 differents image field? (all fields are required.)

I want to upload 3 images and save all the uploaded image to one row of a table in database. for example, I want to have these 3 fields in my form:

<label>Image #1:</label><input name="ImageFile1" type="file" >
<label>Image #2:</label><input name="ImageFile2" type="file" >
<label>Image #3:</label><input name="ImageFile3" type="file" >

after submitting the form, proccess.php upload files and save the name of images in one same row. for example:

mysql_query("INSERT INTO `Images`(Id,`UserName`,`ImageName1`,`ImageName2`,`ImageName3`,`ImagePath`,`Approved`,`Ip`,`Date`)
                           VALUES (Null,'Null','$ImageName1','$ImageName2','$ImageName3','Images/uploads/','0','IP',unix_timestamp())")or die(mysql_error());}

Is that possible to do? Thank you :)

  • 写回答

1条回答 默认 最新

  • doulun1915 2014-03-14 17:43
    关注

    Try setting the same name as an array such as:

    <label>Image #1:</label><input name="ImageFile[]" type="file" >
    <label>Image #2:</label><input name="ImageFile[]" type="file" >
    <label>Image #3:</label><input name="ImageFile[]" type="file" >
    

    Then you can loop the images like this (or pretty much like this):

      $array = array();
      foreach($_FILES['ImageFile'] as $img) {
         // $img['name']
         // $img['tmp']
         // ...
         // upload
         // $array[] = {{the uploaded image}}
      }
    

    So now you can have as much images as you want. Put the result in an array ($array in that case) and just explode (or implode) like this: `explode(',',$array);

    If you want a multiple image uploader, add the multiple in the input:

    <label>Image #1:</label><input name="ImageFile[]" type="file" multiple="multiple">
    

    This all works in my own codes, I just don't remember explode or implode, multiple="multiple" or multiple or multiple="true". You can Google that, though.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 JETSON NANO
  • ¥15 VS开发qt时如何在paintgl函数中用pushbutton控制切换纹理
  • ¥20 关于 openpyxl 处理excel文件地问题
  • ¥15 MS中不知道高分子的构型怎么构建模型
  • ¥60 QQOP数据,什么是op数据号,怎么提取op数据!能不能大量提取(语言-c语言)
  • ¥15 matlab代码 关于微分方程和嵌套的分段函数。
  • ¥15 onlyoffice编辑完后立即下载,下载的不是最新编辑的文档
  • ¥15 求caverdock使用教程
  • ¥15 Coze智能助手搭建过程中的问题请教
  • ¥15 12864只亮屏 不显示汉字