Detailed explanation of the steps to use the jQuery Web upload plug-in

This time I will bring you a detailed explanation of the steps for using the jQuery Web upload plug-in. What are the precautions for using the jQuery Web upload plug-in? The following is a practical case, let's take a look.

Test exampleThe following is a simple example of use:
Here we use the php test script that comes with the Uploadify package as the upload processing, so here we install wamp as php In the test environment, in the root directory of the php website, decompress the Uploadify file downloaded above, and create a directory where file upload is saved. Here we create uploads as the file saving directory in the Uploadify decompression directory. .

Create the uploadify_test.php file and add the following content:

  <link> 
  <script></script> 
  <script></script> 
  <script></script> 
  <style>
    #custom-demo .uploadifyQueueItem {
     background-color: #FFFFFF;
     border: none;
     border-bottom: 1px solid #E5E5E5;
     font: 11px Verdana, Geneva, sans-serif;
     height: 50px;
     margin-top: 0;
     padding: 10px;
     width: 350px;
    }
    #custom-demo .uploadifyError {
     background-color: #FDE5DD !important;
     border: none !important;
     border-bottom: 1px solid #FBCBBC !important;
    }
    #custom-demo .uploadifyQueueItem .cancel {
     float: right;
    }
    #custom-demo .uploadifyQueue .completed {
     color: #C5C5C5;
    }
    #custom-demo .uploadifyProgress {
     background-color: #E5E5E5;
     margin-top: 10px;
     width: 100%;
    }
    #custom-demo .uploadifyProgressBar {
     background-color: #0099FF;
     height: 3px;
     width: 1px;
    }
    #custom-demo #custom-queue {
     border: 1px solid #E5E5E5;
     height: 213px;
     margin-bottom: 10px;
     width: 370px;
    }        
  </style>  
  <script>
    $(function() {
    $(&#39;#custom_file_upload&#39;).uploadify({
       &#39;uploader&#39;    : &#39;uploadify-v2.1.4/uploadify.swf&#39;,
       &#39;script&#39;     : &#39;uploadify-v2.1.4/uploadify.php&#39;,
       &#39;cancelImg&#39;   : &#39;uploadify-v2.1.4/cancel.png&#39;,
       &#39;folder&#39;     : &#39;uploadify-v2.1.4/uploads&#39;,
       &#39;multi&#39;     : true,
       &#39;auto&#39;      : true,
       &#39;fileExt&#39;    : &#39;*.jpg;*.gif;*.png;*.txt&#39;,
       &#39;fileDesc&#39;    : &#39;Image Files (.JPG, .GIF, .PNG)&#39;,
       &#39;queueID&#39;    : &#39;custom-queue&#39;,
       &#39;queueSizeLimit&#39; : 3,
       &#39;simUploadLimit&#39; : 3,
       &#39;sizeLimit&#39;  : 1024000,
       &#39;removeCompleted&#39;: false,
       &#39;onSelectOnce&#39;  : function(event,data) {
         $(&#39;#status-message&#39;).text(data.filesSelected + &#39; files have been added to the queue.&#39;);
        },
       &#39;onAllComplete&#39; : function(event,data) {
         $(&#39;#status-message&#39;).text(data.filesUploaded + &#39; files uploaded, &#39; + data.errors + &#39; errors.&#39;);
        }
      });        
    });
  </script>


  <p>
     </p><h2>Custom Demo</h2>
    <p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
    <p>
      </p><p>Select some files to upload:</p>
      <p></p>
      <input>    
    
  

Uploadify plugin prompts $(“#id”).uploadify is not a function error possible reasonsswfobject. Since js and jquery.uploadify.v2.1.4.min.js use the jquery API, these two files need to depend on the jquery-1.4.2.min.js file.
Under normal circumstances, you need to introduce the following js files:

<script></script> 
<script></script> 
<script></script>

However, another jquery JS file already exists in the project, causing file conflicts. The introduction position of another jQuery file is located behind the introduction position of the above three js files. At this time, the existing jquery JS file is used in the project, causing jquery.uploadify.v2.1.4.min.js to be loaded. This error will be reported when there is no definition of jquery-related functions available in the file.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The Uploadify plug-in makes batch uploading with a progress bar function

How does the jQuery EasyUI plug-in create a menu link Button

The above is the detailed content of Detailed explanation of the steps to use the jQuery Web upload plug-in. For more information, please follow other related articles on the PHP Chinese website!