2014年4月9日 星期三

{JQuery} 圖片上傳前先預覽--連結

http://sundoctor.iteye.com/blog/1943278
http://www.blueshop.com.tw/board/FUM20041006152641OLG/BRD20100429165520ZQ2.html
http://www.cnblogs.com/sooj/archive/2013/04/25/3041862.html
http://support.microsoft.com/kb/294714/zh-tw
http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload
http://www.dotblogs.com.tw/cross/archive/2010/09/21/17840.aspx

Funcion 回傳 <img> Tag Html
imgdiv=$('<div id="imgDiv"> </div>')
imgScaling(fileuploadControl,imgdiv);

function imgScaling(slave, imgDiv) {
    var maxsize = 4096;
    var version = parseInt($.browser.version, 10);
    var returnValue = '';
    if (slave.value) {
        if ($.browser.msie && version < 10) {
            if (version == 6) {
                var image = new Image();
                image.onload = function () {
                    if ((image.fileSize / 1024) > maxsize) {
                        alert('圖片大小不能超過' + maxsize + 'K');
                        return false;
                    }
                }
                image.src = 'file:///' + slave.value;

                imgDiv = createImg(imgDiv);
                imgDiv.attr('src', image.src);
                returnValue= imgDiv[0].outerHTML;
                //                imgDiv = autoScaling(imgDiv);
            } else {
//IE8版本 用DXImageTransform.Microsoft.AlphaImageLoader 一直失敗
                imgDiv.html('');
                slave.select();
                var img = document.selection.createRange().text;
                var image = new Image();
                image.onload = function () {
                    if ((image.fileSize / 1024) > maxsize) {
                        alert('圖片大小不能超過' + maxsize + 'K');
                        return false;
                    }
                }
                image.src = img;
                try {
                    var v = String(slave.value || '');
                    var temp = v.match(/[^\/\\]+$/gi);
                    imgDiv.append(temp[0]);
                    returnValue=temp[0];
                //imgDiv.css({ "-ms-filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image,src=" + img + ")" });
//                imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
//                imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;
//                var aa = imgDiv;
                } catch (e) {
                    alert("無效的圖片文件!");
                    return false;
                }
            }
        }
        else {
            try {
                var file = null;
                var size = 0;
                if (slave.files && slave.files[0]) {
                    file = slave.files[0];
                    size = file.size;
                } else if (slave.files && slave.files.item(0)) {
                    file = slave.files.item(0);
                    size = file.fileSize;
                }
                if ((size / 1024) > maxsize) {
                    alert('圖片大小不能超過' + maxsize + 'K');
                    return false;
                }
                imgDiv = createImg(imgDiv);
                //Firefox 因安全性問題已無法直接通過input[file].value 獲取完整的文件路徑
                try {
                    //Firefox7.0 以下                    
                    imgDiv.attr('src', file.getAsDataURL());
                } catch (e) {
                    //Firefox8.0以上                    
                    imgDiv.attr('src', window.URL.createObjectURL(file));
                }

                imgDiv.css({ "vertical-align": "middle" });
                returnValue=imgDiv[0].outerHTML;
            } catch (e) {
                //支持html5的瀏覽器,比如高版本的firefox、chrome、ie10
                if (slave.files && slave.files[0]) {
                    if ((slave.files[0].size / 1024) > maxsize) {
                        alert('圖片大小不能超過' + maxsize + 'K');
                        return false;
                    }
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        imgDiv.attr('src', e.target.result);
                    };
                    reader.readAsDataURL(slave.files[0]);
                    returnValue=imgDiv[0].outerHTML;
                }
            };
        }
    }
    return returnValue;
}
function createImg(imgDiv) {
    imgDiv.html('');

    var img = $("<img />");
    imgDiv.replaceWith(img);
    imgDiv = img;
    imgDiv.width(90);
    imgDiv.height(110);
    return imgDiv;
}