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

//生成日期文件夾  縮略圖  
·····
·····
·····

　　效果如下：

 

這樣就實現了  選擇圖片的時候就預覽效果了····