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>