图片上传预览

 

<style type="text/css">

        #preview_wrapper
        {
            display: inline-block;
            width: 350px;
            height: 200px;
        }
        #preview_fake
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
        #preview_size_fake
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            visibility: hidden;
        }
        #preview
        {
            width: 350px;
            height: 200px;

        }

</style>

  <script type="text/javascript">


        $(function () {


            $("#delet").click(function () {
                var url = '<%: Url.Action("DeletePic", "MstBaseInfo") %>' + "?id=1";
                $.post(url);
                var cloneFile = $("#upload_img").clone();
                $("#upload_img").replaceWith(cloneFile);
                $("#upload_img").change();
            });


            $("#delet1").click(function () {
                var url = '<%: Url.Action("DeletePic", "MstBaseInfo") %>' + "?id=2";
                $.post(url);
                var cloneFile = $("#upload_img1").clone();
                $("#upload_img1").replaceWith(cloneFile);
                $("#upload_img1").change();
            });


            $("#delet2").click(function () {
                var url = '<%: Url.Action("DeletePic", "MstBaseInfo") %>' + "?id=3";
                $.post(url);
                var cloneFile = $("#upload_img2").clone();
                $("#upload_img2").replaceWith(cloneFile);
                $("#upload_img2").change();
            });


            if (typeof FileReader == 'underfind') {
            }
            else {
                $("#upload_img").live("change", function () {
                    if ($(this).val() != "") {
                        var file = document.getElementById("upload_img");
                        var objPreview = document.getElementById('preview');
                        var objPreviewFake = document.getElementById('preview_fake');
                        var objPreviewSizeFake = document.getElementById('preview_size_fake');
                        readAdDataURL(objPreview, objPreviewFake, objPreviewSizeFake, file);
                    }
                    else {
                        clearImg();
                    }
                });
                $("#upload_img1").live("change", function () {
                    if ($(this).val() != "") {
                        var file = document.getElementById("upload_img1");
                        var objPreview = document.getElementById('preview1');
                        var objPreviewFake = document.getElementById('preview_fake1');
                        var objPreviewSizeFake = document.getElementById('preview_size_fake1');
                        readAdDataURL(objPreview, objPreviewFake, objPreviewSizeFake, file);
                    }
                    else {
                        clearImg1();
                    }
                });


                $("#upload_img2").live("change", function () {
                    if ($(this).val() != "") {
                        var file = document.getElementById("upload_img2");
                        var objPreview = document.getElementById('preview2');
                        var objPreviewFake = document.getElementById('preview_fake2');
                        var objPreviewSizeFake = document.getElementById('preview_size_fake2');
                        readAdDataURL(objPreview, objPreviewFake, objPreviewSizeFake, file);
                    }
                    else {
                        clearImg2();
                    }
                });
            }
        })


        function readAdDataURL(obj1,obj2,obj3,file) {
            if ($.browser.msie) {
                onUploadImgChange(obj1, obj2, obj3, file);
            }
            else {
              var   file = file.files[0];
                if (!/image\/\w+/.test(file.type)) {
                    alert("error");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    obj1.src = this.result;
                }
            }
        }


        function clearImg() {
            $("#preview").remove();
            $("#preview_fake").remove();
            $("#preview_wrapper").append("<div id='preview_fake'><img id='preview' src='' /></div>");
        }


        function clearImg1() {
            $("#preview1").remove();
            $("#preview_fake1").remove();
            $("#preview_wrapper1").append("<div id='preview_fake1'><img id='preview1' src='' /></div>");
        }


        function clearImg2() {
            $("#preview2").remove();
            $("#preview_fake2").remove();
            $("#preview_wrapper2").append("<div id='preview_fake2'><img id='preview2' src='' /></div>");
        }


        function onUploadImgChange(obj1, obj2, obj3, sender) {
            if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
                alert('error！');
                return false;
            }
            if (sender.files && sender.files[0]) {
                obj1.style.display = 'block';
                obj2.style.width = 'auto';
                obj3.style.height = 'auto';
                obj1.src = sender.files[0].getAsDataURL();
            } else if (obj2.filters) {
                sender.select();
                var imgSrc = document.selection.createRange().text;
                obj2.filters.item(
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
                obj3.filters.item(
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;


                autoSizePreview(obj2,
            obj3.offsetWidth, obj3.offsetHeight);
                obj1.style.display = 'none';
            }
        }   


        function onPreviewLoad(sender) {
            autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
        }


        function autoSizePreview(objPre, originalWidth, originalHeight) {
            var zoomParam = clacImgZoomParam(350, 200, originalWidth, originalHeight);
            objPre.style.width = zoomParam.width + 'px';
            objPre.style.height = zoomParam.height + 'px';
            objPre.style.marginTop = zoomParam.top + 'px';
            objPre.style.marginLeft = zoomParam.left + 'px';
        }


        function clacImgZoomParam(maxWidth, maxHeight, width, height) {
            var param = { width: width, height: height, top: 0, left: 0 };


            param.width = maxWidth;
            param.height = maxHeight;
            return param;
        }        
    </script>

     <div class="ContentRow">
            <div class="RowHeader">
                加工場写真
            </div>
            <div class="RowContent">
                <p>
                    画像
                    <input id="upload_img" type="file" value="参照" name="upload_img" style="height: 22px;" />
                    <input type="button" id="delet" class="button" name="btnName" value="刪除" style="width: 55px;
                        height: 23px; padding: 0; font-size: 13px;" /></p>               
                    <div id="preview_wrapper">
                        <div id="preview_fake">
                            <img id="preview" src='<%=Model.FactoryPictureFile %>' />
                        </div>
                    </div>
                    <img id="preview_size_fake" src='' /><span id="swh"></span>
                </p>
            </div>
        </div>