Jquery+ajax implementation of Web page without refreshing upload _jquery

Source: Internet
Author: User
Tags jquery file upload

New Year's greetings, providing simple, easy to apply jQuery AJAX upload examples and code downloads. Background of the file upload and check to c#/.net Handler processing (visual needs to be rewritten as Java or PHP).

Sometimes make a website project (whether or not asp.net), the enclosing fileupload control, the function is insufficient (the page must refresh, does not support AJAX), or the appearance is too ugly to be abandoned by the user (but cannot customize the appearance through the CSS). Although there are many examples available on the network, such as JQuery File Upload, but the function is too powerful, the appearance is complex, want to only take out some function to reference, but not easy. So I've referred to two examples of books, on multiple web paths, consolidate, rewrite This example, advertised: The function is simple (good enough), the appearance can be customized (only HTML div, span, input, not be tied to a specific vendor's control), and later do other Web site projects are easy to use (company other programmers, You don't have to rewrite a bunch of jQuery, JavaScript, or CSS.
---------------------------------------------------------------
Wizardwuupload upload file (picture)
Date: 2015/02/19
Version: v1.1
---------------------------------------------------------------
Sample code Download point:

(later served)
(Perform this example without a database, but require IIS or Visual Studio)
---------------------------------------------------------------
How to execute:

To open a Web site with Visual Studio or IIS, perform singleupload.html or multiupload.html in either browser. The uploaded file (picture), 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-complex upload & quote silver CSS File

---------------------------------------------------------------
The features of this example:

* Upload with jquery AJAX processing, the screen will not refresh (call jquery form Ajaxsubmit [5], submit the form asynchronously).
* Customizable "upload button, progress bar" appearance, reference to the CSS you want (this example provides: Green, blue, silver, three kinds of CSS files can be referenced).
* During upload, the progress bar will be displayed.
* The preview will appear when you are finished uploading.
* After uploading, a "delete picture" hyperlink will appear, allowing the user to delete the image just uploaded.
* Can limit the upload image extension, 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 characteristics of jQuery).
*. html,. aspx can be applied to this example. If you are PHP or JSP, you need to rewrite wizardwuupload.ashx, but do not need to rewrite jQuery.

The characteristics of this example:

* Pragmatic, easy to apply in Web site projects, not powerful, gorgeous.
* CSS, jQuery extraction to become a stand-alone common file, easy to apply this example in the project, do not have to repeat each page to write.
* Name the ID of the DOM object (control) on the page specifically to facilitate this example in the project.
---------------------------------------------------------------

 

The HTML that references this sample

---------------------------------------------------------------
asp.net enclosing the FileUpload control problem:

* Upload the screen will refresh, can not apply ajax/updatepanel related functions.
* The appearance of the control, written by Microsoft, can not change the appearance by referencing CSS.
* Google Chrome and IE, FireFox, different browsers, appearance will be inconsistent.
---------------------------------------------------------------
Problems with JQuery File Upload on the Web:

http://blueimp.github.io/jQuery-File-Upload/
* Powerful, the appearance is too complex, want to remove only part of the function, to apply or rewrite is difficult.
---------------------------------------------------------------

Small partners to study it carefully, I hope you can like this article.

Related Article

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.