jQuery图片的预览

前言：经测试，在firefox、chrome、IE急速模式下可用。

1、html结构

<label class="col-sm-2 control-label">背景图片</label>
    <div class="col-sm-9">
        <input id="FBackpic" type="file" name="FBackpic" style="display:none">
        <input id="lefile" type="text" class="form-control">//显示图片路径
        <button class="btn btn-success fileinput-button"
              οnclick="$('input[id=FBackpic]').click();" type="button">请选择</button>
     </div>

</div>  

<img id="backpic"></img>

2、jQuery

      $("#FBackpic").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;//图片路径
            var $img = $("#backpic");
            $("#backpic").width("280");
            $("#backpic").height("280");
            $("#backpicid").val("0");
            $("#img1").hide();
            
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
                $("#picUrl").val(dataURL);//把地址展示在input框，无其他用
            } else {//IE兼容模式
                dataURL = $file.val();
                var imgObj = document.getElementById("backpic");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                $("#picUrl").val(dataURL);//把地址展示在input框，无其他用
            }
        });