上传图片预览,支持IE6

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

//参数设置:
//width                     存放图片固定大小容器的宽
//height                    存放图片固定大小容器的高
//imgDiv                    页面DIV的JQuery的id
//maxSize                    图片大小最大限制(K)
//imgType                   数组后缀名
//**********************图片上传预览插件*************************
(function ($) {
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            opts = jQuery.extend({
                width: 0,
                height: 0,
                imgDiv: "#imgDiv",
                maxSize: 300,
                imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                callback: function () { return false; }
            }, opts || {});
            //var _self = this;
            var _this = $(this);
            var imgDiv = $(opts.imgDiv);
            imgDiv.width(opts.width);
            imgDiv.height(opts.height);

            var version = parseInt($.browser.version, 10);

            autoScaling = function () {

                if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
                var img_width = imgDiv.width();
                var img_height = imgDiv.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) {
                        if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
                        imgDiv.width(img_width * rate);
                        imgDiv.height(img_height * rate);
                    } else {
                        imgDiv.width(img_width);
                        imgDiv.height(img_height);
                    }
                    var left = (opts.width - imgDiv.width()) * 0.5;
                    var top = (opts.height - imgDiv.height()) * 0.5;
                    imgDiv.css({ "margin-left": left, "margin-top": top });
                    imgDiv.show();
                }
            },

            createImg = function () {
                imgDiv.html(‘‘);

                var img = $("<img />");
                imgDiv.replaceWith(img);
                imgDiv = img;
            },

            _this.change(function () {

                if (this.value) {
                    if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");
                        this.value = "";
                        return false;
                    }
                    imgDiv.hide();
                    if ($.browser.msie && version < 10) {

                        if (version == 6) {

                            var image = new Image();
                            image.onload = function () {
                                if ((image.fileSize / 1024) > opts.maxSize) {
                                    alert(‘图片大小不能超过‘ + opts.maxSize + ‘K‘);
                                    return false;
                                }
                            }
                            image.src = ‘file:///‘ + this.value;

                            createImg();
                            imgDiv.attr(‘src‘, image.src);
                            autoScaling();
                        } else {

                            this.select();
                            var img = document.selection.createRange().text;
                            var image = new Image();
                            image.onload = function () {
                                if ((image.fileSize / 1024) > opts.maxSize) {
                                    alert(‘图片大小不能超过‘ + opts.maxSize + ‘K‘);
                                    return false;
                                }
                            }
                            image.src = img;

                            imgDiv.html(‘‘);
                            imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
                            imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";

                            try {
                                imgDiv.get(0).filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = img;
                            } catch (e) {
                                alert("无效的图片文件!");
                                return;
                            }

                            setTimeout("autoScaling()", 100);
                        }
                    }
                    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;
                            }

                            createImg();

                            //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" });
                            setTimeout("autoScaling()", 100);
                        } catch (e) {
                            //支持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("autoScaling()", 100);
                            }
                        };
                    }
                }
            });
        }
    });
})(jQuery);

HTML代码:

  <div style="width: 290px; height: 290px; overflow: hidden; border: 1px solid red;">
        <div id="imgDiv"></div>
    </div>
    <br>
    <input type="file" value="上传文件">

    <script>
        $(document).ready(function () {
            $("input").uploadPreview({ width: 290, height: 290, imgDiv: "#imgDiv" });
        });
</script>
时间: 2024-10-13 05:03:43

上传图片预览,支持IE6的相关文章

jquery实现上传图片预览(需要浏览器支持html5)

jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

HTML5时代的纯前端上传图片预览及严格图片格式验证函数(转载)

原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证.这样就造成了一定的服务器资源浪费.但是html5时代,这个工作我们完全可以交给前端来做了. 另一方面,html5时代,许多我们原来的图片预览方案都失效了.究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供真

用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能 前几天做了一个项目,涉及到上传本地图片的功能,正好之前了解过 html5 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

JavaScript实现简单的前端上传图片预览

JavaScript实现简单的前端上传图片预览 <div class="file_upload"> <div id="portrait"></div> <input type="file" name="" id="" onchange="showPerview(this)"> </div> <script type=&qu

HTML5拖拽上传图片预览

参考博文1:http://blog.csdn.net/testcs_dn/article/details/8695532 参考博文2:http://justcoding.iteye.com/blog/2105760 1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块

HTML5 上传图片预览

html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic").on('change', function (e) { var files = e.target.files || e.dataTransfer.files; onSelect(files); }) //选中图片之后 function onSelect(file) { file = file[0]

HTML5上传图片预览

笔记一下!!! <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.m

利用html5实现上传图片预览

在HTML5中,通过FileReader可以轻松的实现这个功能. 只要在<input type="file" />文件表单元素中监听 onchange 事件,然后通过FileReader读取图片文件,然后将读取的内容在<img>中显示即可. 实现代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /

前端实现input[type=&#39;file&#39;]上传图片预览效果

众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现:一是前后台交互,后台将图片地址返回前端: 二是,我今天写的内容,使用FileReader对象--允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容:此种方法可以优化图片加载速度,减少方法一占用带宽的问题: 但是,此种方法兼容性存在问题,主要是IE浏览器(ie10以上没问题