无刷新上传文件
用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……
做到这里了,确实是这样,在后台程序跑起来的时候确实会失去焦点,如果不是重新上传的话定位没有问题
快点出个 可用的方案

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











Open WeChat, select Settings in Me, select General and then select Storage Space, select Management in Storage Space, select the conversation in which you want to restore files and select the exclamation mark icon. Tutorial Applicable Model: iPhone13 System: iOS15.3 Version: WeChat 8.0.24 Analysis 1 First open WeChat and click the Settings option on the My page. 2 Then find and click General Options on the settings page. 3Then click Storage Space on the general page. 4 Next, click Manage on the storage space page. 5Finally, select the conversation in which you want to recover files and click the exclamation mark icon on the right. Supplement: WeChat files generally expire in a few days. If the file received by WeChat has not been clicked, the WeChat system will clear it after 72 hours. If the WeChat file has been viewed,

In Windows, the Photos app is a convenient way to view and manage photos and videos. Through this application, users can easily access their multimedia files without installing additional software. However, sometimes users may encounter some problems, such as encountering a "This file cannot be opened because the format is not supported" error message when using the Photos app, or file corruption when trying to open photos or videos. This situation can be confusing and inconvenient for users, requiring some investigation and fixes to resolve the issues. Users see the following error when they try to open photos or videos on the Photos app. Sorry, Photos cannot open this file because the format is not currently supported, or the file

In this article, we will introduce how to solve the problem of "Ready to delete" prompt when deleting files or folders in Windows system. This prompt means that the system is performing some background operations, such as checking file permissions, verifying whether the file is occupied by other programs, calculating the size of the item to be deleted, etc. We will provide you with some workarounds to ensure that you can successfully delete your files without waiting too long. Why does Windows take so long to delete files? The time it takes Windows to prepare a file for deletion is affected by a variety of factors, including file size, storage device speed, and background processes. A long or stuck "Preparing to delete" prompt may indicate insufficient system resources, disk errors, or file system issues. exist

Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key

The gho file is a GhostImage image file, which is usually used to back up the entire hard disk or partition data into a file. In some specific cases, we need to reinstall this gho file back to the hard drive to restore the hard drive or partition to its previous state. The following will introduce how to install the gho file. First, before installation, we need to prepare the following tools and materials: Entity gho file: Make sure you have a complete gho file, which usually has a .gho suffix and contains a backup

Tmp format files are a temporary file format usually generated by a computer system or program during execution. The purpose of these files is to store temporary data to help the program run properly or improve performance. Once the program execution is completed or the computer is restarted, these tmp files are often no longer necessary. Therefore, for Tmp format files, they are essentially deletable. Moreover, deleting these tmp files can free up hard disk space and ensure the normal operation of the computer. However, before deleting Tmp format files, we need to

When deleting or decompressing a folder on your computer, sometimes a prompt dialog box "Error 0x80004005: Unspecified Error" will pop up. How should you solve this situation? There are actually many reasons why the error code 0x80004005 is prompted, but most of them are caused by viruses. We can re-register the dll to solve the problem. Below, the editor will explain to you the experience of handling the 0x80004005 error code. Some users are prompted with error code 0X80004005 when using their computers. The 0x80004005 error is mainly caused by the computer not correctly registering certain dynamic link library files, or by a firewall that does not allow HTTPS connections between the computer and the Internet. So how about

A file path is a string used by the operating system to identify and locate a file or folder. In file paths, there are two common symbols separating paths, namely forward slash (/) and backslash (). These two symbols have different uses and meanings in different operating systems. The forward slash (/) is a commonly used path separator in Unix and Linux systems. On these systems, file paths start from the root directory (/) and are separated by forward slashes between each directory. For example, the path /home/user/Docume
