Jquery+ajax implementation of Web page without refresh upload

Source: Internet
Author: User

New Year's Eve offers simple, easy-to-apply jQuery Ajax upload examples and code downloads. Background file upload and check, to c#/.net Handler processing (visual need to rewrite to Java or PHP).

Sometimes do a website project (whether or not ASP), the enclosed FileUpload control, insufficient functionality (the page must be refreshed, does not support AJAX), or the appearance is too ugly by the user (but can not customize the appearance through CSS). There are many examples available on the web, such as the jQuery File Upload, but the functionality is too powerful, the appearance is complex, it is not easy to just take out some of the functionality to refer to. So I took a look at the two books, the examples on the Internet, to integrate, to rewrite This example, advertised: The function is simple (good enough), the appearance can be customized (only with the HTML Div, span, input, not tied to the control of a particular manufacturer), and later to do other site projects are easy to use (the company other programmers, No need to rewrite a bunch of jQuery,JavaScript, CSS).
---------------------------------------------------------------
Wizardwuupload uploading files (image)
Date: 2015/02/19
Version: v1.1
---------------------------------------------------------------
Sample code Download point:

(Later on)
(Perform this example without a database, but require IIS or Visual Studio)
---------------------------------------------------------------
Execution mode:

Open a Web site with Visual Studio or IIS, and perform singleupload.html or multiupload.html in either browser. The uploaded file (image) is stored under the/uploadfiles folder.
---------------------------------------------------------------


Figure 1 Example schema

---------------------------------------------------------------


Figure 2 Execution screen-single upload & reference blue CSS File


Figure 3 Execution screen-single upload & reference green CSS File


Figure 4 Execution screen-plural upload & reference silver CSS File

---------------------------------------------------------------
The functionality of this example:

* When uploading with jquery AJAX processing, the screen will not refresh (call jquery form Ajaxsubmit [5], asynchronously submit the form).
* Customizable "upload button, progress bar" appearance, referencing the CSS you want (this example provides: Green, blue, silver, three kinds of CSS files can be referenced).
* The progress bar will be displayed during the upload.
* After uploading, a preview will appear.
* After uploading, a "delete picture" hyperlink will appear, allowing the user to delete the image that has just been uploaded.
* Can limit the upload image extension, the file size of the upper limit (by C #/WIZARDWUUPLOAD.ASHX control), and will give users relevant warning information.
* The appearance of IE, FireFox, Chrome are consistent (this point is also the feature of JQuery).
*. html,. aspx can apply this example. If you are PHP or JSP, you need to rewrite wizardwuupload.ashx yourself, but you don't have to rewrite jQuery.

The characteristics of this example:

* Practical, easy to apply in Web projects, rather than powerful, gorgeous appearance.
* Draw CSS, jQuery out to be a standalone shared file, making it easy to apply this example in a project without having to repeat each page.
* The ID of the DOM object (control) on the page is specifically named so that the sample is easily applied in the project.
---------------------------------------------------------------

The HTML that references this example

---------------------------------------------------------------
ASP. NET enclosing FileUpload control problem:

* The screen will refresh when uploading, unable to apply Ajax/updatepanel related functions.
* The appearance of the control, written by Microsoft, cannot be changed by referencing CSS .
* Google Chrome and IE, FireFox, different browsers, the appearance will be inconsistent.

Jquery+ajax implementation of Web page without refresh upload

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.