美文网首页
javascript简单代码实现图片上传预览

javascript简单代码实现图片上传预览

作者: Author_z | 来源:发表于2017-05-16 19:55 被阅读0次

废话不多说,直接贴代码

function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url
}

作为笔记用,先贴上后面再解释

用法

html:
<label class="btn btn-default"><span>选择文件</span> <input type="file" class="uploadimg" name="img" /></label>
<div class="imgBox"><img src="" class="imgPrvew"></div>

$('.uploadimg').on('change', function() {
    var imgUrl = getObjectURL(this.files[0]);
    $(".imgPrvew").attr('src', imgUrl)
});

function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url
}

先这样....

相关文章

网友评论

      本文标题:javascript简单代码实现图片上传预览

      本文链接:https://www.haomeiwen.com/subject/flxrxxtx.html