`
zuimeitulip
  • 浏览: 59781 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

文件上传立刻预览

 
阅读更多

上传一个图片之后想要立刻预览图片。直接将<input type="file">标签的路径直接赋给<img>标签的src好像不可以,写了一个方法。

 

<img id="image"/>

<input type="file" id="upload"/>

 

<script type="text/javascript">

        $("#upload").uploadPreview({ Img: "image", Width: 110, Height: 135 });

<script>

 

前提是要导入jquery-xxx-min.js

另外写一个js文件upload.js 将其导入,代码如下

jQuery.fn.extend({
    uploadPreview: function (opts) {
        var _self = this,
            _this = $(this);
        opts = jQuery.extend({
            Img: "img-head",
            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 ($.browser.msie) {
                    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();
            }
        });
    }
});

 

分享到:
评论

相关推荐

    Excel文件上传预览示例

    "Excel文件上传预览示例"是一个典型的 ASP.NET C# 应用程序,它展示了如何实现用户上传Excel文件并进行预览的功能。这个功能在很多业务系统中都有广泛的应用,比如数据分析、财务报表、销售统计等。下面将详细解释这...

    java文件上传可以预览

    在Java开发中,文件上传和预览功能是常见的需求,特别是在Web应用中,例如用户上传图片、文档等,然后在前端展示预览效果。这里我们将深入探讨如何在Java环境中实现这个功能,特别是利用Tomcat服务器。 首先,我们...

    文件上传下载+预览功能

    在IT领域,文件上传下载和预览功能是Web应用程序中非常常见且重要的组成部分,尤其在文档分享、在线协作和知识管理平台中。本篇将详细阐述这一功能的实现原理、技术选型以及相关知识点。 首先,文件上传是用户将...

    基于bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip

    标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件,并且在上传前可以...

    多文件预览上传-多图片预览上传

    在IT行业中,文件上传是许多Web应用程序不可或缺的功能,特别是在处理多文件或图片的场景下。"多文件预览上传-多图片预览上传"是一个专为JAVA开发的解决方案,它允许用户在实际上传之前预览文件,特别是图片,提高了...

    ASP.NET多文件上传 带预览

    此示例"ASP.NET多文件上传 带预览"着重展示了如何实现用户在上传文件前预览图片的功能,以及如何将这些文件存储到服务器上。以下是对这个功能的详细解释: 1. **多文件选择**:在HTML5中,`&lt;input&gt;`标签的`type=...

    文件服务器mino实现文件存储和文件预览接口

    在SpringBoot中,你可以创建一个Controller,定义一个接收文件上传的POST接口,处理文件流,并调用MinIO的PutObject方法来保存文件。 文件下载则是通过获取对象并返回其内容来实现的。在接收到文件请求时,...

    JQuery文件上传支持多文件上传可预览

    《jQuery实现多文件上传与预览功能详解》 在Web应用中,文件上传是一个常见的功能需求,尤其是在社交网络、在线教育、图片分享等场景中。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的API和插件,使得...

    文件上传并预览.txt

    文件上传并预览.txt

    HTML5多文件上传带预览效果源码下载

    在本文中,我们将深入探讨HTML5如何实现多文件上传以及预览效果,结合源码分析来帮助你理解和应用这些技术。 一、HTML5多文件上传 在HTML4时代,用户只能通过单个`&lt;input type="file"&gt;`标签选择一个文件进行上传。...

    实现点击按钮预览文件

    - **文件上传处理**:当用户选择文件后,可能需要将其上传到服务器。这通常涉及HTTP的POST请求,后端接收到文件流后进行存储。 - **文件访问接口**:后端需要提供一个接口,供前端请求文件内容。这个接口可以返回...

    ajax多文件上传图片文件带预览功能

    "Ajax多文件上传图片文件带预览功能"是实现这一需求的一种高效且用户体验良好的技术方案。通过Ajax(异步JavaScript和XML)技术,我们可以实现无刷新的文件上传,同时在用户选择文件后即时预览图片,提升交互体验。 ...

    html上传视频文件video预览

    html上传视频文件video预览(不支持多文件预览,在ie及火狐下测试好使,其他游览未测试,纯js 不用引入插件 )

    文件上传预览-移动端.zip

    在移动端应用开发中,文件上传和图片预览是常见的需求,尤其在社交、电商或个人资料编辑等场景中。这个名为“文件上传预览-移动端.zip”的压缩包可能包含了一个JavaScript插件,用于帮助开发者实现在移动设备上方便...

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在本文中,我们将深入探讨如何使用JavaScript(JS)与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求,尤其是在用户交互丰富的网站和应用中。 首先,...

    html5实现的文件上传预览功能

    HTML5是Web开发的一个重要里程碑,它引入了许多新特性,其中就包括了强大的文件操作API,使得在浏览器端实现文件上传预览成为可能。在这个功能中,jQuery作为一个流行的JavaScript库,常常被用来简化DOM操作和事件...

    基于springboot的文件在线预览.rar

    综上所述,基于SpringBoot的文件在线预览系统通过整合多种技术和工具,实现了便捷的文件上传和多种类型文件的在线预览,提高了用户体验,同时也需要注意安全性与性能的优化。通过不断迭代和改进,这样的系统可以广泛...

    FineUploader多个文件上传插件包含图像预览拖放进度条功能

    FineUploader是一款强大的JavaScript文件上传插件,专为处理多个文件上传而设计,它提供了丰富的功能,包括图像预览、拖放操作和进度条显示。这款插件不仅适用于传统的HTTP服务器,还支持Amazon S3和Microsoft Azure...

    html网页js打开文件对话框带预览框.JS实现文件上传前先本地预览功能

    此外,网络上的资源如"js读取input[type=file]图片,并实时预览_freedom-CSDN博客.url"、"html file控件选择文件后立即预览 js实现 - Bodi - 博客园-上传图片后立即预览.url"以及"JS+HTML5 FileReader实现文件上传前...

    java操作mongoDB实现文件上传预览打包下载

    对于"java操作mongoDB实现文件上传预览打包下载"这个主题,我们将深入探讨如何利用Java与MongoDB交互,实现文件的上传、下载、预览以及打包下载等功能。 首先,我们需要在Java项目中引入MongoDB的驱动库,通常是...

Global site tag (gtag.js) - Google Analytics