目錄
回复讨论(解决方案)
首頁 後端開發 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

熱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

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1323
25
PHP教程
1272
29
C# 教程
1251
24
微信檔案過期怎麼恢復 微信的過期檔案能恢復嗎 微信檔案過期怎麼恢復 微信的過期檔案能恢復嗎 Feb 22, 2024 pm 02:46 PM

開啟微信,在我中選擇設置,選擇通用後選擇儲存空間,在儲存空間選擇管理,選擇要恢復檔案的對話選擇感嘆號圖示。教學適用型號:iPhone13系統:iOS15.3版本:微信8.0.24解析1先開啟微信,在我的頁面中點選設定選項。 2接著在設定頁面中找到並點選通用選項。 3然後在通用頁面中點選儲存空間。 4接下來在儲存空間頁面中點選管理。 5最後選擇要恢復檔案的對話,點選右側的感嘆號圖示。補充:微信文件一般幾天過期1要是微信接收的文件並沒有點開過的情況下,那在七十二鐘頭之後微信系統會清除掉,要是己經查看了微信

照片無法開啟此文件,因為格式不受支援或文件已損壞 照片無法開啟此文件,因為格式不受支援或文件已損壞 Feb 22, 2024 am 09:49 AM

在Windows系統中,照片應用程式是一個方便的方式來檢視和管理照片和影片。透過這個應用程序,用戶可以輕鬆存取他們的多媒體文件,而無需安裝額外的軟體。然而,有時用戶可能會碰到一些問題,例如在使用照片應用程式時遇到「無法開啟此文件,因為不支援該格式」的錯誤提示,或在嘗試開啟照片或影片時出現文件損壞的問題。這種情況可能會讓使用者感到困惑和不便,需要進行一些調查和修復來解決這些問題。當用戶嘗試在Photos應用程式上開啟照片或影片時,會看到以下錯誤。抱歉,照片無法開啟此文件,因為目前不支援該格式,或該文件

在Windows 11/10中,準備刪除要花費很長時間 在Windows 11/10中,準備刪除要花費很長時間 Feb 19, 2024 pm 07:42 PM

在本文中,我們將介紹如何解決在Windows系統中刪除檔案或資料夾時出現「準備刪除」提示的問題。這個提示意味著系統正在進行一些背景操作,例如檢查檔案權限、驗證檔案是否被其他程式佔用、計算要刪除項目的大小等。我們將為您提供一些解決方法,以確保您能夠順利刪除文件,而無需等待太長時間。為什麼Windows要花這麼長時間才能刪除檔案? Windows準備刪除檔案所需的時間受多種因素影響,包括檔案大小、儲存裝置速度和後台進程。長時間或被卡住的「正在準備刪除」提示可能暗示系統資源不足、磁碟錯誤或檔案系統問題。在

F5刷新金鑰在Windows 11中不起作用 F5刷新金鑰在Windows 11中不起作用 Mar 14, 2024 pm 01:01 PM

您的Windows11/10PC上的F5鍵是否無法正常運作? F5鍵通常用於刷新桌面或資源管理器或重新載入網頁。然而,我們的一些讀者報告說,F5鍵正在刷新他們的計算機,並且無法正常工作。如何在Windows11中啟用F5刷新?要刷新您的WindowsPC,只需按下F5鍵即可。在某些筆記型電腦或桌上型電腦上,您可能需要按下Fn+F5組合鍵才能完成刷新操作。為什麼F5刷新不起作用?如果按下F5鍵無法刷新您的電腦或在Windows11/10上遇到問題,可能是因為功能鍵被鎖定。其他潛在原因包括鍵盤或F5鍵

如何安裝GHO文件 如何安裝GHO文件 Feb 19, 2024 pm 10:06 PM

gho檔案是一種GhostImage影像文件,它通常用於將整個硬碟或分割區的資料備份成一個檔案。在一些特定的情況下,我們需要將這種gho檔案重新安裝回硬碟上,以還原硬碟或分割區到先前的狀態。下面將介紹gho檔案的安裝方法。首先,在安裝之前,我們需要準備以下工具和材料:實體的gho文件:確保你擁有一份完整的gho文件,它通常以.gho為後綴名,並且包含有備份

可以刪除Tmp格式檔案嗎? 可以刪除Tmp格式檔案嗎? Feb 24, 2024 pm 04:33 PM

Tmp格式檔案是一種暫存檔案格式,通常由電腦系統或程式在執行過程中產生。這些文件的目的是儲存臨時數據,以幫助程式正常運行或提高效能。一旦程式執行完成或電腦重啟,這些tmp檔案往往就沒有了存在的必要性。所以,對於Tmp格式檔案來說,它們本質上是可以刪除的。而且,刪除這些tmp檔案能夠釋放硬碟空間,確保電腦的正常運作。但是,在刪除Tmp格式檔案之前,我們需

出現0x80004005錯誤代碼怎麼辦 小編教你0x80004005錯誤代碼解決方法 出現0x80004005錯誤代碼怎麼辦 小編教你0x80004005錯誤代碼解決方法 Mar 21, 2024 pm 09:17 PM

在電腦中刪除或解壓縮資料夾,時有時會彈出提示對話框“錯誤0x80004005:未指定錯誤”,如果遇到這中情況應該怎麼解決呢?提示錯誤碼0x80004005的原因其實很多,但大部分因為病毒導致,我們可以重新註冊dll來解決問題,下面,小編給大夥講解0x80004005錯誤代碼處理經驗。有使用者在使用電腦時出現錯誤代碼0X80004005的提示,0x80004005錯誤主要是由於電腦沒有正確註冊某些動態連結庫文件,或電腦與Internet之間存在不允許的HTTPS連接防火牆所引起。那麼如何

斜線和反斜線在檔案路徑中的不同使用 斜線和反斜線在檔案路徑中的不同使用 Feb 26, 2024 pm 04:36 PM

檔案路徑是作業系統中用於識別和定位檔案或資料夾的字串。在檔案路徑中,常見的有兩種符號分隔路徑,即正斜線(/)和反斜線()。這兩個符號在不同的作業系統中有不同的使用方式和意義。正斜線(/)是Unix和Linux系統中常用的路徑分隔符號。在這些系統中,檔案路徑是以根目錄(/)為起始點,每個目錄之間使用正斜線進行分隔。例如,路徑/home/user/Docume

See all articles