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;
            }
        });
    });

实现效果:


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM