无刷新上传文件-tutorial php-php.cn

用php想做一个像大多数论坛那样发帖子时能插入图片的功能。网上查了一下，input type='file' 写在

form中，当form submit时页面会自动更新，如果把target指向一个隐藏的iframe就能实现无刷新上传文

件。文件是能够成功上传了，但是问题出现在后台生成的文件保存路径不能同步更新到当前的页面当中来。所以

不能做到像csdn那样上传完成图片之后能把对应的路径写在编辑框里面。

不知道有什么好的办法能解决这个问题。发现我现在写不动了。求助。

回复讨论(解决方案)

把对应的路径写在编辑框里面?
只能写到 input type=text 或其他控件中，但不能写到 input type=file 中

iframe 需命名或有id，接收程序 echo 图片路径
取回时用
s = document.iframe名.document.body.innerHTML
id 时类似

我是这样子的：当form 提交了之后后台的处理程序就以$this->filepath = (对应生成的路径名)的形式提交到iframe（不知道这样子有没有问题）然后在页面中document.getElementById("iframe").innerHTML 的形式获取后台传回来的数据。可是总是不能得到数据。好像iframe中不能同步一样

quote=引用 1 楼 xuzuning 的回复:]
把对应的路径写在编辑框里面?
只能写到 input type=text 或其他控件中，但不能写到 input type=file 中

iframe 需命名或有id，接收程序 echo 图片路径
取回时用
s = document.iframe名.document.body.innerHTML
id 时类似

大概的程序这样子

html里面<script>  function upload(){    $("#formUploadpic").submit() ;   }     function getPath(){    document.getElementById("ifram").innerHTML ; }</script><form id="formUploadpic" name="formUploadpic" enctype="multipart/form-data" method="post" action="" target="ifram">   <input type="file"><input type="button" value="上传" OnClick="upload.call(this)"></form><iframe style="width:0; height:0" name="ifram"><{$path}></iframe>后台程序function newTopic(){   if (//有文件){      //上传文件返回文件路径       $this->path = 文件保存路径              echo "<script>window.parent.getPath() ;</script>" //就是在这里显示路径为空的，好像没有更新上去一样。   }}

Salin selepas log masuk

function getPath(){
document.getElementById("ifram").innerHTML ;
}
<{$path}>

哪里来的 id='ifram'
何况在 iframe 调用的函数，还是以 iframe 为基准呢

而且关于获取光标位置的问题，在IE下是无解的。只能在webkit浏览器下正常。我测试了一下csdn也是这样的。

哪来的获取光标位置一说？

引用 6 楼 xjl756425616 的回复:而且关于获取光标位置的问题，在IE下是无解的。只能在webkit浏览器下正常。我测试了一下csdn也是这样的。哪来的获取光标位置一说？

看来版主大人没做过编辑器哇~
提交到一个隐藏域之后，图片进行上传处理，整个过程是无刷新的，没错
但是你要把图片的地址返回到textarea中，for example,
11111111
//光标点击这里，再去上传图片，webkit下可以做到，图片显示在这位置，
//但是IE的话，当处理图片时，会失去光标焦点，图片无法做到在这里显示
2222222

真可谓：无知者无畏

//img.my.csdn.net/uploads/201303/16/1363434181_6561.jpg][/img]

function getPath(){
document.getElementById("ifram").innerHTML ;
}
<{$path}>

哪里来的 id='ifram'
何况在 iframe 调用的函数，还是以 ifram……

漏了.....我再试试看行不行

而且关于获取光标位置的问题，在IE下是无解的。只能在webkit浏览器下正常。我测试了一下csdn也是这样的。

这个问题我考虑过，但是没有写到那个地方，卡在了上传这个部分。
现在我做的确实是把图片的地址返回到textarea中，还有其它的办法没。

真可谓：无知者无畏

没经过考察，别那么快下定论~你可以看看
C:\Documents and Settings\Administrator\桌面\YouYaX_V12_UTF8\ORG\UBB\ORG\UBB\UploadForEditor.class.php
第41行开始，ie下我只能把图片放在最后
试过用cookie之类的，只能越来越混乱，网上找了很多资料~包括也有人提到的类似问题~
IE下光标消失，
不信么你用IE浏览器试试csdn的图片上传功能~
看我所言是否属实~

只要你不是闭门造车，认真提取别人的意见。怎么会有这样的结论呢？
http://www.baidu.com/baidu?word=%E5%85%89%E6%A0%87%E5%A4%84%E6%8F%92%E5%85%A5&ie=utf-8

这是我以前希望的代码（IE专用）

<SCRIPT>  function storeCaret (textEl) { if (textEl.createTextRange)  textEl.caretPos = document.selection.createRange().duplicate();  } function insertAtCaret (textEl, text) { if (textEl.createTextRange && textEl.caretPos) { var caretPos = textEl.caretPos; caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;  }  else  textEl.value = text; }  </SCRIPT>  <FORM NAME="aForm"> <TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);"> 这是例子，你可以在这里添加文字、插入文字。 </TEXTAREA>  <BR>  <INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="我要在光标处插入这些文字"><BR> <INPUT TYPE="button" VALUE="我要在光标处插入上面文本框里输入的文字！" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);"> </FORM>

Salin selepas log masuk

本帖最后由 xuzuning 于 2013-03-16 21:13:41 编辑
只要你不是闭门造车，认真提取别人的意见。怎么会有这样的结论呢？
http://www.baidu.com/baidu?word=%E5%85%89%E6%A0%87%E5%A4%84%E6%8F%92%E5%85%A5&ie=utf-8

这是我以……

因为你没有做过web编辑器，所以我和楼主想的可能版主你不大理解~
你的代码的确可以，因为在IE浏览器下，你的光标位置没有消失。
所谓光标的消失，其实指的是文本选中对象的消失。
一个光标点击在一个地方，或是选中某段文本，就会产生一个对象
IE下为 document.selection.createRange()
webkit下则显示的是位置信息 selectionStart 和 selectionEnd
当弹出上传对话框时,提交到隐藏域，图片经过php文件处理后，
IE浏览器下的parent.document.selection.createRange()为空，意味着光标消失了。
而webkit下，selectionStart 和 selectionEnd仍然保持有值，所以能够插入到鼠标所点击的位置
你只要做一下就能体会了~或者你试试IE下访问CSDN，上传图片看看有没有问题~

至于为什么会消失，可能浏览器机制问题吧，弹出对话框的时候，这时不是鼠标不能点击任何地方吗？就和弹出alert类似~

我也不能特别肯定是不是这个原因，如果有人能做出来就最好了~

引用 13 楼 xuzuning 的回复:
本帖最后由 xuzuning 于 2013-03-16 21:13:41 编辑
只要你不是闭门造车，认真提取别人的意见。怎么会有这样的结论呢？
http://www.baidu.com/baidu?word=%E5%85%89%E6%A0%87%E5%A4%84%E6%8F%92%E5%85%A5&ie=ut……

做到这里了，确实是这样，在后台程序跑起来的时候确实会失去焦点，如果不是重新上传的话定位没有问题

快点出个可用的方案