채택완료

ajax formdata 수정.. 미치겠네요;;;

다중 파일 업로드를 드래그앤드랍으로 처리하려고 구글에서 예제를 찾아서 하고 있는데요..

파일을 보내는건 된건 같은데.. 서버쪽에서 어떻게 업로드를 해야 하는지 감이 안 잡힙니다;;

다중 업로드를 처리하는 스크립트

Copy
<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 << 여기를 어떻게 처리해야 파일을 서버에 올리는지 모르겠습니다...ㅠㅠ

Copy
<?phpinclude_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개 / 댓글 1개

채택된 답변
+20 포인트

크롬 개발자 도구를 여시고 네트워크탭에서 xhr 텝을 한번더 클릭합니다

그리고 업로드 진행하시면 출력되는부분있을텐데요 거기서 에러내용을 확인할수 있을거같습니다

에러내용먼저 확인후 수정하시면 될거같네요

답변에 대한 댓글 1개

네 감사합니다~ 골머리 싸매다 결국 해결했네요^^

답변을 작성하려면 로그인이 필요합니다.