jQuery AJAX realizes web page upload without refreshing

jQuery AJAX realizes web page upload without refreshing_jquery

WBOY

Release： 2016-05-16 16:13:25

Original

1190 people have browsed it

As a New Year gift, we provide simple and easy-to-apply jQuery AJAX upload examples and code downloads. The uploading and checking of files in the background are handled by C#/.NET Handler (can be rewritten into Java or PHP if necessary).

Sometimes when working on a website project (whether ASP.NET or not), the built-in FileUpload control has insufficient functions (the page must be refreshed and does not support AJAX), or the appearance is too ugly and is disliked by users (but the appearance 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 extract only part of the functions for reference. Therefore, I referred to examples from two books and multiple websites, integrated and rewritten them into this example, which boasts: simple function (just enough), customizable appearance (only using HTML div, span, input, It is not tied to the controls of a specific manufacturer) and is easy to use for other website projects in the future (other programmers in the company no longer have to rewrite a bunch of jQuery, JavaScript, and CSS).
-------------------------------------------------- -------------
WizardWuUpload upload files (pictures)
Date: 2015/02/19
Version: v1.1
-------------------------------------------------- -------------
Sample code download point:

(will be served later)
(To execute this example, no database is required, but IIS or Visual Studio is required)
-------------------------------------------------- -------------
Execution method:

Open the website with Visual Studio or IIS, and execute SingleUpload.html or MultiUpload.html with any browser. The uploaded files (pictures) are stored under the /uploadFiles folder.
-------------------------------------------------- -------------

Figure 1 Sample architecture

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

Figure 2: Execution screen - single upload & reference blue CSS file

Figure 3: Execution screen - single upload & reference green CSS file

Figure 4: Execution screen - multiple upload & reference silver CSS files

-------------------------------------------------- ----------------
Features of this example:

* Use jQuery's AJAX processing when uploading, and the screen will not be refreshed (call jQuery Form's ajaxSubmit [5] to submit the form asynchronously).
* You can customize the appearance of the "upload button and progress bar" and quote the CSS you want (this example provides: green, blue, silver, three CSS files can be quoted).
* During the upload, a progress bar will be displayed.
* After uploading, a preview image will appear.
* After uploading, a "Delete Image" hyperlink will appear, allowing users to delete the newly uploaded image.
* The extension and file size of uploaded images can be restricted (controlled by C# / WizardWuUpload.ashx), and relevant warning messages will be given to users.
* The appearance is the same for IE, FireFox, and Chrome (this is also a feature of jQuery).
* This example can be applied to both .html and .aspx. If it is PHP or JSP, you need to rewrite WizardWuUpload.ashx yourself, but you do not need to rewrite jQuery.

Features of this example:

* Focus on practicality and ease of application in website projects, rather than powerful functions and gorgeous appearance.
* Extract css and jQuery into independent shared files to facilitate the application of this example in the project without having to write it repeatedly on each page.
* The id of the DOM object (control) on the page is specially named to facilitate the application of this example in the project.
-------------------------------------------------- -------------

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无刷新上传文件 - 页面只有一个上传</title>
    <!--<link rel="stylesheet" href="css/WizardWuUpload_Blue.css" />-->
    <link rel="stylesheet" href="css/WizardWuUpload_Green.css" />
    <!--<link rel="stylesheet" href="css/WizardWuUpload_Silver.css" />-->

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/WizardWuUpload.js"></script>
    <script type="text/javascript">
      $(function () {
        //傳入的參數，為該 divUploadArea 區塊中，所有 DOM 对象(控件) 的 id 編號，如: divUploadArea1、spanUploadSelect1、WizardWuFileUpload1、...
        $(this).loadUploadContent('1'); //載入第一個上傳區塊 divUploadArea1 所需要的 form 及 jQuery 內容
      });
    </script>
</head>

<body>
  <h2>WizardWu 无刷新上传文件 - 页面只有一个上传</h2>
  <table>
    <tr>
      <td>
        <p>只允许上传 jpg/jpeg/gif/png/bmp 格式的图片，图片大小不能超过 1 MB</p>

        <div class="UploadArea" id="divUploadArea1">
          <div class="UploadButton">
            <span id="spanUploadSelect1">选择文件</span>
            <!--上传用的file控件-->
            <input id="WizardWuFileUpload1" type="file" name="此处name可随便命名，name名称可重复" />
          </div>
          <!--显示加载进度-->
          <div class="UploadProgress" id="divUploadProgress1">
            <span class="UploadBar" id="spanUploadBar1"></span><span class="UploadPercent" id="spanUploadPercent1">0%</span>
          </div>
          <!--显示已经上传的文件名、上传成功才会出现的「删除图片」字样超连接、删除成功才会出现的「删除成功」字样-->
          <div class="ShowContentAfterUploadSuccess" id="divShowContentAfterUploadSuccess1"></div>
          <!--显示已经上传的图片-->
          <div id="divShowImageAfterUploadSuccess1"></div>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Copy after login

The html that references this example

-------------------------------------------------- ----------------
Problems with the FileUpload control included in ASP.NET:

* The screen will be refreshed when uploading, and AJAX / UpdatePanel related functions cannot be applied.
* The appearance of the control is hard-coded by Microsoft and cannot be changed by referencing CSS.
* Google Chrome, IE, FireFox, different browsers, the appearance will be inconsistent.
-------------------------------------------------- -------------
Problems with jQuery File Upload on the Internet:

http://blueimp.github.io/jQuery-File-Upload/
* The functions are powerful and the appearance is too complex. It is difficult to take out only some functions and apply or rewrite them.
-------------------------------------------------- -------------

Friends, please study it carefully. I hope you will like this article.