WEB图片预览功能

<div class="sq-box">
        <div class="sq-msx w100" style="border:none">
            <div class="sq-ms">案件图片</div>
            <label for="pic1" class="picture" style="margin-left:0">
                <p>上传</p>
                <input id="pic1" name="pic[]" type="file" />
                <img src="__PUBLIC__/home/images/picup.png" />
            </label>
            <label for="pic2" class="picture">
                <p>上传</p>
                <input id="pic2" name="pic[]" type="file" />
                <img src="__PUBLIC__/home/images/picup.png" />
            </label>
            <label for="pic3" class="picture">
                <p>上传</p>
                <input id="pic3" name="pic[]" type="file" />
                <img src="__PUBLIC__/home/images/picup.png" />
            </label>
            <label for="pic4" class="picture" style="margin-left:0">
                <p>上传</p>
                <input id="pic4" name="pic[]" type="file" />
                <img src="__PUBLIC__/home/images/picup.png" />
            </label>
            <label for="pic5" class="picture">
                <p>上传</p>
                <input id="pic5" name="pic[]" type="file" />
                <img src="__PUBLIC__/home/images/picup.png" />
            </label>
            <label for="pic6" class="picture">
                <p>上传</p>
                <input id="pic6" name="pic[]" type="file" />
                <img src="__PUBLIC__/home/images/picup.png" />
            </label>
        </div>
    </div>
    <script type="text/javascript">
        $('.picture').each(function(x){
            $(this).find('input').change(function(e){
                var file = e.target.files[0];
                if (!/image\/\w+/.test(file.type)) {
                    alert("必须上传图片");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                var that = $(this).parent('label').find('img');
                reader.onload = function(s) {
                    var imgSrc = this.result;
                    console.log(that);
                    that.attr("src", imgSrc);
                };
            })
        })
    </script>
    <style>
        .sq-ms{width: 100%; float: left;}
        .picture{width: 32%; height: 100px; border:solid 1px #dedede; float: left; margin-top: 2%; position: relative; margin-left: 1%}
        .picture img{width: 100%; height: 100%; position: absolute; left: 0; top: 0}
        .picture p{width: 100%; text-align: center; float: left; line-height: 100px;}
        .picture input{display: none;}
    </style>