1. 程式人生 > >uploadify上傳圖片插件的使用

uploadify上傳圖片插件的使用

set min title with 地址 options 位置 head ash

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