jQuery图片预览

HTML代码

<div class="form-group">
    <label class="col-sm-2 control-label">图片</label>
    <div class="col-sm-4">
        <div id="file">
            <span>上传图片</span><input type="file" name="image"         
            onchange="showImg(this)">
        </div>
    </div>
        <div class="col-sm-2">
        <div class="box"></div>    
    </div>
</div>

在下面插入jQuery代码

var id = "1";
        function showImg(obj){
            var patter = /(\.*.jpg$)|(\.*.png$)|(\.*.jpg$)|(\.*.gif$)|(\.*.bmp$)/;
            if(!patter.test($(obj).val())){
                alert('系统不支持图片的格式');
            }else {
                var file = obj.files[0];
                var l = window.URL.createObjectURL(obj.files[0])
                $('.box').eq(0).append("<section id='"+id+"'></section>");
                $('#'+id).html("<img src='"+l+"'>");
            }
        }