PHP+jQuery_簡易的拖曳上傳 @ 備份區

jQuery部分

//設定兩個function控制使用者拖曳過去及拖曳後的動作

//滑鼠拖曳過去--停止預設動作

function dragoverHandler(evt) {

evt.preventDefault();
}

//拖曳後動作
function dropHandler(evt) {
evt.preventDefault();

//取得檔案物件
var files = evt.dataTransfer.files;

var formData = new FormData();

for(var i = 0 ; i < files.length ; i++)
{
formData.append('file[]',files[i]);
}

$.ajax({
url:"img_l.php",
data:formData,
type:'post',
processData: false,
contentType: false,
cache: false,
success:function(d){$("#up_progress").html(d);},
error:function(){$("#up_progress").html('ajax err');}
});
}

CSS部分

#dropDIV{
text-align: center;
width: 100%;
height: 500px;
margin: auto;
margin-left:10px;
border: dashed 2px gray;
}
#up_progress{
text-align:left;
vertical-align:text-top;
}
img{
max-height:200px;
max-width:300px;
}

HTML部分

拖曳圖片到此處上傳
<div id="up_progress"></div>
</div>

PHP部分--處理檔案(img_l.php)

//判斷$_FILE是否有變數
if(isset($_FILES['file']['error']))
{
echo "<table><tr>";

foreach($_FILES['file']['error'] as $key => $error)
{
$total = $total + 1;

if($total > 3 && $totale % 3 == 0)
{
echo '</tr><tr>';
}

$upload_dir = '../images/news_img/';
$upload_name = $_FILES['file']['name'][$key];
$upload_d = $upload_dir.$upload_name;

//檢查資料夾&檔案是否存在
if(is_dir($upload_dir))
{
if($error==UPLOAD_ERR_OK)
{
move_uploaded_file($_FILES['file']['tmp_name'][$key],$upload_d);

echo "<td>檔案:".$upload_name."上傳成功<br />";
}
else if($error!=UPLOAD_ERR_OK)
{
if($error == 1)
{
echo "<td>檔案:".$upload_name."已超過2MB限制，請重新選擇圖片或壓縮圖片在上傳。</td>";
}
else
{
echo sprintf('<td>上傳失敗,%d</td>',$error);
}
}
}
else
{
echo '資料夾不存在<br />';
}
}

echo "</tr></table>";
}