行走的Coder

俱怀逸兴壮思飞,欲上青天览明月。

导航

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

实现代码:

//图片自动预览
    $(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;
            }
        });
    });

实现效果:

posted on 2016-01-22 09:56  行走的coder  阅读(10991)  评论(0编辑  收藏  举报