Question

我尝试了多种方法来做到这一点。我有技术堆栈作为bootstrap / php / mysql。我需要在文件系统或数据库中存储用户的个人资料图像。任何人都可以帮我提供示例代码吗？

我可以让自己达到生成裁剪文件并可以下载的水平。但进一步我被困在将它们保存到文件系统或数据库中。

                 <!-- Content -->
                            <!-- Default box -->
                  <div class="box collapsed-box">
                    <div class="box-header with-border">
                      <h3 class="box-title">Family Details</h3>

                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="collapse" title="Collapse">
                          <i class="fa fa-plus"></i></button>
                         <!--<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                          <i class="fa fa-times"></i></button>-->
                      </div>
                    </div>
                    <div class="box-body">
              <div class="container">
                <div class="row">
                  <div class="col-md-9">
                    <!-- <h3 class="page-header">Demo:</h3> -->
                    <div class="img-container">
                      <img id="image" src="" alt="Picture">
                    </div>
                  </div>
                  <div class="col-md-3">
                    <!-- <h3 class="page-header">Preview:</h3> -->
                    <div class="docs-preview clearfix">
                      <div class="img-preview preview-lg"></div>

                    </div>              

                  <div class="docs-buttons">                  
                    <div class="btn-group">

                      <!-- upload -->
                      <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                        <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
                        <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
                          <span class="fa fa-upload"></span>
                          Browse Image
                        </span>
                      </label>

                    </div>

                    <div class="btn-group btn-group-crop">
                     <!-- <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
                          Get Cropped Canvas
                        </span>
                      </button>
                      <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })">
                          160&times;90
                        </span>
                      </button>-->
                      <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 320 }">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 320 })">
                          Preview
                        </span>
                      </button>

                    <!-- Show the cropped image in modal -->
                    <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
                          </div>
                          <div class="modal-body"></div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Save</a>
                          </div>
                        </div>
                      </div>
                    </div><!-- /.modal -->
                  </div><!-- /.docs-buttons -->
              </div>
                </div>
                </div>

            <!-- add photo ends -->

==== PHP代码

        $target_dir = "../apppage/memImage/";
        $target_file = $target_dir . basename($_FILES["fileToUpload"][$filename]);
        $uploadOk = 1;
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        // Check if image file is a actual image or fake image
        if(isset($_POST["submit"])) {
            $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
            if($check !== false) {
                echo "File is an image - " . $check["mime"] . ".";
                $uploadOk = 1;
            } else {
                echo "File is not an image.";
                $uploadOk = 0;
            }
        }
        ?>

将fengyuanchen cropper图像移动到本地文件系统的示例

0 个答案: