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>保存失敗，請檢查網(wǎng)絡(luò)", 3);});});//保存自定義視頻封面圖片$("#save-image").on("click", function() {if ($('#file').val() == "") {Notify.danger("<i class='glyphicon glyphicon-warning-sign'></i> 請選擇圖片后再點(diǎn)擊上傳", 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>保存失敗，請檢查網(wǎng)絡(luò)", 3);});}); });</script>

總結(jié)

以上是生活随笔為你收集整理的Jquery 上传文件（不通过form表单提交）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。