jQuery 웹 업로드 플러그인을 사용하는 단계에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-26 11:33:271384검색
이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
Uploadify 플러그인은 진행률 표시줄이 있는 일괄 업로드 기능을 만듭니다.
jQuery EasyUI 플러그인은 메뉴 링크 버튼을 어떻게 생성하나요?
위 내용은 jQuery 웹 업로드 플러그인을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!