使用html5/javascript和php上傳/更改頭像照片？

Question

我在看這個鏈接，它允許用戶通過頭像/個人資料照片拖動圖像，他們可以將圖像放在它上面，這將改變/上傳不同的圖像。

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

什麼，我現在正琢磨如何我可以使用PHP來上傳照片，會有人請能告訴我我怎麼能做到這一點？感謝

HTML：

<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(); 

})(); 

Answer 1

http://php.about.com/od/advancedphp/ss/php_file_upload.htm#step-heading

創建這樣一種形式：

<form enctype="multipart/form-data" action="upload.php" method="POST"> 
Please choose a file: <input name="uploaded" type="file" /><br /> 
<input type="submit" value="Upload" /> 
</form> 

，而PHP的將是這樣的：對於更多的選擇

$target = "upload/"; 
$target = $target . basename($_FILES['uploaded']['name']) ; 
$ok=1; 
if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target)){ 
echo "The file ". basename($_FILES['uploadedfile']['name']). " has been uploaded"; 
} 
else{ 
echo "Sorry, there was a problem uploading your file."; 
} 

（限制文件大小，擴展名等），檢查鏈接