原生js實現ajax的文件異步提交功能、圖片預覽功能.實例

時間  2019-11-12
標籤 原生 實現 ajax 文件 異步 提交 功能 圖片 預覽 實例 欄目 JavaScript 简体版
原文   原文鏈接

採用html5使得選擇圖片改變時，預覽框中圖片隨之改變。input文件選擇框美化。原生js完成文件異步提交css

效果圖：html

 

代碼以下，可直接複製並保存爲html文件打開查看效果html5

<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 
    <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);
                }
            });
        })
 
        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 form = new FormData();
            form.append("uname", uname); // 能夠增長表單數據
            form.append("id", id);
            form.append("pwd", pwd);
            if(file){
                form.append("file", file);
            }
 
 
            var xhr = null; //獲得xhr對象
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
 
            xhr.open("post", "${ctx}/user/save", true);//設置提交方式，url，異步提交
            xhr.onload = function ()
            {
                var data = xhr.responseText;    //獲得返回值
               // alert(data);
                var errorMsg = JSON.parse(data);
                alert(errorMsg.msg);
                if(errorMsg.code == "0"){
                    alert("success"); //成功
                }
 
            }
            xhr.send(form);
 
        }
    </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">
 
                <input type="hidden" value="${user.id}" id="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"
                               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"
                               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" 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">
                        <button type="button" class="btn btn-small btn-primary" onclick="saveUser()">提交</button>
                        <a type="button" class="btn btn-small btn-danger">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程