使用 plupload 插件 上传图片 ·· 选择图片的时候实现预览功能··

在网上找了个 plupload 插件 上传图片···我想做的思路是··在选择图片的时候 就带有预览效果 （图片还没有上传到服务器上··）···方便选项图片的时候查看

plupload 插件就不用多介绍了··网上一大堆 ··

首页html 引入js

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/plupload-2.1.8/plupload.full.min.js" type="text/javascript"></script>

<form id="form1" runat="server">
<div>
<div >
<img src="img/sfz1.png" alt="" id="cardFrontImg"  />
<div id="cardFrontDiv">
<a id="cardFront" href="javascript:;">[选择图片]</a>
<a style="display: none;" id="cardFrontUpload" href="javascript:;">[重新上传]</a>
</div>
<div id="cardFrontfilelist">
</div>
<input type="hidden" id="hfFeID" value="0" />
<input type="button" name="name" id="btnSubmit" value="确定上传" />
<input type="button" name="name" id="btnCancel" value="取消上传" />
</div>
</div>
</form>

<script type="text/javascript">
$("#btnSubmit").click(function() {
uploaderCardFront.start();
});

<%--/********************上传图片start*************************/--%>
var uploaderCardFront = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'cardFront',
container: document.getElementById('cardFrontDiv'),
url: '/Handler/Finance.ashx' ,
flash_swf_url: 'js/plupload-2.1.8/Moxie.swf',
silverlight_xap_url: 'js/plupload-2.1.8/Moxie.xap',
multi_selection: false, //不可以选择多个上传

filters: {
max_file_size: '10mb',
mime_types: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
]
},
init: {
PostInit: function () {
document.getElementById('cardFrontfilelist').innerHTML = '';

document.getElementById('cardFrontUpload').onclick = function () {

uploaderCardFront.start();
return false;
};
},
FilesAdded: function (up, files) {

//上传选择多张时，保存的永远的是最后一张
if (up.files.length>=1) {
up.splice(0, up.files.length-1);
for (var i = up.files.length-1; i >0 ; i--) {
if (i!=up.files.length-1) {
up.removeFile( up.getFile(file[i].id));
}
}
}

plupload.each(files, function (file) {
document.getElementById('cardFrontfilelist').innerHTML = '';
document.getElementById('cardFrontfilelist').innerHTML += '<div id="' + file.id + '">  <b></b></div>';

//显示预览图片
previewImage(file, function(imgSrc) {
$("#cardFrontImg").attr("src", imgSrc);
});

});

},
//上传前做一些判断 和参数设置
BeforeUpload: function (up, file) {
var data;
data = {
feID: $("#hfFeID").val()
};
up.setOption("multipart_params", data);

if (!isOk) {
uploaderCardFront.stop();
}
},

UploadProgress: function (up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function (up, err) {

},
//接受服务器返回上传图片的路径图片
FileUploaded: function (up, file, result) {
$("#cardFrontImg").attr("src",  result.response); //result.response 返回上传成功后 图片路径

} } });

<%--/*******预览显示图片***********/--%>
function previewImage(file, callback) {//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
if (!file || !/image\//.test(file.type)) return; //确保文件是图片
if (file.type == 'image/gif') {//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
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 () {
//preloader.downsize(550, 400);//先压缩一下要预览的图片,宽300，高300
var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
callback && callback(imgsrc); //callback传入的参数为预览图片的url
preloader.destroy();
preloader = null;
};
preloader.load(file.getSource());
}
}

　一般处理程序接受图片

HttpPostedFile file = context.Request.Files["file"];
string extension = Path.GetExtension(file.FileName).ToLower();

//生成日期文件夹  缩略图
·····
·····
·····

　　效果如下：





这样就实现了 选择图片的时候就预览效果了····