uploadify上傳圖片外掛的使用
uploadify 是一款上傳圖片專用的外掛
該外掛在頁面中只是一個按鈕，點選按鈕彈出檔案選擇框，選擇圖片後自動上傳到伺服器
1.http://www.uploadify.com/ 是其官網
下載可能需要錢
2.使用
在官網點選doc來到文件位置http://www.uploadify.com/documentation/
在下面點選Implementing Uploadify來到安裝使用的目錄 http://www.uploadify.com/documentation/uploadify/implementing-uploadify/
1.下載uploadify後得到一些檔案，需要將其放到我們想放的地方
2.該外掛需要jquery的支援，所以頁面中引入外掛之前先引入jquery.min.js，這個檔案自己去下載即可
3.頁面中引入uploadify的檔案
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css" />
在body之前新增
<script>
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Put your options here
});
});
</script>
4.html程式碼中加入<input type="file" name="file_upload" id="file_upload" />
注意,在引入uploadify檔案之前要先引入jquery檔案，接著引入uploadify的js檔案jquery.uploadify-3.1.min.js和css檔案，最後得到的大概是這樣的
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',//這個uploadify.swf的路徑要正確
'uploader' : 'uploadify.php'//這是提交到哪個頁面，在這裡對上傳的圖片進行獲取和處理，儲存等
// Your options here
});
});
</script>
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>
3.錯誤問題
1.要保證引入檔案的路徑是正確的，保證'swf':'uploadify.swf'檔案路徑是正確的
2.開啟頁面發現並沒有顯示uploadify樣式的按鈕，而是原始的上傳檔案按鈕，這可能是因為瀏覽器認為我們的網站是危險網站，不載入我們的uploadify.swf檔案
可以看到位址列旁邊顯示一個危險資訊，我們需要對網站進行信任，讓其載入
以chrome瀏覽器為例，點選位址列左邊的危險感嘆號，彈出框中選擇網站設定，允許flash和彈出式視窗等，重新載入頁面即可看到按鈕樣式改變了
3.頁面開啟後就報一個404的錯誤，原因是頁面開啟時自動進行了上傳操作，此時還沒有選擇檔案的，這是uploadify.min.js中的bug，我們要進行修改
uploadify.min.js中將this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
改為if (this.settings.button_image_url != "") {this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);}
4.uploadify相關屬性和函式使用
在官網中檢視文件，可知道一些事件的使用方法，如
$(function() {
$("#file_upload").uploadify({
'height' : 50,//設定了高度
'swf' : '/uploadify/uploadify.swf',
'uploader' : '/uploadify/uploadify.php',
'onUploadSuccess' : function(file, data, response) {//設定上傳成功時的操作
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
},
'onUploadError' : function(file, errorCode, errorMsg, errorString) {//設定上傳失敗時的操作
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
}
});
});