Html5上传后有所见图片效果前端代码实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上传一下看看</title>

</head>

<body>

<form action="__SELF__" method="post" onsubmit="return checkfilefun()">

    <input type="file" id="pic" name="pic[]" multiple="multiple">

    <input type="submit" value=" 提交查看信息 ">

</form>

<img src="" alt="" id="previewImage">

<script>

    function checkfilefun() {

        var files = document.querySelector('#pic').files;

        for (var i = 0, f; f = files[i]; i++) {

            if (!f.type.match('image.*')) {

                continue;

            }

            var reader = new FileReader();

            reader.onload = (function (theFile) {

                return function (e) {

                    document.getElementById('previewImage').src = e.target.result;

                };

            })(f);

            reader.readAsDataURL(f);

        }

        return false;

    }

</script>

</body>

</html>

巴特西

Html5上传后有所见图片效果前端代码实现

最新文章

热门文章