jquery 上传图片即时预览功能

<script type="text/javascript">
        jQuery.fn.extend({
            uploadPreview: function (opts) {
                var _self = this, _this = $(this);
                opts = jQuery.extend({
                    Img: "Image1",
                    Width: 100,
                    Height: 100,
                    ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                    Callback: function () { }
                }, opts || {});
                _self.getObjectURL = function (file) {
                    var url = null;
                    if (window.createObjectURL != undefined) {
                        url = window.createObjectURL(file);
                    } else if (window.URL != undefined) {
                        url = window.URL.createObjectURL(file);
                    } else if (window.webkitURL != undefined) {
                        url = window.webkitURL.createObjectURL(file);
                    }
                    return url;
                }
                _this.change(function () {
                    if (this.value) {
                        if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                            alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
                            this.value = "";
                            return false;
                        }
                        if (navigator.userAgent.indexOf("MSIE") > -1) {
                            try {
                                $("#" + opts.Img).attr(‘src‘, _self.getObjectURL(this.files[0]));
                            } catch (e) {
                                var src = "";
                                var obj = $("#" + opts.Img);
                                var div = obj.parent("div")[0];
                                _self.select();
                                if (top != self) {
                                    window.parent.document.body.focus();
                                } else {
                                    _self.blur();
                                }
                                src = document.selection.createRange().text;
                                document.selection.empty();
                                obj.hide();
                                obj.parent("div").css({
                                    ‘filter‘: ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)‘,
                                    ‘width‘: opts.Width + ‘px‘,
                                    ‘height‘: opts.Height + ‘px‘
                                });
                                div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                            }
                        } else {
                            $("#" + opts.Img).attr(‘src‘, _self.getObjectURL(this.files[0]));
                        }
                        opts.Callback();
                    }
                });
            }
        });
    </script>
    <script type="text/javascript">
        $(function () {
//            $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
            $("#<%=FileUpload1.ClientID%>").uploadPreview({ Img: "Img1", Width: 120, Height: 120 });
            $("#<%=photopath.ClientID%>").uploadPreview({ Img: "Image1", Width: 120, Height: 120 });
        });
    </script>

时间: 2024-10-01 19:12:36

jquery 上传图片即时预览功能的相关文章

Ajax 实现上传图片即时预览功能

本文为原创,转载请注明:http://www.pm-road.com/index.php/2014/07/31/50 很多网站在上传头像或照片的时候,都会有一个预览功能,结合自身体验将该功能实现一下:要求:图片保存到数据库点击查看实现ajax上传图片即时预览另一种方法(简单方法) 之前,我在做项目的时候,有一个功能就是要求上传的图片要即时显示,很多网站都会有这样的案例,其中的代码逻辑大多为把图片传到服务器上之后,返回图片的 物理路径,不过,我们当时使用的框架为ExtJS 4.1,而且因为涉及一些

上传图片带预览功能兼容IE和火狐等主流浏览器

<!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> <meta http-equiv="Content-

nodejs实现本地上传图片并预览功能

Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax

js实现上传图片本地预览功能

js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * @param {Object} previewObj 上传图片的预览id元素  fresh-send-preview-img     * @param {Object} localImg 预览图片的父层id元素  fresh-send-preview-imgvideo     */    fs.setIma

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

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

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

【小月博客】用HTML5的File API做上传图片预览功能

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

图片上传即时预览效果

做项目时一同事推荐的一个picload插件,实现图片上传后,即时预览效果,感觉很不错,分享出来. 点击上传图片后.立即看到预览的效果如下图: 布局代码: <div class="banner" id="CoupicPicYes">图片预览</div> <a class="input-file" href="javascript:void(0);" onclick="$('#photoUp

Java实现图片裁剪预览功能

Java实现图片裁剪预览功能 在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import