سكربت لرفع الصور بطريقة Drag and Drop

سكربت لرفع الصور بطريقة Drag and Drop

أولا ماهي طريقة Drag and Drop :
طريقة Drag and Drop هي سحي الصور ثم تركها ليتم رفعها
طريقة تركيب السكربت :
html5-drag-and-drop-multiple-file-uploader
السكربت مبرمج بلغة الـhtml
الخطوات :

الخطوة 1 :في الأندكس ضع هذا الكود index.html

----------------------------


<div class="container">

<div class="contr"><h2>Drag and Drop your images to 'Drop Area' (up to 5 files at a time, size - under 256kb)</h2></div>

<div class="upload_form_cont">

<div id="dropArea">Drop Area</div>
<div class="info">

url" value="http://www.script-tutorials.com/demos/257/upload
<div>Files left: <span id="count">0</span></div>
            <div>Destination url: <input id=
".php"/></div>
            <h2>Result:</h2>
            <div id="result"></div>
            <canvas width="500" height="20"></canvas>
        </div>
    </div>
</div>


<script src="js/script.js"></script>

----------------

الخطوة 2 : الـCSScss/main.css

----------------------


.container {

overflow:hidden;

width:960px;

uto;
}
.contr {
    b

margin:20px 

aackground-color: #212121;

ding: 10px 0;
    t

color: #FFFFFF;

pa

dext-align: center;

x 10px 0 0;
    -moz-border-radi
border-radius:10
pus:10px 10px 0 0;

radius:10px 10px 0 0;
}
.upload_form_con
-webkit-border
-t {

ackground: -moz-linear-gradient(#ffffff, #f2f2f2);
    
bbackground: -ms-linear-gradient(#ffffff, #f2f2f2);

eft bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(#ffffff, #f
background: -webkit-gradient(linear, left top, 
l2f2f2);
    background: -o-linear-gradient(#ffffff, #f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');

olor: #000;
    overflow: hidden;
}
.info {
    background-color: #EEEEEE;
    border: 1px solid #DDDDDD;
   
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
    background: linear-gradient(#ffffff, #f2f2f2);

    
c float: left;
    font-weight: bold;
    height: 530px;
    margin: 20px;
    position: relative;
    width: 560px;
}
.info > div {
    font-size: 14px;
    font-weight: bold;
    padding: 10px 15px 5px;
}
.info > h2 {
    padding: 0 15px;
}
.info > canvas {

;
    margin: 20px;
  
margin-left: 15px;
    margin-bottom: 10px;
}
.info #url {
    width: 400px;
}
#dropArea {
    background-color: #DDDDDD;
    border: 3px dashed #000000;
    float: left;
    font-size: 48px;
    font-weight: bold;
    height: 530px;
    line-height: 530p
x  position: relative;
    text-align: center;
    width: 300px;
}
#dropArea.hover {
    background-color: #CCCCCC;
}
#dropArea.uploading {
    background: #EEEEEE url(loading.gif) center 30% no-repeat;
}
#result .s, #result .f {
    font-size: 12px;
    margin-bottom: 10px;


padding: 10px;

    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#result .s {
    background-color: #77fc9f;
}
#result .f {
    background-color: #fcc577;

الخطوة 3 : js/script.js




// variables

var dropArea = document.getElementById('dropArea');

var canvas = document.querySelector('canvas');

t = document.getElementById('count');


var context = canvas.getContext('2d');

var cou

nvar destinationUrl = document.getElementById('url');

st = [];
var totalSize = 0;
var totalProgress =

var result = document.getElementById('result');

var l

i 0;

/ main initialization

/(function(){


dlers
    function i
// init ha
nnitHandlers() {

r('dragover', handleDragOver, false);
    }

    // draw prog
dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListen
eress
    function drawProgress(progress) {
        context.clearRect(0, 0, canvas.width, canvas.height); // clear context

        context.beginPath();

Path();

        // draw progress (as te
context.strokeStyle = '#4B9500';
        context.fillStyle = '#4B9500';
        context.fillRect(0, 0, progress * 500, 20);
        context.clos
ext)
        context.font = '16px Verdana';
        context.fillStyle = '#000';
        context.fillText('Progress: ' + Math.floor(progress*100) + '%', 50, 15);
    }

    // drag over

rop(event) {
        event.stopPropa
function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();

        dropArea.className = 'hover';
    }

    // drag drop
    function handle
Dgation();
        event.preventDefault();

        processFiles(event.dataTransfer.files);
    }

    // process bunch of files
    function processFiles(filelist) {

i = 0; i < filelist.length && i < 5; i++) {
            list.pus
if (!filelist || !filelist.length || list.length) return;

        totalSize = 0;
        totalProgress = 0;
        result.textContent = '';

        for (va
rh(filelist[i]);
            totalSize += filelist[i].size;
        }
        uploadNext();
    }

    // on complete - start next file
    function handleComplete(size) {
        totalProgress += size;

Progress(progress / totalSize);
    }

    // up
drawProgress(totalProgress / totalSize);
        uploadNext();
    }

    // update progress
    function handleProgress(event) {
        var progress = totalProgress + event.loaded;
        dra
wload file
    function uploadFile(file, status) {

        // prepare XMLHttpRequest
        var xhr = new XMLHttpRequest();
        xhr.open('POST', destinationUrl.value);
        xhr.onload = function() {

mplete(file.size);
        };
        xhr.upload.o
result.innerHTML += this.responseText;
            handleComplete(file.size);
        };
        xhr.onerror = function() {
            result.textContent = this.responseText;
            handleC
onprogress = function(event) {
            handleProgress(event);
        }
        xhr.upload.onloadstart = function(event) {
        }

        // prepare FormData
        var formData = new FormData();
        formData.append('myfile', file);

t();
            if (nextFi
xhr.send(formData);
    }

    // upload next file
    function uploadNext() {
        if (list.length) {
            count.textContent = list.length - 1;
            dropArea.className = 'uploading';

            var nextFile = list.shi
fle.size >= 262144) { // 256kb
                result.innerHTML += '<div class="f">Too big file (max filesize exceeded)</div>';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {


dropArea.className = '';
        }
    }
    initHandlers();

})();

وآخر شئ الخطوة 4 :

upload.php


<?php

/ set error reporting level




/if (version_compare(phpversion(), '5.3.0', '>=') == 1)

error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);

ytes

else

error_reporting(E_ALL & ~E_NOTICE);

unction 
f

bToSize1024($bytes, $precision = 2) {

return @round($bytes / pow(1024, 

$unit = array('B','KB','MB');



($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}


]['name'];
    $sFileType = $_F
if (isset($_FILES['myfile'])) {
    $sFileName = $_FILES['myfile
'ILES['myfile']['type'];
    $sFileSize = bytesToSize1024($_FILES['myfile']['size'], 1);


ved.</p>
    <p
echo <<<EOF
<div class="s">
    <p>Your file: {$sFileName} has been successfully rece
i>Type: {$sFileType}</p>
    <p>Size: {$sFileSize}</p>
</div>
EOF;
} else {


echo '<div class="f">An error occurred</div>';


}

للمعاينة من هنا :

أو للمعاينة من هذا الرابط

هذه نهاية التدوينة شكرا لكم وكلمة شكر تكفيني