js图片上传预览

7次阅读

共计 3384 个字符，预计需要花费 9 分钟才能阅读完成。

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
</head>
<body style="overflow: scroll; overflow-y: hidden; overflow-x: hidden">
<div style="height: 20px"></div>
<div class="container">
    <div class="row">

        <div class="col-md-6 col-md-offset-3">
            <form class="form-horizontal" enctype="multipart/form-data" role="form" id="testform">

                <input type="hidden" value="1" id="id" name="id" />
                <div class="control-group">
                    <label for="uname" class="col-md-3 control-label span3"> 姓 名:</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control span3" value=""id="uname"name="uname"placeholder=" 请输入姓名 ">
                    </div>
                </div>

                <div class="control-group">
                    <label for="pwd" class="col-md-3 control-label span3"> 密码:</label>
                    <div class="col-md-9">
                        <input type="password" class="form-control span3" value=""id="pwd"name="pwd"placeholder=" 请输入密码 ">
                    </div>
                </div>

                <div class="control-group">
                    <label class="col-md-3 control-label span3"></label>
                    <div class="col-md-9">
                        <img src=""width="100px"height="100px">
                    </div>
                </div>

                <div class="control-group">

                    <label for="requirement" class="col-md-3 control-label span3"> 图片上传 </label>
                    <div class="col-md-9">
                        <div class="input-group">
                            <input id="photoCover" class="form-control" readonly type="text">
                            <label class="input-group-btn">
                                <input id="file" type="file" name="file" style="left: -9999px; position: absolute;">
                                <span class="btn btn-default">Browse</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="col-md-2 control-label span2"></label>
                    <div class="col-md-10">
                        <a class="btn btn-small btn-primary" onclick="saveUser()"> 方式一 </a>
                        <a class="btn btn-small btn-danger" onclick="saveUser2()"> 方式二 </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    //html5 实现图片预览功能
    $(function () {$("#file").change(function (e) {var file = e.target.files[0] || e.dataTransfer.files[0];
            $('#photoCover').val(document.getElementById("file").files[0].name);
            if (file) {var reader = new FileReader();
                reader.onload = function () {$("img").attr("src", this.result);
                }

                reader.readAsDataURL(file);
            }
        });
    })
    // 方式一 Jquery 实现
    function saveUser2() {var id = $("#id").val().trim();
        var uname = $("#uname").val().trim();
        var pwd = $("#pwd").val().trim();
        var file = document.getElementById("file").files[0];
        var formData = new FormData();
        formData.append('id', id);
        formData.append('uname', uname);
        formData.append('pwd', pwd);
        formData.append('file', file);

        $.ajax({
            url: "/home/about",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            success: function (data) {console.log(data);
            },
            error: function (data) {console.log(data);
            }
        });
    }

    // 方式二  原生 ajax 实现
    function saveUser() {var id = $("#id").val().trim();
        var uname = $("#uname").val().trim();
        var pwd = $("#pwd").val().trim();
        var file = document.getElementById("file").files[0];

        // 原生 ajax 实现文件上传
        var formData = new FormData();
        formData.append("uname", uname); // 可以增加表单数据
        formData.append("id", id);
        formData.append("pwd", pwd);
        if (file) {formData.append("file", file);
        }

        // 得到 xhr 对象
        var xhr = null;
        if (XMLHttpRequest) {xhr = new XMLHttpRequest();
        } else {xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("post", "/home/about", true);// 设置提交方式，url，异步提交
        xhr.onload = function () {
            var data = xhr.responseText;    // 得到返回值
            alert(data);
        }
        xhr.send(formData);
    }
</script>
</body>
</html>