jQuery的Web上傳外掛程式使用步驟詳解
這次帶給大家jQuery的Web上傳外掛使用步驟詳解，jQuery的Web上傳外掛程式使用注意事項有哪些，以下就是實戰案例，一起來看一下。
測試範例以下是使用的簡單範例：
這裡我們採用了Uploadify套件中自帶的php測試腳本作為上傳的處理，所以這裡安裝了wamp作為php的測試環境，在php的網站根目錄中，解壓縮上面下載好的Uploadify文件，並創建一個文件上傳保存的目錄，這裡我們在Uploadify的解壓目錄中創建到了uploads作為文件保存目錄。
建立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 is not a function錯誤可能原因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文件的引入位置位於上面三個js文件引入位置的後面，此時項目中使用的是原本已經存在的jquery的JS文件，導致在加載jquery.uploadify.v2.1.4.min.js檔案時還沒有可用的jquery相關函數的定義，才會報這個錯誤。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是jQuery的Web上傳外掛程式使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在iPhone中使Google地圖成為預設地圖
Apr 17, 2024 pm 07:34 PM
iPhone上的預設地圖是Apple專有的地理位置供應商「地圖」。儘管地圖越來越好，但它在美國以外的地區運作不佳。與谷歌地圖相比，它沒有什麼可提供的。在本文中，我們討論了使用Google地圖成為iPhone上的預設地圖的可行性步驟。如何在iPhone中使Google地圖成為預設地圖將Google地圖設定為手機上的預設地圖應用程式比您想像的要容易。請依照以下步驟操作–先決條件步驟–您必須在手機上安裝Gmail。步驟1–開啟AppStore。步驟2–搜尋“Gmail”。步驟3–點選Gmail應用程式旁
升級微信最新版本的步驟（輕鬆掌握微信最新版本的升級方法）
Jun 01, 2024 pm 10:24 PM
不斷推出新版本以提供更好的使用體驗，微信作為中國的社交媒體平台之一。升級微信至最新版本是非常重要的，家人和同事的聯繫、為了保持與朋友、及時了解最新動態。 1.了解最新版本的特性與改進了解最新版本的特性與改進非常重要，在升級微信之前。效能改進和錯誤修復，透過查看微信官方網站或應用程式商店中的更新說明、你可以了解新版本所帶來的各種新功能。 2.檢查目前微信版本我們需要檢查目前手機上已安裝的微信版本、在升級微信之前。點擊，打開微信應用“我”然後選擇，菜單“關於”在這裡你可以看到當前微信的版本號，。 3.打開應
此 Apple ID 尚未在 iTunes Store 中使用：修復
Jun 10, 2024 pm 05:42 PM
使用AppleID登入iTunesStore時，可能會在螢幕上拋出此錯誤提示「此AppleID尚未在iTunesStore中使用」。沒有什麼可擔心的錯誤提示，您可以按照這些解決方案集進行修復。修正1–更改送貨地址此提示出現在iTunesStore中的主要原因是您的AppleID個人資料中沒有正確的地址。步驟1–首先，開啟iPhone上的iPhone設定。步驟2–AppleID應位於所有其他設定的頂部。所以，打開它。步驟3–在那裡，打開“付款和運輸”選項。步驟4–使用面容ID驗證您的存取權限。步驟
Shazam應用程式在iPhone中無法運作：修復
Jun 08, 2024 pm 12:36 PM
iPhone上的Shazam應用程式有問題？ Shazam可協助您透過聆聽歌曲找到歌曲。但是，如果Shazam無法正常工作或無法識別歌曲，則必須手動對其進行故障排除。修復Shazam應用程式不會花費很長時間。因此，無需再浪費時間，請按照以下步驟解決Shazam應用程式的問題。修正1–禁用粗體文字功能iPhone上的粗體文字可能是Shazam無法正常運作的原因。步驟1–您只能從iPhone設定執行此操作。所以，打開它。步驟2–接下來，開啟其中的「顯示和亮度」設定。步驟3–如果您發現啟用了“粗體文本
Win11系統管理員權限取得步驟詳解
Mar 08, 2024 pm 09:09 PM
Windows11作為微軟最新推出的作業系統，深受廣大用戶喜愛。在使用Windows11的過程中，有時候我們需要取得系統管理員權限，以便進行一些需要權限的操作。接下來將詳細介紹在Windows11中取得系統管理員權限的步驟。第一步，點擊“開始功能表”，在左下角可以看到Windows圖標，點擊該圖標即可開啟“開始功能表”。第二步，在「開始功能表」中尋找並點擊「
iPhone螢幕截圖不起作用：如何修復
May 03, 2024 pm 09:16 PM
螢幕截圖功能在您的iPhone上不起作用嗎？截圖非常簡單，因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是，還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來，點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來，開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在，您只需將這些功能中的任何一個連結到螢幕擷取即可。因此，點擊那裡的首
iPhone上的Safari縮小問題：這是修復程序
Apr 20, 2024 am 08:08 AM
如果您無法控制Safari中的縮放級別，完成工作可能會非常棘手。因此，如果Safari看起來被縮小了，那對您來說可能會有問題。您可以透過以下幾種方法解決Safari中的這個縮小小問題。 1.遊標放大：在Safari選單列中選擇「顯示」>「放大遊標」。這將使遊標在螢幕上更加顯眼，從而更容易控制。 2.移動滑鼠：這聽起來可能很簡單，但有時只需將滑鼠移動到螢幕上的另一個位置，可能會自動恢復正常大小。 3.使用鍵盤快速鍵修復1–重置縮放等級您可以直接從Safari瀏覽器控制縮放等級。步驟1–當您在Safari
iPhone中缺少時鐘應用程式：如何修復
May 03, 2024 pm 09:19 PM
您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並
