用户上传图片后(这里是用户点击上传图片,实际上还没真正的上传到服务器上),js或jquery如何实现上传图片预览功能?如果不能实现,用什么办法实现预览图片?

2011-03-22 10:29:09

3 Answers

其实您要的就是预览本地图片,这个需求我之前在做一个上传图片功能的时候遇到过,说下实现思路:

获得图片的完整本地路径,在上传之前显示在页面上。

分享下当时使用的代码:
关键部分,获取客户端图片的完整路径  

function getFullPath(obj) {    //得到图片的完整路径  
    if (obj) {  
        //ie  
        if (window.navigator.userAgent.indexOf("MSIE") >= 1) {  
            obj.select();  
            return document.selection.createRange().text;  
        }  
        //firefox  
        else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {  
            if (obj.files) {  
                return obj.files.item(0).getAsDataURL();  
            }  
            return obj.value;  
        }  
        return obj.value;  
    }  
}

使用的时候,可以这样来做(贴出来的代码有些额外功能,可能您也需要)

  
$("#loadFile").change(function () { var strSrc = $("#loadFile").val(); img = new Image(); img.src = getFullPath(strSrc); //验证上传文件格式是否正确 var pos = strSrc.lastIndexOf("."); var lastname = strSrc.substring(pos, strSrc.length) if (lastname.toLowerCase() != ".jpg") { alert("您上传的文件类型为" + lastname + ",图片必须为 JPG 类型"); return false; } //验证上传文件宽高比例 if (img.height / img.width > 1.5 || img.height / img.width < 1.25) { alert("您上传的图片比例超出范围,宽高比应介于1.25-1.5"); return; } //验证上传文件是否超出了大小 if (img.fileSize / 1024 > 150) { alert("您上传的文件大小超出了150K限制!"); return false; } $("#stuPic").attr("src", getFullPath(this)); }
2011-03-22 12:40:12

我做过这方面的应用,其实服务端,比如PHP不需要保存文件,只要把接受的流返回给js,js就可以输出图片。
不知道js能不能直接从图片中读流,反正我是用 php中转了一下

2011-03-22 14:04:41

在没点上传按钮前获取本地文件地址进行图片预览,之前在IE上有实现过。但现有浏览器对本地资源访问的控制很严,因此不推荐这种方式。如果非要让用户有这种本地预览的用户体验,可以考虑使用ajax或隐藏iframe将图片传到服务器后再展示在前台。

2011-03-22 15:18:24
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制