Summary of file upload skills based on ajax html

This article mainly summarizes the file uploading techniques based on ajax html in detail, which has certain reference value. Interested friends can refer to it

Quotation: As we all know, in html Uploading files requires only one input, type=file and it’s done. However, the style of this label is really not worth mentioning. It is probably difficult to change its style. But it’s actually quite simple. Let’s talk about some tips for uploading files today!

1. How to customize the style?
1) Just define it according to the style you like to see, such as, it can be The background image effect can be a text instruction. In short, you can change it however you want! With the button, a file name container is also needed to store the name when selecting the file to upload, so as to prevent the upload from looking boring and difficult to understand.

2), add the file control that really needs to be uploaded, and set the attribute display:none; such as, so that there is a real uploaded file place. So, it can be said that how beautiful the interface for uploading files is depends on your imagination!

2. How to trigger an event?

This is an important point. The triggering point should be the style you write. The element that actually works is hidden, but it does not affect its click effect. You only need to trigger a Just click on the event, such as $('#target-file').trigger('click');

3. Select multiple files?

To upload multiple files, just use multiple=true of a file in HTML. Of course, you can also choose a third-party upload control, such as swfupload. The effect is really good, but for those who don’t want to If you use the plug-in, it won't work.

Interface beautification can actually use plug-ins such as jqueryui;If you want to do some friendly interactions, ajax technology will be used, no refresh switching, asynchronous upload, submission, and finally, in fact, the path of ajax It can also be retained. Use pushState and replaceState to implement pjax.

Asynchronous file submission: jquery.form.js
Friendly pop-up prompt: layer.js


5. Any compatibility issues?

When doing interface work, the most feared and important thing is the compatibility issue between various browsers. The following are the main points for reference:

select, input display height is inconsistent;

alert pop-up window is inconsistent;

6. Demo code

本地上传 打包工具   

A simple example of using XPath in dom4j

A brief discussion on Bootstrap's DatePicker date range selection

A simple example of using AJAX to implement page login and registered user name verification

The above is the detailed content of Summary of file upload skills based on ajax html. For more information, please follow other related articles on the PHP Chinese website!