JavaScript---js实现从本地上传图片

最新推荐文章于 2024-07-18 20:54:54 发布

maidu_xbd

最新推荐文章于 2024-07-18 20:54:54 发布

阅读量5.5k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maidu_xbd/article/details/88899993

版权

JavaScript 专栏收录该内容

65 篇文章 3 订阅

订阅专栏

实现效果如图：

完整代码：

<!DOCTYPE html>
<html>

<head>
    <title>test page</title>
</head>

<body>
    <input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)" style="display:none; ">
    <div id="fileList" style="width:200px;height:200px; border:1px solid #ccc;"></div>
    <button onclick="submitImg()">上传图片</button>
</body>

<script>
    window.URL = window.URL || window.webkitURL;
    var fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");

    function handleFiles(obj) {
        var files = obj.files,
            img = new Image();
        if (window.URL) {
            //File API
            alert(files[0].name + "," + files[0].size + " bytes");
            img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
            img.width = 200;
            img.onload = function (e) {
                window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
            }
            fileList.appendChild(img);
        } else if (window.FileReader) {
            //opera不支持createObjectURL/revokeObjectURL方法。用FileReader对象来处理
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function (e) {
                alert(files[0].name + "," + e.total + " bytes");
                img.src = this.result;
                img.width = 200;
                fileList.appendChild(img);
            }
        } else {
            //ie
            obj.select();
            obj.blur();
            var nfile = document.selection.createRange().text;
            document.selection.empty();
            img.src = nfile;
            img.width = 200;
            img.onload = function () {
                alert(nfile + "," + img.fileSize + " bytes");
            }
            fileList.appendChild(img);
        }
    }
    function submitImg() {
        fileElem.click()
    }
</script>

</html>