Use iframe to refresh the uploaded file

Use iframe to refresh the uploaded file

The file upload function is often used on the page, and the page is not refreshed. Let's talk about the principle first: put a file control and the submit button in the page and wrap it with a form outside, add the corresponding attribute values (action, method, entype, and name) to the form to upload the file. However, the page will be refreshed when the file is uploaded. This is not what we want. What we need is that when a file is uploaded without refreshing a new page, it is also simple. Put an iframe in the page and set its width and height to 0. There are two pitfalls:

1. You need to set the name value of iframe to be the same as the target attribute value of form, which means to pass the refresh of the form Upload File to iframe;

2. The enctype attribute value of form must be set to multipart/form-data to convert the file into a file stream for receiving by the backend;

The Code is as follows:

<Iframe name = "fileUpload"> </iframe> <form method = "post" action = "xxxx" enctype = "multipart/form-data" name = "fileForm" target = "fileUpload"> <input type = "file" class = "fileInput" name = "fileInput"> <input type = "submit" value = "submit"/> </form>

Page (in order to see the effect, the iframe width and height are not set to 0 ):

Is things over so happily? Of course not. There are still some days before the national day. Don't worry.

At this point, the file can be uploaded and the page will not be refreshed. What is the difference? Of course, it is optimization. How to optimize it? If there are three parts on the page that need to upload different types of files, the best way is definitely not to copy the code in three copies on the page, and then use it like this. This is a common development practice, we can use js to dynamically generate the above Code. The Code is as follows:

/* September 18, 2014 17:39:47 By Wang meijian */function ajaxUpload (opt) {/* parameter description: opt. frameName: name value of iframe; opt. url: the address of the file to be submitted; opt. fileName: name of the file control; opt. format: file format, transmitted as an array, for example, ['jpg ', 'png', 'gif', 'bmp ']; opt. callBack: callBack after successful upload; */var iName = opt. frameName; // this parameter is too long. It is changed to var iframe and form; // create iframe and form iframe =$ ('<iframe name = "' + iName + '"/> '); form = $ ('<form method = "post">
Usage: put a button Btn on the page. When you click Btn, The ajaxUpload method is triggered. The ajaxUpload method automatically creates the required elements for upload and triggers file. click () event for the user to select a file. After the selected file is selected, the file format is automatically verified and submitted, and then the result returned by the backend is returned. Here, the problem is solved by 80%. Why is it not 100%? The ajaxUpload method is no problem in IE8 or later, Firefox and chrome browsers, but uploading files in IE8 or earlier browsers will prompt: no permission! This is becauseThe earlier version of IE imposes security restrictions. The file control must be manually clicked to trigger the selected file before it can be uploaded. The js click event cannot be used to simulate click triggering.. Here I want to say, IE me ~! @ # ￥ % ...... &*()--.......
The method is always more difficult. Since it must be triggered by a user clicking, replace the buttons on the page with the file control directly. iframe and form are still dynamically created, when you click the file control to select a file, the chang event of the file control will be triggered, And the ajaxUpload method will be bound to the change event of the file control and the id of the file control will be passed in, the ajaxUpload method obtains the file control by using the id and appends the file control to the dynamically created form. The subsequent steps are the same as those above: Verify the format, submit the form, and trigger the callback. After selecting a file, the file control will appendTo the form. Isn't the file control empty on the page? In addition, after the form is submitted, the file will be removed along with the form. Therefore, before the file control appendTo form, create a Variable P to store the parent level of the file control, after the form is submitted, the file control appendTo is first returned to P. Of course, when the file control appendTo form, the file control will still disappear in the page, so the Btn in the page should be retained, position the file control on the Btn and set the transparency to 0. In this way, click the file control on the Btn, even if the file control is appended to the form, the user will not notice any changes, and the problem will be solved! The Compatibility Statement is as follows:
/* September 19, 2014 11:11:07 By Wang meijian */
Function ajaxUpload (opt) {/* parameter description: opt. id: ID of the file control on the page; opt. frameName: name value of iframe; opt. url: the address of the file to be submitted; opt. format: file format, transmitted as an array, for example, ['jpg ', 'png', 'gif', 'bmp ']; opt. callBack: callBack after successful upload; */var iName = opt. frameName; // this parameter is too long. The parameter value is var iframe, form, file, and fileParent; // create iframe and form iframe =$ ('<iframe name = "' + iName + '"/> '); form = $ ('<form method = "post">
By now, the method is almost perfect. Why is it close? Let's see an image:

Structure Code:
. FileInput {position: absolute; left: 0; top: 0; height: 30px; filter: alpha (opacity = 60); opacity: 0.6; background-color: transparent ;}. btn {width: 200px; height: 30px; margin: 100px auto; background-color: yellow; text-align: center; line-height: 30px; overflow: hidden; display: block; position: relative;} <div class = "btn"> select the file <input type = "file" class = "fileInput" name = "fileInput"> </div>

This is the file control placed on the page. It is wrapped with a div outside. In IE10 and the following browsers, clicking the red box does not pop up the file selection box, you must click the blue part or double-click the red part. How can you make the blue part fully occupied by the div? Setting the width with css will only increase the width of the red part. In this case, we will find that the blue part has a word. You can set font-size to make the blue part wider, add dir = "rtl" to the file control. This will move the Browse button to the left and then. btn with overflow: hidden, you can find that the browsing button is full of the entire div, such:

This completes 100%. Finally, we can set the accept attribute for the file control to restrict the optional file format (this attribute is not supported by IE8 and below ), do not forget to change the transparency of the file control to 0.