jquery上传图片---本地浏览图片

//说明：图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图

//参数设置：
//width                     存放图片固定大小容器的宽
//height                    存放图片固定大小容器的高
//imgDiv                    页面DIV的JQuery的id
//maxSize					图片大小最大限制(K)
//imgType                   数组后缀名
//**********************图片上传预览插件*************************
(function ($) {
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            opts = jQuery.extend({
                width: 0,
                height: 0,
                imgDiv: null,
                imgBox: null,
                maxSize: 300,
                noimg: ‘‘,
                imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                callback: function () { return false; }
            }, opts || {});
            var _this = $(this);
            var imgDiv = opts.imgDiv;
            var imgbox = opts.imgBox;
            //var image = new Image();
            //image.onload = function () {
            //    var thisw = this.width, thish = this.height, left, top;
            //    var rate = (opts.width / thisw < opts.height / thish) ? opts.width / thisw : opts.height / thish;
            //    if (rate <= 1) {
            //        imgDiv.width(thisw * rate);
            //        imgDiv.height(thish * rate);
            //    } else {
            //        imgDiv.width(thisw);
            //        imgDiv.height(thish);
            //        rate = 1;
            //    }
            //    left = (opts.width - thisw * rate) * 0.5;
            //    top = (opts.height - thish * rate) * 0.5;
            //    imgDiv.css({ "margin-left": left, "margin-top": top });
            //    setTimeout(function () {
            //        imgDiv.show();
            //    }, 200);
            //    image = null;
            //}
            //image.onerror = function () {
            //    this.src = noimg;
            //    imgDiv.attr(‘src‘, noimg);
            //    this.onerror = null;
            //}
            //image.src = imgDiv.attr(‘src‘);
            var version = 7;
            var filters = imgbox[0].filters ? true : false;//ie10内核filters是舍弃了的
            var v = { //判断是否是ie
                getie: function () {
                    if (window.attachEvent) {
                        return true;
                    }
                    else {
                        return false;
                    }
                },
                //是否是ie678
                getoldie: function () {
                    if (this.getie()) {
                        if (window.addEventListener) {
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                    else {
                        return false;
                    }
                },
                ie9: function () {
                    if (navigator.userAgent.indexOf(‘MSIE 9.0‘) > 0) {
                        return true;
                    }
                }
            }
            version = (v.getoldie || v.ie9) ? 9 : 10;
            var fit = (version <= 9 && filters) || (version >= 10 && filters);

            var autoScaling = function () {
                if (fit) imgbox.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
                var box_width = imgbox.width();
                var box_height = imgbox.height();
                var img_width = imgDiv.width();
                var img_height = imgDiv.height();
                if (fit) {
                    img_width = box_width;
                    img_height = box_height;
                }
                if (img_width > 0 && img_height > 0) {
                    var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;
                    if (rate <= 1) {
                        img_width = img_width * rate;
                        img_height = img_height * rate;
                        imgbox.width(img_width);
                        imgbox.height(img_height);
                        if (fit) {
                            imgbox.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
                        }
                        else {
                            imgDiv.width(img_width);
                            imgDiv.height(img_height);
                        }

                    } else {
                        imgDiv.width(img_width);
                        imgDiv.height(img_height);
                    }
                    var left = (opts.width - imgbox.width()) * 0.5;
                    var top = (opts.height - imgbox.height()) * 0.5;
                    imgbox.css({ "margin-left": left, "margin-top": top });
                    setTimeout(function () {
                        imgDiv.show();
                        if (fit) {
                            imgbox.show();
                        }
                    }, 100);
                }
                else {
                    imgbox.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
                    imgbox.width(opts.width);
                    imgbox.height(opts.height);
                }
            };
            var createImg = function () {
                imgDiv.html(‘‘);
                var img = $("<img />");
                imgDiv.replaceWith(img);
                imgDiv = img;
            };
            _this.change(function () {
                imgDiv.hide();
                imgDiv.css({ ‘width‘: ‘‘, ‘height‘: ‘‘ });
                imgbox.css({ ‘width‘: ‘‘, ‘height‘: ‘‘, ‘padding‘: ‘‘ });
                if (this.value) {
                    if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");
                        this.value = "";
                        return false;
                    }
                    //ie7\8\9
                    var i = this;
                    if (fit) {
                        try {
                            this.select();
                            var imgSrc = document.selection.createRange().text;
                            imgbox.html(‘‘);
                            imgbox.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" });
                            imgbox[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
                            imgbox[0].filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = imgSrc;
                            imgbox.hide();
                            setTimeout(function () {
                                autoScaling();
                            }, 100);
                        } catch (e) {
                            alert("无效的图片文件！");
                            return;
                        }
                    }
                    else {
                        try {
                            var file = null;
                            var size = 0;
                            if (this.files && this.files[0]) {
                                file = this.files[0];
                                size = file.size;
                            } else if (this.files && this.files.item(0)) {
                                file = this.files.item(0);
                                size = file.fileSize;
                            }

                            if ((size / 1024) > opts.maxSize) {
                                alert(‘图片大小不能超过‘ + opts.maxSize + ‘K‘);
                                return false;
                            }

                            //支持html5的浏览器,比如高版本的firefox、chrome、ie10
                            if (this.files && this.files[0]) {
                                if ((this.files[0].size / 1024) > opts.maxSize) {
                                    alert(‘图片大小不能超过‘ + opts.maxSize + ‘K‘);
                                    return false;
                                }
                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    imgDiv.attr(‘src‘, e.target.result);
                                };
                                reader.readAsDataURL(this.files[0]);
                                setTimeout(function () {
                                    autoScaling();
                                }, 100);
                            }

                            //火狐非捆绑软件 版本都30几点几了，还会有7.??
                            //createImg();
                            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
                            //try {
                            //    //Firefox7.0 以下                    			
                            //    imgDiv.attr(‘src‘, file.getAsDataURL());
                            //} catch (e) {
                            //    //Firefox8.0以上                    			
                            //    imgDiv.attr(‘src‘, window.URL.createObjectURL(file));
                            //}
                            //setTimeout(function () {
                            //    autoScaling();
                            //}, 100);
                        } catch (e) {
                            alert(‘系统错误，请重试！‘);
                        };
                    }
                }
            });
        }
    });
})(jQuery);

<div class="file-box">
   <p>图片上传</p>
   <div class="file-info">
     <div class="show-img" id="imgbox2">
       <img src="/images/ico-upfileimg.png" id="img2" />
     </div>
   </div>
   <div class="file-input">点击上专<input type="file" id="file2" name="CFileUp" /></div>
</div>

   $(function () {
        $("#file1").uploadPreview({
            width: 220,
            height: 150,
            imgDiv: $(‘#img1‘),
            imgBox: $(‘#imgbox1‘),
            noimg: ‘/Images/noneimg.jpg‘,
            callback: function () { }
        });      
    });