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);
}
});
});
uploadify上傳圖片插件的使用