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

實現效果：