js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载

标签: js 上传 图片 | 发表时间:2014-01-30 02:31 | 作者:jiuqiyuliang
出处:http://blog.csdn.net

        最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多。在上传图片之前验证图片的格式,并同时实现预览。这篇博客我们就用一段简单的js代码来实现验证图片格式,并同时预览的功能。

html页面

<div>
    选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" />
</div>
    预  览:
<div id="localImag">
    <%--预览,默认图片--%>
    <img id="preview" alt="预览图片" onclick="over(preview,divImage,imgbig);" src="img/5691.jpg" style="width: 400px; height: 400px;"/> 
</div>

js代码

<script>
    //检查图片的格式是否正确,同时实现预览
    function setImagePreview(obj, localImagId, imgObjPreview) {
        var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型
        if (obj.value == '') {
            $.messager.alert("让选择要上传的图片!");
            return false;
        }
        else {
            var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用 
            ////布尔型变量
            var isExists = false;
            //循环判断图片的格式是否正确
            for (var i in array) {
                if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                    //图片格式正确之后,根据浏览器的不同设置图片的大小
                    if (obj.files && obj.files[0]) {
                        //火狐下,直接设img属性 
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '400px';
                        imgObjPreview.style.height = '400px';
                        //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 
                        imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);
                    }
                    else {
                        //IE下,使用滤镜 
                        obj.select();
                        var imgSrc = document.selection.createRange().text;
                        //必须设置初始大小 
                        localImagId.style.width = "400px";
                        localImagId.style.height = "400px";
                        //图片异常的捕捉,防止用户修改后缀来伪造图片 
                        try {
                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader=").src = imgSrc;
                        }
                        catch (e) {
                            $.messager.alert("您上传的图片格式不正确,请重新选择!");
                            return false;
                        }
                        imgObjPreview.style.display = 'none';
                        document.selection.empty();
                    }
                    isExists = true;
                    return true;
                }
            }
            if (isExists == false) {
                $.messager.alert("上传图片类型不正确!");
                return false;
            }
            return false;
        }
    }
</script>

界面效果

                                               

       源码下载

        http://download.csdn.net/detail/jiuqiyuliang/6889125


       js实现图片上传的功能很简单,尽管还不是很完美,相信不断的完善一定可以做的更好,希望大家提宝贵的建议。

作者:jiuqiyuliang 发表于2014-1-29 18:31:06 原文链接
阅读:96 评论:0 查看评论

相关 [js 上传 图片] 推荐:

纯js实现浏览器图片选择预览、旋转、批量上传

- - ITeye博客
工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本. 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点:. IE input type=file的图片预览要用IE的filter css.    chrome/firefox则用File api的file reader.

js验证图片大小

- - JavaScript - Web前端 - ITeye博客
var ie=!-[1,];   //区分ie. var img=new Image();//动态创建img. if(img.readyState=='complete'){//当图片load完毕. alert(img.fileSize);//ie获取文件大小. document.body.removeChlid(img);//获取大小结束,移除图片.

js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载

- - CSDN博客Web前端推荐文章
        最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多. 在上传图片之前验证图片的格式,并同时实现预览. 这篇博客我们就用一段简单的js代码来实现验证图片格式,并同时预览的功能. 选择图片:
.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

html5 图片上传预览

- - 博客园_首页
  前段时间做html5项目的时候,做了一个图片上传功能,并且可以直接预览,单纯的js就可以实现,很方便的.   这样做比调用后台方便多了,但是只支持html5的,html5以前是不支持的. 未来html5是主流,所以这种方法非常方便的.   几段js代码就可以来实现,而且解析速度也很快. 这种方法值得推广,以后前端也不要为这个烦恼了,还要后台用程序加载出来,那样太浪费时间了.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

一句话解决JS获得图片尺寸问题,兼容各个浏览器

- - CSDN博客推荐文章
之前用到图片等比缩小或者懒加载或者预加载之类的都要首先获得图片的高度和宽度,到网上看别人 用 Image 对象 使用 image.width,image.height 或者使用一个div包裹图片,不设置图片的高和宽,然后获得div的宽和高就是图片的高和宽,但是经过本人实验 首先使用image对象的方法获得尺寸,很不靠谱,特在IE7上面 ,很坑爹,存在很多兼容性问题.

上传图片之上传前预览图片

- - CSDN博客推荐文章
上传图片对图片进行一下预览,可以了解图片上传后大概会是什么样子,此功能用js实现,然后在fileupload控件的change事件中调用,这样当用fileupload选择完图片以后,图片就会自动显示出来了. fileupload控件及用来预览图片的image:. 功能很简单,代码也很易懂,相信不用我多废话大家也能看懂吧.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.