两种js实现方式，一种用原生的ajax；另一种用JQuery，例子比较简单，直接上代码。
<!DOCTYPE html><html><head> ???<title>Title</title> ???<link href="~/Content/Css/bootstrap.3.3.4.min.css" rel="stylesheet" /> ???<script src="~/Scripts/Jquery-2.1.4.min.js"></script> ???<script src="~/Scripts/bootstrap.3.3.4.min.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 form = new FormData(); ???????????form.append("uname", uname); // 可以增加表单数据 ???????????form.append("id", id); ???????????form.append("pwd", pwd); ???????????if (file) { ???????????????form.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(form); ???????} ???</script></body></html>注意：
1、用JQuery方式需要加两个参数 contentType: false 和processData: false，设置ajax不需要序列化file文件对象
2、两种方式在组织参数时都需要适用var form = new FormData()
js 实现异步上传图片+预览
原文地址：http://www.cnblogs.com/len0031/p/7678499.html