js 上传文件功能

文件上传插件使用方法请见 http://fex.baidu.com/webuploader/getting-started.html

html 文件上传控件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#file0").change(function () {
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl) {
                    $("#img0").attr("src", objUrl);
                }
            });
            //还没有上传到服务器之前要显示图处缩略图，获取url
            function getObjectURL(file) {
                var url = null ; 
                if(file){
                    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>
</head>
<body>
    <input type="file" name="file0" id="file0" multiple="multiple">
    <div><img src="" height="70" id="img0"></div>
</body>
</html>

要把以上的上传文件功能设计得漂亮点，参照此文：https://www.cnblogs.com/kongxianghai/p/5624785.html

猜你喜欢