我需要使用php将图像上传到文件夹中

时间:2017-01-22 07:19:38

标签: php jquery image resize crop

我需要使用php

将图像上传到文件夹中

我使用Cropit插件 链接:http://scottcheng.github.io/cropit/

这是我的代码:

Jquery:

<style>
  .cropit-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
   width: 436px;
      height: 580px;
  }

  .cropit-preview-image-container {
    cursor: move;
  }

  .image-size-label {
    margin-top: 10px;
  }

  input {
    display: block;
  }

  button[type="submit"] {
    margin-top: 10px;
  }

  #result {
    margin-top: 10px;
    width: 900px;
  }

  #result-data {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }
</style>

CSS:

<div align="center">

<form id="img" name="img" method="post" action="#" enctype="multipart/form-data">
  <div class="image-editor">
    <input type="file" class="cropit-image-input">
    <div class="cropit-preview"></div>
    <div class="image-size-label">
      Resize image
    </div>
    <input type="range" class="cropit-image-zoom-input">
    <input type="hidden" name="image-data" class="hidden-image-data" />

    <input name="submit" type="submit" value="Submit" />
  </div>
</form>

<div id="result">
  <code>$form.serialize() =</code>
  <code id="result-data"></code>

</div>


</div>


<script>
  $(function() {
    $('.image-editor').cropit();

    $('form').submit(function() {
      // Move cropped image data to hidden input
      var imageData = $('.image-editor').cropit('export');
      $('.hidden-image-data').val(imageData);

      // Print HTTP request params
      var formValue = $(this).serialize();
      $('#result-data').text(formValue);

      // Prevent the form from actually submitting
      return false;
    });
  });
</script>

HTML和JQUERY:

border-radius: 50%;

首先我提交图像,而不是使用jquery将base64值转换为div id,之后我想使用php将调整大小的图像上传到文件夹中。

预先感谢所有人:)

1 个答案:

答案 0 :(得分:0)

一种方法是使用Document Object Model

<?php
$randomDiv =
            "<div id='myId' class='myClass'>
                 //inner elements
             </div>";

$documentObj = new DOMDocument();
$documentObj->loadHtml($randomDiv);
$elementObj = $documentObj->getElementsByClassName('myClass');
echo($elementObj[0]->getAttribute('id'));
?>