首页 > 代码库 > 原生js实现ajax的文件异步提交功能、图片预览功能.实例

原生js实现ajax的文件异步提交功能、图片预览功能.实例

<%--
  Created by IntelliJ IDEA.
  User: yh
  Date: 2016/12/14
  Time: 17:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<html>
<head>
    <%@ include file="/WEB-INF/include/head.jsp" %>
    <title>Title</title>
    <style>
        #uname {
            height: auto;
        }
        #pwd {
            height: auto;
        }
    </style>

    <script>

//        html5实现图片预览功能
        $(function(){
            $("#file").change(function(e){
                var file = e.target.files[0]||e.dataTransfer.files[0];
                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 = http://www.mamicode.com/xhr.responseText;	//得到返回值"0"){
                    top.Dialog.close(); //成功,关闭弹窗
                }

            }
            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="http://www.mamicode.com/${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="http://www.mamicode.com/${user.uname}" 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="http://www.mamicode.com/${user.pwd}" 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="http://www.mamicode.com/${ctxStatic}/uploadImage/${user.img}" width="80px" height="20px">
                    </div>
                </div>

                <div class="control-group">
                    <label for="file" class="col-md-3 control-label span3">图片上传:</label>
                    <div class="col-md-9">
                        <input type="file" class="form-control span3" id="file">
                        <!--<input type="text" id="imgPath">-->
                    </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" onclick="javascript:top.Dialog.close();">取消</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

  

原生js实现ajax的文件异步提交功能、图片预览功能.实例