- <!-- , 用 input 的 form 提交, 会让该页面刷新, 而且样式丑陋. 普通的 Ajax 提交, 可以实现无页面刷新. 但是,
- 后台是无法接收到数据的, 用的 jQuery.form.JS-->
- <!-- form 必须加这个属性, 否则传输不过去. enctype="multipart/form-data"-->
html 代码
- <div class="left-head">
- <img src="" alt="" id="logo" />
- <div class="pos">
- <form id="uploadlogo" action="" method="post" enctype="multipart/form-data">
- <h4 class="h4">
- 修改头像
- </h4>
- <input type="file" name="image" />
- </form>
- </div>
- </div>
- //JS 代码
- <script src="jQuery.form.JS">
- </script>
- <script>
- $(document).ready(function(e) {
- $('input[name=image]').change(function(e) {
- //start upload
- $("#uploadlogo").ajaxSubmit({
- url: "/student/main/uploadImage",
- type: "post",
- success: function(data) {
- $('input[name=image]').val("");
- var JSON = eval("(" + data + ")");
- if (JSON.error == "") {
- $("#logo").attr("src", JSON.logo);
- }
- console.log(1);
- },
- error: function(XMLHttpRequest) {
- alert(2)
- }
- });
- });
- });
- </script>
来源: http://www.qdfuns.com/article/31061/3fbad7dbc1cc3f1c05e879e20c7446e7.html