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>

Jquery 上传文件（不通过form表单提交）相关推荐

struts上传文件，验证失败表单数据丢失的原因
struts上传文件,验证失败表单数据丢失的原因发现一个问题,使用struts进行文件上传,如果有些参数没有完全定义在ActionForm中,需要从request.getParameter获取,在表 ...
robot—如何调用上传文件的接口，表单传值
1.通过evaluate创建一个元组对象,元组里的元素: A. 第一个元素是文件名 B. 第二个元素是一个文件对象, 通过open打开一个文件,函数里面第一个参数值是文件的路径,这里传的绝对路径, ...
ajax form表单提交 input file中的文件
现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input f ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
传统form表单提交方式的文件上传与文件存储
引言时隔一天,上一篇文章<文件存储>刚一停笔,今天上午就解决了困扰我已久的文件上传问题. 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单 ...
form表单提交数据的同时上传文件代码示例
form表单提交数据的同时在表单中上传文件代码示例一.定义页面注意:在form表单中加入属性 enctype="multipart/form-data" 表示此表单支持文件上 ...
ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
基于jQuery上传文件插件
由于最近项目的需求,需要做一个上传文件的插件,支持上传,下载,删除等功能,该插件主要运用了jQuery与jqgrid以及easyui,先贴出主要代码 /*** 上传附件插件--uploadFile* ...
将form表单提交文件修改为ajax提交
好久没有记录工作中的出现的问题了,不过最近客户提出了新的需求,正好弥补了一下我的短板,学到了新的知识. 周一接到客户电话,要求完善上周写的某个功能--就是同时上传多个图片,并通过接口程序传到第三方系统 ...
解决Form表单提交文件后台获取为null的情况
项目想做一个上传文件的功能模块,但是发现后台获取文件始终为null,而且在form表单上也配置好了需要的action属性.method属性和enctype="multipart/form-d ...

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

Jquery 上传文件（不通过form表单提交）相关推荐

最新文章

热门文章