的Joomla 2.5 AJAX文件上传 [英] Joomla 2.5 ajax file upload
问题描述
我想通过我开发上的Joomla 2.5的组件上传文件，我需要支持不HTML5的浏览器不使用闪光灯。在1.5的Joomla我成功地使用这种方法，而是J2。 5后上传的文件，当返回的JSON响应，而不是上传我的网页，它只是显示了joomla.json文件下载对话框。我怎样才能成功地接受她在内的iframe JSON响应？
谢谢！
编辑：这是我使用code：
showUploadImage被加载页面后执行，但元素uploadIFrame并不总是存在（当不需要上传文件）。上传完成应该在与文件名的反应是：收到要执行，但我试图修正这个错误，这code没有被执行，而不是显示一个对话框来下载joomla.json
函数showUploadImage（EVT）{
如果（！的document.getElementById（uploadIFrame））{
返回false;
}
VAR帧=的document.getElementById（uploadIFrame）;
VAR DOC = frame.contentDocument;
页=\
＆LT; HTML＆GT; \
＆LT; HEAD＆GT; \
＆LT;链接相对=样式HREF ='＆LT; PHP的echo JROUTE :: _（'组件/ com_tutorial / CSS / base.css，假）; ？＆GT; TYPE =文本/ CSS/＆GT; \
＆LT;链接相对=样式HREF ='＆LT; PHP的echo JROUTE :: _（'组件/ com_tutorial / CSS / upframe.css'，假）; ？＆GT; TYPE =文本/ CSS/＆GT; \
＆LT; /头＆GT; \
＆LT;身体GT;;
页面+ ='\
＆LT; DIV ID =waitimage＆GT;＆LT; / DIV＆GT; \
＆LT;形式ID =fileUploadForm方法=邮报是enctype =的multipart / form-data的行动=＆LT; PHP的回声JRoute::_('index.php?option=com_tutorial&view=editchapter&task=savechapimage&format=json&tutId='.$this->tutId.'&chapterId='.$this->chapterId); ？＆gt;中目标=uploadTarget＆GT; \
＆LT;标签类=标题为=图像 - GT;＆LT; PHP的echo JText :: _（上传图片）; ？＆GT;＆LT; /标签＆gt; \
＆LT; DIV CLASS =separator25＆GT;＆LT; / DIV＆GT; \
＆LT; DIV ID =pageimages＆GT; \
＆LT; DIV ID =newimgfields＆GT; \
＆LT; DIV CLASS =controw＆GT; \
＆LT;标签类=标题为=形象＆GT;＆LT; PHP的echo JText :: _（'SELECT_FILE'）; ？＆GT;＆LT; /标签＆gt;＆LT;输入大小=35ID =图像类型=文件名称=形象/＆GT; \
＆LT; / DIV＆GT; \
＆LT; DIV CLASS =controw＆GT; \
＆LT;输入类型=提交的onclick =的document.getElementById（\'waitimage \'）的innerHTML = \'＆LT; DIV CLASS =＆放大器; QUOT; mooloader和放大器; QUOT;＆GT;＆LT; / DIV＆GT; \';值=＆LT; PHP的echo JText :: _（'UPLOAD_IMAGE'）;？＆gt;中/＆GT; \
＆LT; / DIV＆GT; \
＆LT; / DIV＆GT; \
＆LT; / DIV＆GT; \
＆LT; IFRAME ID =uploadTargetNAME =uploadTargetSRC =的风格=宽度：0;身高：0;边界：0px固体#FFF;＆GT;＆LT; / IFRAME＆GT; \
＆LT; /形式GT; \
';
网页+ =＆LT; /身体GT;＆LT; / HTML＆gt;中;
现在//写出新内容
如果（文件==未定义|| DOC == NULL）
DOC = frame.contentWindow.document;
doc.open（）;
doc.write（页）;
doc.close（）;
doc.getElementById（uploadTarget）的onload = uploadDone。
}
功能uploadDone（）{
VAR帧=的document.getElementById（uploadIFrame）;
VAR DOC = frame.contentDocument;
变种innerFrame = doc.getElementById（uploadTarget）;
VAR RET = innerFrame.contentDocument.getElementsByTagName（身体）[0] .innerHTML;
VAR数据=的eval（（+ RET +））;
警报（数据）;
如果（数据==0）{
警报（＆LT; PHP的echo JText :: _（'ERROR_SAVE_IMAGE'）;？＆gt;中）;
}
否则，如果（数据==）{
}
其他 {
VAR upImage =新元素（IMG，{
类：tutmainthumb，
ID：tutThumb，
SRC：？组件/ com_tutorial /助理/ image.php IMG ='+数据
}）;
upImage.inject（'tutImage'，'顶部'）;
$（'uploadIFrame'）的Dispose（）。
}
}
解决。原来，响应正在：收到的Contet类型：应用程序/ JSON，一切都工作得很好，当它是内容类型：text / html的;字符集= UTF-8。因此误差并不在JavaScript中，但在控制器中。解决它只需添加：
标题（内容类型：text / html的;字符集= UTF-8，真正的）;
冲洗（）;
回声json_en code（？（$ imgChanging大于0）$ thmbName：0）;
，其中回波是被送回的视图JSON消息
I want to upload files through a component that I'm developing on Joomla 2.5, I need to support not HTML5 browsers without flash. On Joomla 1.5 I successfully used this method , but on J2.5 after upload the file, when the json response is returned, instead of upload my page, it just shows the download dialog for joomla.json file. How can I successfully recieve the json response on the inner iframe?
Thanks!
Edit: this is the code I'm using:
showUploadImage is executed after the page is loaded, but element uploadIFrame is not always there (when upload file isn't needed). Upload done is supposed to be executed when the response with the file-name is recieved, but with the error that I'm trying to fix, this code is never executed, instead a dialog to download joomla.json is displayed
function showUploadImage(evt) {
if (!document.getElementById("uploadIFrame")) {
return false;
}
var frame = document.getElementById("uploadIFrame");
var doc = frame.contentDocument;
page = "\
<html> \
<head> \
<link rel='stylesheet' href='<?php echo JRoute::_('components/com_tutorial/css/base.css',false); ?>' type='text/css' /> \
<link rel='stylesheet' href='<?php echo JRoute::_('components/com_tutorial/css/upframe.css',false); ?>' type='text/css' /> \
</head> \
<body>";
page += ' \
<div id="waitimage"></div> \
<form id="fileUploadForm" method="post" enctype="multipart/form-data" action="<?php echo JRoute::_('index.php?option=com_tutorial&view=editchapter&task=savechapimage&format=json&tutId='.$this->tutId.'&chapterId='.$this->chapterId); ?>" target="uploadTarget"> \
<label class="title" for="images"><?php echo JText::_("UPLOAD IMAGE"); ?></label> \
<div class="separator25"></div> \
<div id="pageimages"> \
<div id="newimgfields"> \
<div class="controw"> \
<label class="title" for="image"><?php echo JText::_('SELECT_FILE'); ?></label><input size="35" id="image" type="file" name="image" /> \
</div> \
<div class="controw"> \
<input type="submit" onclick="document.getElementById(\'waitimage\').innerHTML=\'<div class = "mooloader"></div>\';" value="<?php echo JText::_('UPLOAD_IMAGE'); ?>" /> \
</div> \
</div> \
</div> \
<iframe id="uploadTarget" name="uploadTarget" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> \
</form> \
';
page += "</body></html>";
// now write out the new contents
if (doc == undefined || doc == null)
doc = frame.contentWindow.document;
doc.open();
doc.write(page);
doc.close();
doc.getElementById("uploadTarget").onload = uploadDone;
}
function uploadDone() {
var frame = document.getElementById("uploadIFrame");
var doc = frame.contentDocument;
var innerFrame = doc.getElementById("uploadTarget");
var ret = innerFrame.contentDocument.getElementsByTagName("body")[0].innerHTML;
var data = eval("("+ret+")");
alert(data);
if (data=="0"){
alert("<?php echo JText::_('ERROR_SAVE_IMAGE'); ?>");
}
else if (data=="") {
}
else {
var upImage = new Element('img',{
'class':'tutmainthumb',
'id':'tutThumb',
'src':'components/com_tutorial/helpers/image.php?img='+data
});
upImage.inject('tutImage','top');
$('uploadIFrame').dispose();
}
}
Solved. Turns out that the response was being recieved as "Contet-type: application/json", and everything worked fine when it was "Content-Type: text/html; charset=utf-8". So the error wasn't on the javascript, but in the controller. to fix it just add:
header("Content-Type: text/html; charset=utf-8",true);
flush();
echo json_encode(($imgChanging>0)?$thmbName:0);
where the echo is the json message that is being sent back to the view.
这篇关于的Joomla 2.5 AJAX文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
