Jquery 上传文件（不通过form表单提交）

html代码： （这个是弹窗的页面）

<#-- 更换小图 /下载图片弹窗 --><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="gridSystemModalLabel"> <@spring.message "secure.video.right.selectImage"/></h4></div><form id="video-image-form" method="post" action="" id="playersetting" class="pageForm required-validate" ><div class="modal-body"><#--更换小图--><ul class="list-imgs clearfix" id="changing-imgs" vid="${vid!''}"><#if images?has_content><#list images as item><li><img src="${item!''}" width="128" height="96" class="changeImage" /></li></#list></#if></ul><div class="upload-img"><label>上传图片</label><input type="file" id="file" name="file" /><input type="hidden" id="videoId" name="vid" value="${vid!''}" /></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary" id="save-image">保存</button></div></form></div><!-- /.modal-content --></div><!-- /.modal-dialog -->

js处理提交代码：

<script>$(function(){$(".changeImage").on("click",function(){var vid = $("#changing-imgs").attr("vid");var imgUrl = $(this).attr("src");//小图console.log(vid);console.log(imgUrl);$.ajax({url: '/secure/video/editpool_fimage?vid='+vid+'&first_image='+imgUrl,type: 'GET',cache: false,data: null,processData: false,contentType: false}).done(function(json) {if(json.status == "success") {Notify.success("<i class='glyphicon glyphicon-saved'></i>" + json.data, 3);$("#modal").modal('hide');setTimeout(function () {window.location.reload();}, 3000);} else if(json.status == "fail") {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 3);} else {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 6);}}, 'json').fail(function() {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i>保存失败，请检查网络", 3);});});//保存自定义视频封面图片$("#save-image").on("click", function() {if ($('#file').val() == "") {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> 请选择图片后再点击上传", 3);return;}var formData = new FormData();formData.append('file', $('#file')[0].files[0]);formData.append('vid', $("#videoId").val());$.ajax({url : '/secure/video/upFristImage',type : 'POST',cache : false,data : formData,processData : false,contentType : false}).done(function(json) {if (json.status == "success") {Notify.success("<i class='glyphicon glyphicon-saved'></i>上传成功", 3);$("#modal").modal('hide');setTimeout(function () {window.location.reload();}, 3000);} else if (json.status == "fail") {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 3);} else {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> " + json.message, 6);}}, 'json').fail(function() {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i>保存失败，请检查网络", 3);});}); });</script>