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() );
}
}