Summary of File Upload Techniques Based on ajax html,

Summary of File Upload Techniques Based on ajax html,

Quote: we all know that uploading a file in html is an input and type = file. However, the style of this label is really not worth mentioning. It is difficult to change the style. But it's actually quite simple. Let's talk about the tips for uploading files today!

1. How to customize styles?
1) Just define according to the style you like to see, as shown in <a href = 'javascript:; 'class = 'upload-click'> </a>, it can be a background image or a Text indicator. How can I change it! With the button, you also need a file name container to store the name when you select the file to be uploaded, so as not to make the upload look dull.

2) Add the file control to be uploaded and set the property display: none. For example, <input type = 'file' class = 'hide '/>, in this way, there is a real place to upload files. Therefore, it can be said that how beautiful the file upload interface is depends on your imagination!

2. How to trigger an event?

This is a key point. The trigger point should be a self-written style. The elements that actually work are hidden, but they do not affect the click effect, you only need to trigger a click event for it, such as $ ('# target-file '). trigger ('click ');

3. Select multiple files?

To upload multiple files, you only need to use the multiple = true of a file in html. Of course, you can also select a third-party upload control, such as swfupload. The effect is really good, but it does not work for people who don't want to use plug-ins.

4. Related plug-ins?

Jqueryui and Other plug-ins can be used for interface beautification;
Ajax technology will be used for friendly interaction, without any need to switch between them, upload them asynchronously, and submit them. In the end, the ajax path can be retained, and pushState and replaceState can be used to implement pjax.
Form Verification: validform. js
Asynchronous file submission: jquery. form. js
Friendly pop-up prompt: layer. js

5. Some compatibility issues?

It is also very important to do interface work, that is, the compatibility between various browsers. The following lists the main points for reference:

The Processing Methods of table width are inconsistent;
Select, the input display height is inconsistent;

The alert pop-up window is inconsistent;

...

6. Demo code

<A href = "javascript :; "up-type-id =" 1 "class =" btn-default small-btn switch-upload-method "> <span> Local upload </span> </a> <a href = "javascript :; "up-type-id =" 2 "class =" upload-file-instead btn-default small-btn switch-upload-method "> <span> packaging tool </span> </a> <input type = "file" name = "apkFiles []" id = "local-upload-real-file" class = "upload-file-real hide" response-id = "local-upload-container" multiple = 'true'/> <in Put type = "file" name = "apkToolFiles []" id = "apk-tool-real-file" class = "upload-file-real hide" response-id = "apk -tool-container-textarea "/> <script >$ (function () {var alertTitle = 'System prompt: '; var submitId =' # do-submit '; $ (' # taskForm '). validform ({btnSubmit: submitId, tiptype: 1, ignoreHidden: true, dragonfly: false, tipSweep: true, label :". label ", showAllError: false, postonce: true, ajaxPost: true, da Tatype: {}, beforeCheck: function (curform) {}, beforeSubmit: function (curform) {$ ('. upload-file-real '). attr ('Disabled ', 'Disabled'); $ (submitId ). attr ('Disabled ', 'Disabled'); // disable the button ajaxSubmitForm (curform) before submission; $ (submitId ). removeAttr ('Disabled '); // return false can be submitted after the restoration fails;}, submitForm: function () {}// no longer working }); // switch the upload method $ ('. switch-upload-method '). off (). on ('click', function () {// $ (submitId ). attr ('disab Led ', 'Disabled'); var pObj = $ (this ). parent (). find ('. switch-upload-method '); var index = pObj. index (this); var uploadTypeId = $ ('# upload-type-id '). val (); // upload method: 1: Packaging tool; 2: Local upload; 0: No upload method var uploadType = $ (this ). attr ('up-type-id'); if(parseint(items ('{sub-channel-count'{.html ()> 0) {if (uploadTypeId! = UploadType) {layer. alert ('There are also sub-channel package data. The switchover cannot be completed. Please confirm to clear the data before switching! '); Return false ;}} pObj. not (': eq (' + index + ')'). removeClass ('btn-danger '). addClass ('btn-default'); pObj. eq (index ). removeClass ('btn-default '). addClass ('btn-danger '); if (uploadType = 36) {// local-upload $ (' # upload-type-id '). val (uploadType); $ ('# init-apk-iner '). show (); $ ('# apk-tool-iner '). hide (); ('{upload-main-control'{.find('.del-it-main'}.css ({display: 'inline-Block'}); $ ('# local-u Pload-real-file '). trigger ('click');} else if (uploadType = 35) {// apk-tool $ ('# upload-type-id '). val (uploadType); $ ('# init-apk-iner '). hide (); $ ('# local-upload-iner '). hide (); $ ('# upload-main-control '). find ('. del-it-main '). hide (); $ ('# apk-tool-iner '). show () ;}}); // local upload $ ('# local-upload-real-file '). off (). on ('change', function () {if (! $ (This ). val () {return false;} file_size = 0; filepath = $ (this ). val (); maxFileSize = 30*1024*1024; var browserCfg ={}; var ua = window. navigator. userAgent; if (ua. indexOf ("MSIE")> = 1) {browserCfg. ie = true;} else if (ua. indexOf ("Firefox")> = 1) {browserCfg. firefox = true;} else if (ua. indexOf ("Chrome")> = 1) {browserCfg. chrome = true;} if (browserCfg. ie) {var img = new Image (); img. src = fi Lepath; file_size = img. fileSize; while (true) {if (img. fileSize> 0) {if (img. fileSize> maxFileSize) {alert ("the size of the upload package exceeds 30 mb. Use the packaging tool to upload the package! "); Return false;} break ;}} else {file_size = this. files [0]. size; if (file_size> maxFileSize) {alert ("the size of the upload package exceeds 30 mb. Use the packaging tool to upload the package! "); Return false ;}} var responseObjId = $ (this ). attr ('response-id'); var responseObj = $ ('#' + responseObjId); $ ('# taskForm '). ajaxSubmit ({url: '/aa/bb/uploadTmpApk', resetForm: false, ype: 'json', beforeSubmit: function (option) {window. loading = layer. load (2) ;}, success: function (data, statusText) {layer. close (window. loading); if (data. status = 1) {$ ('# version-identifier '). val (data. version); ResponseObj.html(data.apk InfoHtml); responseObj. show (); var delObj = $ ('# upload-main-control '). find ('. del-it-main'); delObj.css ({'display': 'inline-Block'}); values ('{sub-channel-count'{.html(data.apk Total); $ ('# init-apk-iner '). hide (); $ (submitId ). removeAttr ('Disabled ');} else {layer. alert (data.info, {title: alertTitle}) ;}, error: function (data) {layer. close (window. loading); layer. alert ('unknown Error, Please try again later! ') ;}}); Return false; // prevents automatic close of dialog}); // packaging tool $ (' # apk-tool-real-file '). off (). on ('change', function () {if (! $ (This ). val () {return false;} var responseObjId = $ (this ). attr ('response-id'); var responseObj = $ ('#' + responseObjId); $ ('# form '). ajaxSubmit ({url: '/aa/bb/uploadtmpapktool', resetForm: false, ype: 'json', beforeSubmit: function (option) {window. loading = layer. load (2) ;}, success: function (data, statusText) {layer. close (window. loading); if (data. status = 1) {$ ('# version-identifier '). val (dat A. version); responseObj.html (data. infoHtml); var parentContainer = responseObj. parent (). parent (), nameContainer = parentContainer.find('.apk-name-iner '), delObj = parentContainer. find ('. del-it-apk-tool '); nameContainer.html(data.apk Name); nameContainer. attr ('title', data.apk Name); ('your apk-tool-file-tmp'your .html (data. fileInfo); $ (submitId ). removeAttr ('Disabled ');} else {layer. alert (data.info, {t Itle: alertTitle}) ;}}, error: function (data) {layer. close (window. loading); layer. alert ('unknown error, please try again later! ') ;}}); Return false; // prevents automatic close of dialog}); optional ('.apk-tool-upload-button '). on ('click', function () {$ ('# apk-tool-real-file '). trigger ('click') ;}); </script>

The preceding figure shows how to use the hidden input file tag to select the file, select the file, and then submit the file using ajax. Finally, the entire form ajax submission process is completed.

Make rational use of some css and js to make your webpage more free!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.