JQuery + AJAX: allows you to upload webpages without any need, and jqueryajax
The New Year's gala provides simple and easy-to-use jQuery AJAX upload examples and code downloads. Upload and check files in the background using C #/. NET Handler (rewrite to Java or PHP as needed ).
Sometimes make a website project (whether ASP or not.. NET), the attached FileUpload control has insufficient functions (the page must be refreshed, and AJAX is not supported), or the appearance is too ugly for the user to dislike (but cannot be customized through CSS ). Although there are many examples available on the Internet, such as jQuery File Upload, the functions are too powerful and the appearance is complex. It is not easy to reference only some functions. Therefore, I have integrated and rewritten the examples in two books and on multiple networks, and advertised that the functions are simple (enough), the appearance can be customized (only HTML div, span, input, not bound to the control of a specific manufacturer), other website projects will be easy to use in the future (other programmers in the company, no need to rewrite a bunch of jQuery, JavaScript, CSS ).
---------------------------------------------------------------
WizardWuUpload: upload a file (image)
Date:
Version: v1.1
---------------------------------------------------------------
Sample Code download point:
(Available later)
(In this example, no database is required, but IIS or Visual Studio is required)
---------------------------------------------------------------
Execution method:
Use Visual Studio or IIS to open a website and execute SingleUpload.html or MultiUpload.html in any browser. The uploaded files (images) are stored under the/uploadFiles folder.
---------------------------------------------------------------
Figure 1 architecture example
---------------------------------------------------------------
Figure 2 execution screen-single upload & reference of blue CSS files
Figure 3 Execution screen-single upload & reference green CSS file
Figure 4 Execution screen-multipart upload & reference of the silver CSS file
---------------------------------------------------------------
Functions of this example:
* JQuery AJAX is used for uploading, and the screen is not refreshed by refresh (call jQuery Form's ajaxSubmit [5] and submit the Form asynchronously ).
* You can customize the appearance of the upload button and progress bar and reference the CSS you want (in this example, three CSS files are available: green, blue, and silver ).
* A progress bar is displayed during the upload process.
* After uploading, a preview chart is displayed.
* After the upload is complete, the "delete image" hyperlink will appear, allowing you to delete the uploaded image.
* The extension and file size of uploaded images can be limited (controlled by C #/WizardWuUpload. ashx), and related warning information can be provided to users.
* IE, FireFox, and Chrome are consistent in appearance (this is also a feature of jQuery ).
* This example can be applied to. html and. aspx. If it is PHP or JSP, You need to rewrite WizardWuUpload. ashx on your own, but you do not need to rewrite jQuery.
Features of this example:
* It is practical and easy to apply website projects, rather than powerful functions and gorgeous appearance.
* Extract css and jQuery into independent shared files, so that this example can be applied in projects without repeated writing on each page.
* The id of the DOM object (Control) on the page is specially named so that this example can be applied in projects.
---------------------------------------------------------------
<Html>Reference html in this example
---------------------------------------------------------------
The FileUpload control is attached to ASP. NET:* The screen refresh is refreshed during the upload, and AJAX/UpdatePanel functions cannot be applied.
* The appearance of the control cannot be changed by referencing CSS.
* Google Chrome and IE and FireFox are displayed differently in different browsers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
