js图片上传预览

js 图片上传

<!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>
1、用JQuery方式需要加两个参数 contentType: false 和processData: false，这两个参数是为了设置ajax对file文件对象进行序列化
2、两种方式在组织参数时都需要使用var formData = new FormData()
js图片上传预览

js 图片上传

镰月

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具
