图片上传预览、控制大小和格式

方式一：

<script>
    $("#imgInput").change(function (e) {
        //判断图片格式
        var file = e.currentTarget.files;
        var size = file[0].size / 1024;
        if (500 < size) {
            layer.msg("请选择500KB以下的文件");
            return;
        }
        var type = file[0].type;
        if (!/.(gif|jpg|jpeg|png)$/.test(type)) {
            layer.msg("请上传下列格式的图片：jpg、jpeg、gif、png");
            return;
        }
        $(".img").attr("src", URL.createObjectURL($(this)[0].files[0]));
    });
</script>

<input type="file" id="imgInput" />
<!--用来显示图片的div，自定义样式-->
<div>
    <img src="" class="img" />
</div>

方式二：

<script>
    $(function () {
        $('[type=file]').change(function (e) {
            var file = e.target.files[0];
            preview1(file);
        })
    });

    function preview1(file) {
        var img = new Image(), url = img.src = URL.createObjectURL(file);
        var $img = $(img);
        img.onload = function () {
            URL.revokeObjectURL(url);
            $('#preview').empty().append($img);
        }
    }
</script>

<input type="file" id="imgInput" />
<div id="preview" style="margin: 10px 0 10px;"></div>