共计 3384 个字符，预计需要花费 9 分钟才能阅读完成。
js 图片上传
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.js"></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" id="testform">
<input type="hidden" value="1" id="id" name="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"name="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"name="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" name="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">
<a class="btn btn-small btn-primary" onclick="saveUser()"> 方式一 </a>
<a class="btn btn-small btn-danger" onclick="saveUser2()"> 方式二 </a>
</div>
</div>
</form>
</div>
</div>
</div>
<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);
}
});
})
// 方式一 Jquery 实现
function saveUser2() {var id = $("#id").val().trim();
var uname = $("#uname").val().trim();
var pwd = $("#pwd").val().trim();
var file = document.getElementById("file").files[0];
var formData = new FormData();
formData.append('id', id);
formData.append('uname', uname);
formData.append('pwd', pwd);
formData.append('file', file);
$.ajax({
url: "/home/about",
type: "post",
data: formData,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function (data) {console.log(data);
},
error: function (data) {console.log(data);
}
});
}
// 方式二 原生 ajax 实现
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 formData = new FormData();
formData.append("uname", uname); // 可以增加表单数据
formData.append("id", id);
formData.append("pwd", pwd);
if (file) {formData.append("file", file);
}
// 得到 xhr 对象
var xhr = null;
if (XMLHttpRequest) {xhr = new XMLHttpRequest();
} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", "/home/about", true);// 设置提交方式，url，异步提交
xhr.onload = function () {
var data = xhr.responseText; // 得到返回值
alert(data);
}
xhr.send(formData);
}
</script>
</body>
</html>1、用 JQuery 方式需要加两个参数 contentType: false 和 processData: false，这两个参数是为了设置 ajax 对 file 文件对象进行序列化
2、两种方式在组织参数时都需要使用 var formData = new FormData()
正文完
发表至： javascript
2019-06-12
