首页 > 代码库 > 原生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的文件异步提交功能、图片预览功能.实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。