首页 > 编程语言 > 详细

Java web项目实现上传图片及时预览

时间:2016-01-22 10:44:36      阅读:599      评论:0      收藏:0      [点我收藏+]

实现代码:

//图片自动预览
    $(function() {
     $("#picture").change(
        function() {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#viewuserpicture");
            //当图片名称为空时,照片不显示。
            if(document.getElementById(‘picture‘).value.trim()==""){
                document.getElementById(‘tr_userpicture‘).style.display = ‘none‘;
             }
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                //允许上传的图片格式  
                var newPreview = document.getElementById("picture").value;
                var regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi;
                if (!regext.test(newPreview)) {
                    newPreview=="";
                    alert("选择的照片格式不正确,请重新选择!");
                     $(fileObj).after($(fileObj).clone($(fileObj)));
                      $(fileObj).remove();
                      $("#tr_userpicture").hide();
                    return false;
                }
                $img.attr("src", dataURL);
                $("#tr_userpicture").show();

            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("viewuserpicture");

                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters
                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
    });

实现效果:

技术分享

Java web项目实现上传图片及时预览

原文:http://www.cnblogs.com/mgstone/p/5150334.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!