上传图片/文件

直接在View内进行操作不需要拖控件：

HTML：

<body>
    <!-- 要将父布局的position设置为relative，父布局将无法包裹input -->
    <div style="position: relative;">
        <!--设置input的position为absolute，使其不按文档流排版，并设置其包裹整个布局 -->
        <!-- 设置opactity为0，使input变透明 -->
        <!-- 只接受jpg，gif和png格式 -->
        <input id="file0" onchange="tt(this)" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/gif, image/jpg, image/png" />
        <!-- 自定义按钮效果 -->
        <div style="text-align:left">
            <span style="font-size: 12px;">上传图片：</span>
            <img id="img0" src="" style="width: 40px; height: 40px; vertical-align: middle;" />
        </div>
    </div>
</body>

JS：

<script>
    $("#file0").change(function () {
        var objUrl = getObjectURL(this.files[0]);
        console.log("objUrl = " + objUrl);
        if (objUrl) {
            $("#img0").attr("src", objUrl);
            $("#img0").removeClass("hide");
        }
    });
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        }
        else if (window.URL != undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        }
        else if (window.webkitURL != undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>

 

posted @ 2020-05-09 19:48  _瓶子  阅读(92)  评论(0)    收藏  举报