首页 > 代码库 > 原生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个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。