Javascript Ajax实现文件异步提交功能、图片预览功能源码实例

来源：互联网发布：图案编辑软件编辑：程序博客网时间：2024/06/08 05:50
原地址： http://www.what21.com/article/a_3_1481862003522.html
<%--  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 = xhr.responseText;//得到返回值               // alert(data);                var errorMsg = JSON.parse(data);                alert(errorMsg.msg);                if(errorMsg.code == "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="${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="${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="${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="${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>
0 0