关于Jquery操作input file的问题

最新推荐文章于 2024-05-09 14:51:32 发布

转载最新推荐文章于 2024-05-09 14:51:32 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qjyking/p/5828990.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的方法，当点击特定的div元素时，触发input file选择器，允许用户选择并立即预览所选图片。通过获取文件的URL，可以将图片显示在指定的div容器中，此功能适用于网页开发中需要实时预览上传图片的场景。

////////////////////////////////////////////////////////////////////////////////////// js 实现点击div 触发input file 将图片显示在div中 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<script>

    function clp(){
        return  $('#file1').click();
    }
    function clp1(){
        return  $('#file2').click();
    }

    $("#file1").change(function(){
        var objUrl = getObjectURL(this.files[0]) ;
        if (objUrl) {
            $("#img1").attr("src", objUrl) ;
        }
    }) ;
    $("#file2").change(function () {
        var objUrl = getObjectURL(this.files[0]);

        if (objUrl) {
            $("#img2").attr("src", objUrl);
        }
    });
    //建立一個可存取到該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>