웹마스터 팁
Sketchbook5 모바일 게시판에 파일 업로드 기능 추가 하기
2012.11.28 15:11
그냥재미로님의 모바일 파일 업로드 지원 게시판이 있는데
요걸 잘하면 스케치북5 모바일 게시판도 업로드가 가능 하게 할 수 있지 않을 까해서
끄적이다 아주그냥 대공사를 하고 말았습니다 ㅠㅠ
테스트 기종
아이폰4S IOS 5.1.1
갤석시S3 4.1
모두 이상 없이 잘됩니다.
먼저 write_form.html 8번째 줄
<!--%import("css/board.css")-->
밑에 추가 해줍니다.
<!--%import("./js/ajaxfileupload.js")-->
<?php
include_once(_XE_PATH_.'/modules/file/file.class.php');
include_once(_XE_PATH_.'/modules/file/file.controller.php');
$oFileController = &getController('file');
if(!$_SESSION['_editor_sequence_']) $_SESSION['_editor_sequence_'] = 1;
$editor_sequence = $_SESSION['_editor_sequence_'] ++;
$oFileController->setUploadInfo($editor_sequence, $upload_target_srl);
$_SESSION['upload_info'][$editor_sequence]->enabled = true;
$_SESSION['upload_info'][$editor_sequence]->upload_target_srl = $upload_target_srl;
?>
<style type="text/css">
.success {
border-width: 1px;
border-style: dotted;
border-color: blueViolet;
padding: 10px;
}
.success img {
display: block;
}
.success a {
margin-left: 10px;
font-weight: bold;
}
</style>
<script type="text/javascript" >
jQuery.extend({
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error )
s.error( xhr, status, e );
// If we have some XML response text (e.g. from an AJAX call) then log it in the console
else if(xhr.responseText)
console.log(xhr.responseText);
}
});
function ajaxFileUpload()
{
if(document.getElementById('Filedata').value ==""){
alert("파일을 선택하세요");
return false;
}
var up=jQuery("#t_document_srl").attr("value");
jQuery.ajaxFileUpload
(
{
url:'index.php?&act=procFileIframeUpload',
secureuri:false,
fileElementId:'Filedata',
dataType: 'html',
data:{
mid: '{$mid}',
editor_sequence: '1',
uploadTargetSrl: up,
manual_insert: 'true'
},
success: function (frameId, data, status)
{
var frm = document.getElementById('ff');
var io = document.getElementById(frameId);
if(io.contentWindow)
{
var sourceFile = document.getElementById(frameId).contentWindow.uploaded_fileinfo.source_filename;
var uploadFile = document.getElementById(frameId).contentWindow.uploaded_fileinfo.uploaded_filename;
var document_srl = document.getElementById(frameId).contentWindow.uploaded_fileinfo.upload_target_srl;
var file_srl = document.getElementById(frameId).contentWindow.uploaded_fileinfo.file_srl;
}else if(io.contentDocument)
{
var sourceFile = document.getElementById(frameId).contentDocument.uploaded_fileinfo.source_filename;
var uploadFile = document.getElementById(frameId).contentDocument.uploaded_fileinfo.uploaded_filename;
var document_srl = document.getElementById(frameId).contentDocument.uploaded_fileinfo.upload_target_srl;
var file_srl = document.getElementById(frameId).contentDocument.uploaded_fileinfo.file_srl;
}
//frm.document_srl.value = document_srl;
jQuery("#t_document_srl").attr("value",document_srl);
// document.getElementById('Filedata').value ='aaa';
if(uploadFile != ""){
var Extension = uploadFile.substring(uploadFile.lastIndexOf('.') + 1).toLowerCase();
if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg" || Extension == "jpg") {
jQuery('<li id="'+file_srl+'" class="wrt_opt"></li>').appendTo('#files').html('<img width="50px" height="atuo" src="'+uploadFile+'" /><span class="filename">'+sourceFile+'</span><a href="javascript:delete_file('+file_srl+',1)" class="abn dark">{$lang->cmd_delete}</a>').addClass('success');
}
else
{
jQuery('<li id="'+file_srl+'" class="wrt_opt"></li>').appendTo('#files').html('<span class="filename">'+sourceFile+'</span><a href="javascript:delete_file('+file_srl+',1)" class="abn dark">{$lang->cmd_delete}</a>').addClass('success');
}
} else{
jQuery('<li></li>').appendTo('#files').text(sourceFile).addClass('error');
}
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(e);
}
}
)
return false;
}
function frmSubmit(){
var frm = document.getElementById('ff');
procFilter(frm, insert);
}
function delete_file(file_srl,editorSequence){
var msg = window.confirm('삭제하시겠습니까?');
if(msg)
{
var settings = file_srl;
var params = new Array();
params["file_srls"] = file_srl;
params["editor_sequence"] = editorSequence;
var response_tags = new Array("error","message");
exec_xml("file","procFileDelete", params, function() { reloadFileList(settings); } );
}else{
return false;
}
}
function reloadFileList(settings) {
jQuery("#"+settings).remove();
}
jQuery($).ready(function($){
$("#loading_dialog")
.ajaxStart(function(){
$(this).show();
$("#loading_form").hide();
})
.ajaxComplete(function(){
$(this).hide();
$("#loading_form").show();
});
});
</script>
그 다음 같은 파일에서
<li>
<label for="nText">{$lang->content}</label>
<textarea name="content" cols="20" rows="8" id="nText"></textarea>
</li>
요렇게 생긴 놈 밑에 추가 합니다.
<ul id="files" > </ul> <li class="wrt_locate"> <div id="loading_dialog" style="display:none"> <img id="loading" src="./img/loading.gif"> <p>잠시만 기다려 주세요</p> </div> <div id="loading_form"> <label for="nFileUpload">파일첨부</label> <input id="Filedata" type="file" name="Filedata" class="input" style="width:100%;" value=""> <button type="button" id="buttonUpload" onclick="return ajaxFileUpload();" class="btn">파일 업로드</button> <p>파일을 먼저 업로드하신 후 등록하세요</p> </div> </li>
그다음은 ./js/ 폴더에
이 파일을 올려 줍니다.
아마도 이렇게 하면 됩니다.
이게 힘들다 싶으면
이파일을 덮어 쓰셔도 됩니다.
댓글 14
-
hhgyu
2012.11.28 15:15
-
주니2
2012.11.28 16:21
수고하셨습니다^^ 혹 모바일로 찍어서 바로 올릴때, 사진 가로로 누워지는 현상은 없나요?
-
hhgyu
2012.11.28 16:38
제가 현재 쓰고 있는 아이폰4s 5.1.1
에는 바로찍어서 올리는 기능이 없네요 ㅠㅠ
-
주니2
2012.11.28 16:47
아 맞네요. 6.0에서 추가된거죠..ㅠㅠ
-
카이닉스
2012.11.29 21:42
디폴트 스킨에서도 적용될까요? -
abtB
2012.12.19 04:48
첨부파일 받아서 덮어씌웠는데 글을 연달아서 쓰면 새 글이 작성되는게 아니라 기존에 쓴 글이 수정되버리네요.. 엉엉 저만 그런가요..
-
드림교회
2013.01.08 15:03
연습페이지를 만들어 보았는데... 파일 첨부만 되는데요.
본문 삽입은 안되나요?
-
hhgyu
2013.01.14 22:14
-
드림교회
2013.01.15 14:22
정말 감사합니다.
지금 당장 확인해 보겠습니다.
-
혹시 아이폰에서도 가능한가요? 해당 애드온은 안드로이드만 되는것 같아서요//
-
hhgyu
2013.01.15 20:22
아마 상관 없이 가능 한걸로 압니다....
실제로 쓰고 있기도 하고요.
-
감사합니다. ^^
-
너클커브
2013.01.23 20:58
카르마님의 애드온을 함께 사용하면 모바일 상에서 업로드와 본문삽입이 잘 됩니다만...
http://www.xpressengine.com/21609591
위 Q&A에 질문 올렸던 현상이 발생합니다.
현재는 딱히 해결 방법이 없어 아래와 같이 사용중입니다.
카르마님의 애드온 기능중 본문삽입은 사용하지 않고 강제출력 기능만 사용..
즉 파일 첨부만 해서 사용중입니다.
-
준스타일
2013.03.25 11:12
좋은 정보 감사합니다.
코드 하이라이터가 비정상이네요