目录
回复讨论(解决方案)
首页 后端开发 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 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
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教程
1668
14
CakePHP 教程
1426
52
Laravel 教程
1329
25
PHP教程
1273
29
C# 教程
1256
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