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>