搜尋
首頁後端開發php教程无刷新上传文件

无刷新上传文件

Jun 23, 2016 pm 01:55 PM
上傳重新整理文件

   用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 时类似

把对应的路径写在编辑框里面?
只能写到 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>" //就是在这里显示路径为空的,好像没有更新上去一样。   }}

function getPath(){
    document.getElementById("ifram").innerHTML ;
 }


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

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

而且关于获取光标位置的问题,在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 ;
 }


哪里来的 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>

本帖最后由 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……



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

快点出个 可用的方案

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何使PHP應用程序更快如何使PHP應用程序更快May 12, 2025 am 12:12 AM

tomakephpapplicationsfaster,關注台詞:1)useopcodeCachingLikeLikeLikeLikeLikePachetoStorePreciledScompiledScriptbyTecode.2)MinimimiedAtabaseSqueriSegrieSqueriSegeriSybysequeryCachingandeffeftExting.3)Leveragephp7 leveragephp7 leveragephp7 leveragephpphp7功能forbettercodeefficy.4)

PHP性能優化清單:立即提高速度PHP性能優化清單:立即提高速度May 12, 2025 am 12:07 AM

到ImprovephPapplicationspeed,關注台詞:1)啟用opcodeCachingwithapCutoredUcescriptexecutiontime.2)實現databasequerycachingingusingpdotominiminimizedatabasehits.3)usehttp/2tomultiplexrequlexrequestsandreduceconnection.4 limitesclection.4.4

PHP依賴注入:提高代碼可檢驗性PHP依賴注入:提高代碼可檢驗性May 12, 2025 am 12:03 AM

依赖注入(DI)通过显式传递依赖关系,显著提升了PHP代码的可测试性。1)DI解耦类与具体实现,使测试和维护更灵活。2)三种类型中,构造函数注入明确表达依赖,保持状态一致。3)使用DI容器管理复杂依赖,提升代码质量和开发效率。

PHP性能優化:數據庫查詢優化PHP性能優化:數據庫查詢優化May 12, 2025 am 12:02 AM

DatabasequeryoptimizationinPHPinvolvesseveralstrategiestoenhanceperformance.1)Selectonlynecessarycolumnstoreducedatatransfer.2)Useindexingtospeedupdataretrieval.3)Implementquerycachingtostoreresultsoffrequentqueries.4)Utilizepreparedstatementsforeffi

簡單指南:帶有PHP腳本的電子郵件發送簡單指南:帶有PHP腳本的電子郵件發送May 12, 2025 am 12:02 AM

phpisusedforsenderemailsduetoitsbuilt-inmail()函數andsupportivelibrariesLikePhpMailerAndSwiftMailer.1)usethemail()functionForbasiceMails,butithasimails.2)butithasimail.2)

PHP性能:識別和修復瓶頸PHP性能:識別和修復瓶頸May 11, 2025 am 12:13 AM

PHP性能瓶颈可以通过以下步骤解决:1)使用Xdebug或Blackfire进行性能分析,找出问题所在;2)优化数据库查询并使用缓存,如APCu;3)使用array_filter等高效函数优化数组操作;4)配置OPcache进行字节码缓存;5)优化前端,如减少HTTP请求和优化图片;6)持续监控和优化性能。通过这些方法,可以显著提升PHP应用的性能。

PHP的依賴注入:快速摘要PHP的依賴注入:快速摘要May 11, 2025 am 12:09 AM

依賴性注射(DI)InphpisadesignPatternthatManages和ReducesClassDeptions,增強量強制性,可驗證性和MATIALWINABIOS.ItallowSpasspassingDepentenciesLikEdenciesLikedAbaseConnectionStoclasseconnectionStoclasseSasasasasareTers,interitationAseTestingEaseTestingEaseTestingEaseTestingEasingAndScalability。

提高PHP性能:緩存策略和技術提高PHP性能:緩存策略和技術May 11, 2025 am 12:08 AM

cachingimprovesphpermenceByStorcyResultSofComputationsorqucrouctationsorquctationsorquickretrieval,reducingServerLoadAndenHancingResponsetimes.feftectivestrategiesinclude:1)opcodecaching,whereStoresCompiledSinmememorytssinmemorytoskipcompliation; 2)datacaching datacachingsingMemccachingmcachingmcachings

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中