Webuploader upload plug-in combined with bootstrap modal box when using the Select Upload File button Invalid Problem resolution method

For various reasons (busy work, to exercise, to read, to learn other hobbies, love, etc.), the blog has not been updated for a long time, for the heart has been feeling very guilty, today began to decide to continue to update the blog, at least one per week, up to unlimited space.

Today, the afternoon in the work encountered a problem: The company's back-end colleagues with Bootstrap modal box, combined with Webuploadder to do background upload file function, found the upload button click Invalid. Colleagues came to ask me for support, I studied the next, found three solutions, the following is specifically said to be how these three methods are solved.

Let us first analyze the idea of solving this problem:

Why does the upload control drop in the modal box? It is not possible to do this without the normal dom of the modal box. I guess the cause of the problem is because the DOM structure of the modal box is just the beginning of the hidden element Display:none, and the Diaplay:none element does JS, it will not take effect, to solve this problem, we will be in the modal box after rendering, The DOM node corresponding to the modal box is loaded on the page and then re-executes the JS of the upload control. Then there are three solutions.

Programme one:

Use Uploader.refresh ();

after the modal box is loaded, execute the function with the following code.

    //Create ()    varuploader =webuploader.create ({//swf file pathSWF: ' webuploader/uploader.swf ',        //The file receives the service side. Server: ' http://webuploader.duapp.com/server/fileupload.php ',        //Select the button for the file. Optional.         //The internal is created according to the current run, either the INPUT element or flash.Pick: ' #picker ',        //do not compress the image, the default if it is JPEG, file upload will be compressed before uploading! Resizetrue    }); $(' #myModal '). On (' Shown.bs.modal ',function() {Uploader.refresh ();// The method of redrawing the button after the modal frame has been loaded.     });

Scenario Two:

After the modal box is loaded, redraw the button.

The code is as follows:

1 varuploader =webuploader.create ({2         //swf file path3SWF: ' webuploader/uploader.swf ',4 5         //The file receives the service side. 6Server: ' http://webuploader.duapp.com/server/fileupload.php ',7 8         //Select the button for the file. Optional. 9         //The internal is created according to the current run, either the INPUT element or flash.TenPick: ' #picker ', One  A         //do not compress the image, the default if it is JPEG, file upload will be compressed before uploading!  -Resizetrue -     }); the     functionCreate () { - Uploader.addbutton ({ -ID: ' #picker ', -InnerHTML: ' Select File ' +        }); -     } +$ (' #myModal '). On (' Shown.bs.modal ',function () { A       //Uploader.refresh (); at Create () -});

Programme III:

After the modal box executes, the Upload control button JS

1 varuploader =NULL;2$ (' #myModal '). On (' Shown.bs.modal ',function () {3         //Uploader.refresh ();4         //Create ()5uploader =webuploader.create ({6         //swf file path7SWF: ' webuploader/uploader.swf ',8         //The file receives the service side. 9Server: ' http://webuploader.duapp.com/server/fileupload.php ',Ten  One         //Select the button for the file. Optional.  A         //The internal is created according to the current run, either the INPUT element or flash. -Pick: ' #picker ', -  the         //do not compress the image, the default if it is JPEG, file upload will be compressed before uploading!  -Resizetrue -         }); -     }); +     //Turn off the modal box to destroy the Webuploader, solve the problem when the modal box is opened again, and in order to save memory, destroy unnecessary memory overhead.  -$ (' #myModal '). On (' Hide.bs.modal ',function () { + Uploader.destroy (); A});

Note the third method, you must perform an upload control destroy event after the modal box is closed to save memory overhead.

How to call functions for different life cycles during modal frame rendering, you can view the modal box API of Bootstap,

From this example, it is important to understand that when developing a control, it is important to define how the method can control the different cycles, and to define the method of destroying the control, which is a complete and useful control, and a further understanding of the life cycle function of Vue is given through this case.

Webuploader upload plug-in combined with bootstrap modal box when using the Select Upload File button Invalid Problem resolution method