다중 파일 업로드를 드래그앤드랍으로 처리하려고 구글에서 예제를 찾아서 하고 있는데요..
파일을 보내는건 된건 같은데.. 서버쪽에서 어떻게 업로드를 해야 하는지 감이 안 잡힙니다;;
다중 업로드를 처리하는 스크립트
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 포인트
naulab
2017-08-22 (화) 12:27:31
크롬 개발자 도구를 여시고 네트워크탭에서 xhr 텝을 한번더 클릭합니다
그리고 업로드 진행하시면 출력되는부분있을텐데요 거기서 에러내용을 확인할수 있을거같습니다
에러내용먼저 확인후 수정하시면 될거같네요
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.