ajax formdata 수정.. 미치겠네요;;;
본문
다중 파일 업로드를 드래그앤드랍으로 처리하려고 구글에서 예제를 찾아서 하고 있는데요..
파일을 보내는건 된건 같은데.. 서버쪽에서 어떻게 업로드를 해야 하는지 감이 안 잡힙니다;;
다중 업로드를 처리하는 스크립트
<script>
function sendFileToServer(formData,status)
{
// var uploadURL ="http://hayageek.com/examples/jquery/drag-drop-file-upload/upload.php"; //Upload URL
var uploadURL ="<?php echo G5_PLUGIN_URL ?>/upload/upload.php"; //Upload URL
var build_id ="<?=$build_id ?>";
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);
$("#status1").append("File upload Done<br>");
}
});
status.setAbort(jqXHR);
}
var rowCount=0;
function createStatusbar(obj)
{
rowCount++;
var row="odd";
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
obj.after(this.statusbar);
this.setFileNameSize = function(name,size)
{
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024)
{
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}
else
{
sizeStr = sizeKB.toFixed(2)+" KB";
}
this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress)
{
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if(parseInt(progress) >= 100)
{
this.abort.hide();
}
}
this.setAbort = function(jqxhr)
{
var sb = this.statusbar;
this.abort.click(function()
{
jqxhr.abort();
sb.hide();
});
}
}
function handleFileUpload(files,obj)
{
for (var i = 0; i < files.length; i++)
{
var fd = new FormData();
fd.append('file', files[i]);
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}
}
$(document).ready(function()
{
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
});
obj.on('drop', function (e)
{
$(this).css('border', '2px dotted #0B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
//We need to send dropped files to Server
handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
});
});
</script>
제일 중요한 서버쪽 PHP << 여기를 어떻게 처리해야 파일을 서버에 올리는지 모르겠습니다...ㅠㅠ
<?php
include_once('./_common.php');
global $g5, $config;
//$output_dir = G5_DATA_URL.'/build_file/'.$BUILD_ID.'/'.$BUILD_SEQ.'/';
$output_dir = G5_DATA_PATH.'/build_file/'.$BUILD_ID.'/'.$BUILD_SEQ.'/UPUPUP/';
if(is_dir($output_dir)){
echo "O";
}else{
echo "X";
@mkdir($output_dir, 0777);
}
for($i = 0; $i < $_POST['nbr_files']; $i++) { // Loop through each file
if(isset($_FILES["file_".$i]))
{
//Filter the file types , if you want.
if ($_FILES["file_".$i]["error"] > 0)
{
echo "Error: " . $_FILES["file_".$i]["error"] . "";
}
else
{
move_uploaded_file($_FILES["file_".$i]["tmp_name"], $output_dir. $_FILES["file_".$i]["name"]);
echo "Uploaded File :".$_FILES["file_".$i]["name"]."\n";
}
}
}
?>
답변 1
크롬 개발자 도구를 여시고 네트워크탭에서 xhr 텝을 한번더 클릭합니다
그리고 업로드 진행하시면 출력되는부분있을텐데요 거기서 에러내용을 확인할수 있을거같습니다
에러내용먼저 확인후 수정하시면 될거같네요
네 감사합니다~ 골머리 싸매다 결국 해결했네요^^
답변을 작성하시기 전에 로그인 해주세요.
