使用html5 / javascript和php上传/更改头像照片

我正在看这个链接，允许用户将图像拖到头像/个人资料照片上，他们可以将图像放到它上面，这将改变/上传不同的图像。

链接:http://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping/

我现在想知道的是我如何使用PHP上传照片，有人能告诉我如何做到这一点吗?由于

<title>Drag Avatar</title>
<link rel='stylesheet' href='style.css'>

<div class="page-wrap">
    <h1>Drag & Drop Image to Change Avatar</h1>
    <div class="profile">
        <div class="profile-avatar-wrap">
            <img src="images/256.jpg" id="profile-avatar" alt="Image for Profile">
        </div>
        <h2>Betty Miller</h2>
        <div class="location">Palo Alto, CA</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatem accusantium voluptas doloremque porro temporibus aut rerum possimus cum minus.</p>
    </div>
    <h3>You could do this with a file input too...</h3>
    <input type="file" id="uploader">
</div>
<!-- In real life, these scripts are combined -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="resample.js"></script>
<script src="avatar.js"></script>

resample.js:

var Resample = (function (canvas) {
 // (C) WebReflection Mit Style License
 function Resample(img, width, height, onresample) {
  var
   load = typeof img == "string",
   i = load || img;
  // if string, a new Image is needed
  if (load) {
   i = new Image;
   i.onload = onload;
   i.onerror = onerror;
  }
  i._onresample = onresample;
  i._width = width;
  i._height = height;
  load ? (i.src = img) : onload.call(img);
 }
 function onerror() {
  throw ("not found: " + this.src);
 }
 function onload() {
  var
   img = this,
   width = img._width,
   height = img._height,
   onresample = img._onresample
  ;
  // if width and height are both specified
  // the resample uses these pixels
  // if width is specified but not the height
  // the resample respects proportions
  // accordingly with orginal size
  // same is if there is a height, but no width
  var minValue = Math.min(img.height, img.width);
  width == null && (width = round(img.width * height / img.height));
  height == null && (height = round(img.height * width / img.width));
  delete img._onresample;
  delete img._width;
  delete img._height;
  // when we reassign a canvas size
  // this clears automatically
  // the size should be exactly the same
  // of the final image
  // so that toDataURL ctx method
  // will return the whole canvas as png
  // without empty spaces or lines
  canvas.width = width;
  canvas.height = height;
  // drawImage has different overloads
  // in this case we need the following one ...
  context.drawImage(
   // original image
   img,
   // starting x point
   0,
   // starting y point
   0,
   // image width
   minValue,
   // image height
   minValue,
   // destination x point
   0,
   // destination y point
   0,
   // destination width
   width,
   // destination height
   height
  );
  // retrieve the canvas content as
  // base4 encoded PNG image
  // and pass the result to the callback
  onresample(canvas.toDataURL("image/png"));
 }
 var context = canvas.getContext("2d"),
  // local scope shortcut
  round = Math.round
 ;
 return Resample;
}(
 this.document.createElement("canvas"))
);

avatar.js:

// Required for drag and drop file access
jQuery.event.props.push('dataTransfer');
// IIFE to prevent globals
(function() {
  var s;
  var Avatar = {
    settings: {
      bod: $("body"),
      img: $("#profile-avatar"),
      fileInput: $("#uploader")
    },
    init: function() {
      s = Avatar.settings;
      Avatar.bindUIActions();
    },
    bindUIActions: function() {
      var timer;
      s.bod.on("dragover", function(event) {
        clearTimeout(timer);
        if (event.currentTarget == s.bod[0]) {
          Avatar.showDroppableArea();
        }
        // Required for drop to work
        return false;
      });
      s.bod.on('dragleave', function(event) {
        if (event.currentTarget == s.bod[0]) {
          // Flicker protection
          timer = setTimeout(function() {
            Avatar.hideDroppableArea();
          }, 200);
        }
      });
      s.bod.on('drop', function(event) {
        // Or else the browser will open the file
        event.preventDefault();
        Avatar.handleDrop(event.dataTransfer.files);
      });
      s.fileInput.on('change', function(event) {
        Avatar.handleDrop(event.target.files);
      });
    },
    showDroppableArea: function() {
      s.bod.addClass("droppable");
    },
    hideDroppableArea: function() {
      s.bod.removeClass("droppable");
    },
    handleDrop: function(files) {
      Avatar.hideDroppableArea();
      // Multiple files can be dropped. Lets only deal with the "first" one.
      var file = files[0];
      if (typeof file !== 'undefined' && file.type.match('image.*')) {
        Avatar.resizeImage(file, 256, function(data) {
          Avatar.placeImage(data);
        });
      } else {
        alert("That file wasn't an image.");
      }
    },
    resizeImage: function(file, size, callback) {
      var fileTracker = new FileReader;
      fileTracker.onload = function() {
        Resample(
         this.result,
         size,
         size,
         callback
       );
      }
      fileTracker.readAsDataURL(file);
      fileTracker.onabort = function() {
        alert("The upload was aborted.");
      }
      fileTracker.onerror = function() {
        alert("An error occured while reading the file.");
      }
    },
    placeImage: function(data) {
      s.img.attr("src", data);
    }
  }
  Avatar.init();
})();