使用 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();

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

　　效果如下：

 

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