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()