正在上传Cropped图像Jquery + PHP

时间:2015-12-29 17:38:39

标签: php jquery html image crop

你好我有一个HTML输入,当选择一个图像时,它会显示在一个div中,并使用一个名为Cropit的JQuery插件进行裁剪。

这是输入HTML ...

 <div class="image-editor">
 <input type="file" name="images[]"  multiple class="cropit-image-input" />

 <button type="submit" id="uploadFile" name="uploadFile">Upload files!</button>

  <div class="cropit-image-preview" id="images"></div>
  <div class="image-size-label">
    Resize image
  </div>
  <input type="range" class="cropit-image-zoom-input">

单击UploadFile按钮后,Jquery脚本将运行以裁剪图像。

 $(function() {
    $('.image-editor').cropit({
      imageState: {

      },
    });

    $('#uploadFile').click(function() {
      var imageData = $('.image-editor').cropit('export');
    open(imageData);

    });
  });

成功裁剪图像并将其显示在新窗口中。我相信这存储在data:variable中。它也有一个奇怪的URL。

表单会自动将用户带到publish.php,以处理数据。 php脚本将图像上传到文件夹并运行一些验证。图像成功上传但不是裁剪版本。它是随输入提交的标准版本。如何将裁剪版本发送到php文件?

这是我的php文件。

if( isset( $_POST[ "uploadFile" ] ) )
{

    uploadFiles();

}

function uploadFiles()
{

    $uploadFolder = "uploads/";

    //this line is going to go through each of the images if multiple images have been selected to be uploaded      
    //it takes each image (even if one image has been selected) and checks the file error state     
    //it finds out what that state is and stores it inside a variable called $error
    foreach ( $_FILES[ "images" ][ "error" ] as $key => $error ) 
    {

        //what was the state of that error - if it was OK - then continue
        //with the file uploading process
        if ( $error == UPLOAD_ERR_OK )
        {

            //reset the upload state to be ready to upload
            $uploadOk = 1;

            //this line takes the actual filename and stores it inside a variable called $name
            $name = $_FILES[ "images" ][ "name" ][ $key ];

            //this line get the file and retains the path to it
            $pathToFile = $uploadFolder . basename( $name );

            //this gets the file type
            $fileType = pathinfo( $pathToFile, PATHINFO_EXTENSION );

            //check the integrity (i.e. the data of the file) to make sure that it is of an image type
            $checkIfItIsAnImage = getimagesize( $_FILES[ "images" ][ "tmp_name" ][ $key ] );

            //do the integrity check
            if ( !$checkIfItIsAnImage )
            {                               

                echo "<h2>Sorry - one of those files was not an image type!</h2>";

                $uploadOk = 0;

            }

            //check to see if the file already exists
            if ( file_exists( $pathToFile ) ) 
            {

                echo "<h2>Sorry, file " . basename( $name ) . " already exists.</h2>";

                $uploadOk = 0;

            }   

            //check file size to see if it is larger than 1000kb            
            if ( $_FILES[ "images" ][ "size" ][ $key ] > 1000000 ) 
            {

                echo "<h2>Sorry, your file " . basename( $name ) . " is too large.</h2>";

                $uploadOk = 0;

            }

            //only allow certain file formats - if the file being uploaded is NOT any of these
            if( $fileType != "jpg" && $fileType != "png" && $fileType != "jpeg" && $fileType != "gif" )
            {

                echo "<h2>Sorry, only JPG, JPEG, PNG & GIF files are allowed.</h2>";

                $uploadOk = 0;

            }

            //check if $uploadOk is set to 0 by an error above
            if ( !$uploadOk ) 
            {

                echo "<h2>Sorry, your file " . basename( $name ) . " was not uploaded.</h2>";

            //if everything is ok, try to upload file   
            } else {

                //this is a PHP method that takes the data and uploads it to the uploads/ folder using the $uploadFolder variable, which defines where to put it on the server, using the variable $name as the file name
                if ( move_uploaded_file( $_FILES[ "images" ][ "tmp_name" ][ $key ], $uploadFolder . $name ) )
                {

                    echo "<h2>The file " . basename( $name ). " has been uploaded.</h2>";

                } else {

                    echo "<h2>Sorry, there was an error uploading your file.</h2>";

                }   

            }

        }

    }       

}

全部谢谢

0 个答案:

没有答案