html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uploader</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="plupload-2.1.9/plupload.full.min.js"></script>
<script src="uploader.js"></script>
<style>
*{
box-sizing: border-box;
}
#uploader{
width: 200px;
height: 500px;
}
img{
max-width: 100%;
}
</style>
</head>
<body>
<div id="uploader">
<!--用來放置加入上傳隊列的圖片-->
<div class="upload_pic" id="upload_pic"></div>
<!-- 上傳按鈕 -->
<div>
<a id="picker">
<img src="upload.png" alt="">
</a>
</div>
</div>
</body>
<script>
$(function () {
//初始化上傳
uploader();
})
</script>
</html>js 需要把jquery , plupload.full.min.js 引入
uploader.js
/**
* Created by zdeleted_upload_icondeleted_upload_icon on 2016/9/26.
* 上傳圖片
*/
function uploader() {
//uploader配置
var uploader = new plupload.Uploader({
browse_button:"picker", //觸發文件選擇對話框的DOM元素，當點擊該元素後便後彈出文件選擇對話框。該值可以是DOM元素對象本身，也可以是該DOM元素的id
url:"", //服務器端接收和處理上傳文件的腳本地址，可以是相對路徑(相對於當前調用Plupload的文檔)，也可以是絕對路徑
filters:{
mime_types:[{ title : "Image files", extensions : "jpg,png" }], //用來限定上傳文件的類型
max_file_size:"20M", //用來限定上傳文件的大小
prevent_duplicates:"true" //是否允許選取重複的文件，爲true時表示不允許，爲false時表示允許
},
multipart:"true", //爲true時將以multipart/form-data的形式來上傳文件，爲false時則以二進制的格式來上傳文件
runtimes:"html5,htm4", //用來指定上傳方式
chunk_size:"0", //分片上傳文件時，每片文件被切割成的大小，爲數字時單位爲字節。也可以使用一個帶單位的字符串，如"200kb"。當該值爲0時表示不使用分片上傳功能
max_retries:"0" //當發生plupload.HTTP_ERROR錯誤時的重試次數，爲0時表示不重試
});
//初始化
uploader.init();
//添加監聽事件，當文件添加到上傳隊列後觸發
uploader.bind("FilesAdded",function (uploader,files) {
for (var i = 0; i < files.length; i++){
//構造html代碼
var html = '<a id="file-' + files[i].id +'"></a>';
$(".upload_pic").before($(html));
//點擊刪除按鈕，刪除上傳的文件
$(".deleted_upload_icon").click(function () {
$(this).parent().remove();
});
!function(i){
previewImage(files[i],function(imgsrc){
$('#file-'+files[i].id).append('<img src="'+ imgsrc +'" />');
})
}(i);
}
});
//添加監聽事件，當上傳發生錯誤時
uploader.bind("Error",function (uploader,errObject) {
console.log(errObject.code);
});
}
//圖片預覽 file爲plupload事件監聽函數參數中的file對象,callback爲預覽圖片準備完成的回調函數
function previewImage(file,callback){
//確保文件是圖片
if(!file || !/image\//.test(file.type)) return;
//gif使用FileReader進行預覽,因爲mOxie.Image只支持jpg和png
if(file.type=='image/gif'){
var fr = new mOxie.FileReader();
fr.onload = function(){
callback(fr.result);
fr.destroy();
fr = null;
};
fr.readAsDataURL(file.getSource());
}else{
var preloader = new mOxie.Image();
preloader.onload = function() {
//先壓縮一下要預覽的圖片,寬86，高86
// preloader.downsize( 86, 86 );
//得到圖片src,實質爲一個base64編碼的數據
var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL();
callback && callback(imgsrc); //callback傳入的參數爲預覽圖片的url
preloader.destroy();
preloader = null;
};
preloader.load( file.getSource() );
}
}