Upload files without refreshing

Source: Internet
Author: User
You can use php to create a function that inserts images when posting a post like in most forums. I checked it online and wrote the input type = 'file' in

In form, the page is automatically updated when form submit is enabled. if you direct the target to a hidden iframe, you can skip text uploading.

. The file can be uploaded successfully, but the file storage path generated in the background cannot be synchronously updated to the current page. So

The corresponding path cannot be written in the editing box after the image is uploaded as in csdn.

I don't know how to solve this problem. I can't write it now. For help.


Reply to discussion (solution)

Write the corresponding path in the editing box?
It can only be written to input type = text or other controls, but cannot be written to input type = file.

Iframe must be named or have an id. the recipient's echo Image path
Used for retrieval
S = document.iframe.doc ument. body. innerHTML
Id is similar

Write the corresponding path in the editing box?
It can only be written to input type = text or other controls, but cannot be written to input type = file.

Iframe must be named or have an id. the recipient's echo Image path
Used for retrieval
S = document.iframe.doc ument. body. innerHTML
Id is similar



I am like this: after the form is submitted, the background processing program will be submitted to iframe in the form of $ this-> filepath = (corresponding to the generated path name) (I don't know if there is a problem like this) then in the document. getElementById ("iframe "). in the form of innerHTML to obtain the data transmitted back from the background. However, data is always unavailable. It seems that iframe cannot be synchronized.

Quote = reference reply from xuzuning on the first floor:]
Write the corresponding path in the editing box?
It can only be written to input type = text or other controls, but cannot be written to input type = file.

Iframe must be named or have an id. the recipient's echo Image path
Used for retrieval
S = document.iframe.doc ument. body. innerHTML
Id is similar

Probably the program is like this

In html, "script" function upload () {$ ("# formUploadpic "). submit ();} function getPath () {document. getElementById ("ifram "). innerHTML;} script background program function newTopic () {if (// File available) {// path of the file to be uploaded $ this-> path = file storage path echo "script window. parent. getPath (); script "// the path shown here is empty, as if it was not updated. }}

Function getPath (){
Document. getElementById ("ifram"). innerHTML;
}


Id = 'ifram'
Besides, the function called by iframe is based on iframe.

In addition, there is no solution in IE to obtain the cursor position. It can only work in the webkit browser. I tested csdn.

In addition, there is no solution in IE to obtain the cursor position. It can only work in the webkit browser. I tested csdn.

Where can I get the cursor position?

Reference the reply from xjl756213616 on the 6th Floor: In addition, there is no solution to the issue of obtaining the cursor position in IE. It can only work in the webkit browser. I tested csdn. Where can I get the cursor position?


It seems that the moderator has never done the editor ~
After the image is submitted to a hidden domain, the image is uploaded. The entire process is refreshing.
But you need to return the image address to textarea, for example,
11111111
// Click the cursor here and upload the image again. The image can be displayed in this position under webkit,
// However, when processing an image, IE will lose the focus of the cursor and the image cannot be displayed here.
2222222

Truly: the ignorant are fearless

// Img.my.csdn.net/uploads/201303/16/1363434184156561.jpg?#/img]

Function getPath (){
Document. getElementById ("ifram"). innerHTML;
}


Id = 'ifram'
Besides, the function called by iframe still uses ifram ......



Missed... I can't try again.

In addition, there is no solution in IE to obtain the cursor position. It can only work in the webkit browser. I tested csdn.



I have considered this problem, but I have not written it to that place, and it is stuck in the upload part.
Now, I actually return the image address to textarea, but there are other methods.

Truly: the ignorant are fearless


I haven't checked it out yet. don't make a final conclusion so quickly ~ You can check
C: \ Documents and Settings \ Administrator \ Desktop \ YouYaX_V12_UTF8 \ ORG \ UBB \ UploadForEditor. class. php
At the beginning of Line 3, I can only put the image at the end of ie.
I tried to use cookies and so on, but it was getting messy. I found a lot of information online ~ This includes similar issues that some people have mentioned ~
IE's cursor disappears,
Believe it or not, try the image upload function of csdn in IE browser ~
Check whether my remarks are true ~

As long as you are not building a car behind closed doors and carefully extract others' opinions. Why is there such a conclusion?
Http://www.baidu.com/baidu? Word = % E5 % 85% 89% E6 % A0 % 87% E5 % A4 % 84% E6 % 8F % 92% E5 % 85% A5 & ie = UTF-8

This is the code I used to expect (dedicated to 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》  

This post was last edited by xuzuning at 21:13:41
As long as you are not building a car behind closed doors and carefully extract others' opinions. Why is there such a conclusion?
Http://www.baidu.com/baidu? Word = % E5 % 85% 89% E6 % A0 % 87% E5 % A4 % 84% E6 % 8F % 92% E5 % 85% A5 & ie = UTF-8

This is why ......



Because you have not made a web editor, you may not understand the moderator that I think ~
Your code does, because in IE, your cursor position does not disappear.
The disappearance of the cursor actually refers to the disappearance of the selected text object.
When a cursor is clicked in a place or a text segment is selected, an object is generated.
Document. selection. createRange () in IE ()
In webkit, the position information selectionStart and selectionEnd are displayed.
When the upload dialog box is displayed When the image is processed by the php file,
The parent.doc ument. selection. createRange () in the iebrowser is empty, meaning the cursor disappears.
In webkit, selectionStart and selectionEnd still have values, so they can be inserted to the position clicked by the mouse.
You just need to do it ~ Or try accessing CSDN in IE and upload images to see if there are any problems ~

As for why it disappears, there may be a problem with the browser mechanism. in the pop-up dialog box, isn't the mouse allowed to click anywhere? It is similar to the alert pop-up ~

I am not sure this is the reason. it would be better if someone could do it ~

Reference the reply from xuzuning on the 13th floor:
This post was last edited by xuzuning at 21:13:41
As long as you are not building a car behind closed doors and carefully extract others' opinions. Why is there such a conclusion?
Http://www.baidu.com/baidu? Word = % E5 % 85% 89% E6 % A0 % 87% E5 % A4 % 84% E6 % 8F % 92% E5 % 85% A5 & amp; ie = ut ......



This is the case. when the background program runs, the focus is indeed lost. if it is not re-uploaded, the problem is located.

Quick start with an available solution

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.