jQuery 웹 업로드 플러그인을 사용하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery 웹 업로드 플러그인을 사용하는 단계에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-04-26 11:33:27

원래의

1384명이 탐색했습니다.

이번에는 jQuery 웹 업로드 플러그인 사용 단계에 대해 자세히 설명하겠습니다. jQuery 웹 업로드 플러그인 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

테스트 예다음은 간단한 사용 예입니다.
여기에서는 Uploadify 패키지와 함께 제공되는 PHP 테스트 스크립트를 업로드 처리로 사용하므로 여기서는 PHP 웹 사이트 루트에 PHP 테스트 환경으로 wamp를 설치합니다. 디렉토리에서 위에서 다운로드한 Uploadify 파일의 압축을 풀고 파일 업로드save 디렉토리를 생성합니다. 여기에서는 Uploadify 압축 해제 디렉토리에 파일 저장 디렉토리로 업로드를 생성합니다.

uploadify_test.php 파일을 생성하고 다음 콘텐츠를 추가하세요.

<html>
<head>
  <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 
  <style type="text/css">
    #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 type="text/javascript">
    $(function() {
    $('#custom_file_upload').uploadify({
       'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
       'script'     : 'uploadify-v2.1.4/uploadify.php',
       'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
       'folder'     : 'uploadify-v2.1.4/uploads',
       'multi'     : true,
       'auto'      : true,
       'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
       'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
       'queueID'    : 'custom-queue',
       'queueSizeLimit' : 3,
       'simUploadLimit' : 3,
       'sizeLimit'  : 1024000,
       'removeCompleted': false,
       'onSelectOnce'  : function(event,data) {
         $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
        },
       'onAllComplete' : function(event,data) {
         $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
        }
      });        
    });
  </script>
</head>
<body>
  <p id="custom-demo" class="demo">
     <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 class="demo-box">
      <p id="status-message">Select some files to upload:</p>
      <p id="custom-queue"></p>
      <input id="custom_file_upload" type="file" name="Filedata" />    
    </p>
  </p>
</body>
</html>

로그인 후 복사

Uploadify 플러그인에서 $("#id").uploadify는 함수 오류가 아닙니다. 가능한 원인 swfobject.js 및 jquery.uploadify.v2.1.4. min.js는 jquery API를 사용하므로 이 두 파일은 jquery-1.4.2.min.js 파일에 종속되어야 합니다.
일반적으로 다음 js 파일을 도입해야 합니다.

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

로그인 후 복사

그러나 프로젝트에 다른 jquery JS 파일이 이미 존재하여 파일 충돌이 발생합니다. 다른 jQuery 파일의 도입 위치는 위 3개의 js 파일의 도입 위치 뒤에 위치하며, 이때 프로젝트에서는 기존 jquery JS 파일을 사용하므로 jquery.uploadify.v2.1.4.min.js가 로드됩니다. . 파일에 사용 가능한 jquery 관련 함수 정의가 없으면 이 오류가 보고됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!