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

<#-- 更换小图 /下载图片弹窗 -->

<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">×</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 -->

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