ajax提交带文件同步上传

我们经常为文件上传而烦恼,最烦的莫过于,要判断我们上传的文件的大小,格式等等一系列的判断验证。这种情况我们只能通过ajax提交来验证,ajax异步提交太麻烦,自己要变异太多的代码了,其实我们在使用JQuery插件的时候,它就已经帮我们想到了,它里面ajaxSubmit就很好用,表示层代码参考如下,逻辑层代码可根据个人需求自己来写:

function FileChange(Value){

if(checkFormat(Value)){

document.getElementById("uploadimage").width=10;

document.getElementById("uploadimage").height=10;

document.getElementById("uploadimage").alt="";

document.getElementById("uploadimage").src=Value;

return true;

}else{

return false;

}

}

$("#form1").attr("action", "action.do?");

var ifIntroPic=$(‘input[name="adVertising.ifIntroPic"]:checked‘).val();

if(ifIntroPic!=1){

var picture =$("#picture").val();

if(picture==null||picture==‘‘){

if(adId==null||adId==‘‘){

alert("请选择要上传的图片");

return false;

}

}else{

if(FileChange(picture)){

$(‘#form1‘).ajaxSubmit(function(data){

if(data!=null&&data!=‘‘){

if(navigator.userAgent.toLowerCase().indexOf("opera")!=-1){

}

}

});

}else{

return false;

}

}

}else{

formSubmit();

}

}

$(‘#form1‘).ajaxSubmit(function(data){}代码提交到逻辑层

if(navigator.userAgent.toLowerCase().indexOf("opera")!=-1){判断浏览器用的

重点在于我们在用ajax提交的时候,也可以使用ajaxSubmit方法进行同步提交,也可以ajax异步提交

自我感觉文章写得不好,就做个记录,但能帮到大家,是在看不懂的可以直接百度ajax的ajaxSubmit或看ajax的API都可以的。

ajax提交带文件同步上传

时间: 2024-10-11 06:28:22

ajax提交带文件同步上传的相关文章

SpringMVC + AJAX 实现多文件异步上传

转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇文章中所用到的项目,需要的朋友可以点击前面的链接查看.在这里只贴出关键代码. 首先我们要准备一个 JS 文件,即:ajaxfileupload.js,它需要用到 jQuery,所以我们还需要准备 jQuery 的库,两个文件在文末尾都有链接提供下载. JSP 关键代码: <li> <div&

Ajax实现大文件切割上传

Ajax大文件切割上传 2015-02-07 前面我们已经实现了Ajax的文件上传,不过会受限于服务器的允许的大小, 如果服务器并非自己的,我们就要使用Ajax大文件切割来实现上传. 首先解决Ajax跨域上传问题: 在HTML5中,ajax的跨域有了新的规则-----能否跨域取决于对应的应答. 对方服务器如果愿意接受远程过来的ajax,或某几个域名过来的ajax请求,可以在头信息header中,加入Access-Control-Allow-Origin * 在PHP中加入此信息,就可以实现跨域请

ajax提交formData iframe springmvc 上传文件 页面是通过iframe嵌入的html

1.引入讲个jar包 springmvc设置 commons-fileupload-1.3.3.jar commons-io-2.5.jar <!-- 定义文件解释器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设置默认编码 --> <prop

PHP+Ajax异步带进度条上传文件

前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="

AJAX提交表单,上传出错的国际化信息无法显示在jsp页面上

为上传体添加进度条,将form表单submit按钮提交,改为了使用ajax对表单的数据进行提交. 问题是:使用ajax对表单进行提交,之前可行的国际化上传错误信息显示不了了. 打开chrome的开发者工具结果发现,ajax访问的uploadFile.action,结果返回的一个当前jsp页面的信息 奇怪的是返回的jsp页面信息是有国际化错误信息的,但是当前的jsp页面却没有: 分析:我想是因为当前页面使用的是ajax对表单进行提交的,在xml中配置中,上传如果出错的话,则会再返回当前页面,由ac

PHP+ajaxForm异步带进度条上传文件实例

在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= {                     url:url, //form提交数据的地址   type:type,   //form提交的方式(method:post/get)   target:target, //服务器返回的响应数据显示的元素(Id)号           

异步无刷新上传文件并且上传文件可以带上参数

关于异步上传文件并且带上参数,网上有很多关于这样的插件,而我最喜欢用的插件是ajaxfileupload.js,该插件的代码如下: /*   131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10    依赖:jquery-1.6.1.min.js   主方法:ajaxFileUpload 接受 json 对象参数   参数说明:   fileElementId:必选,上传文件域ID   url:必选,发送请求的URL字符串   fi

文件的上传(表单上传和ajax文件异步上传)

一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-data"> 选择文件:<input type="file" name="file1" /><br /> <input type="submit" value="上传&q

struts2 文件的上传下载 表单的重复提交 自定义拦截器

文件上传中表单的准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置为 post 需添加 <input type=“file”> 字段. Struts 对文件上传的支持 在 Struts 应用程序里, FileUpload 拦截器和 Jakarta Commons FileUpload 组件可以完成文件的上传. 步骤:1. 在 Jsp 页面的文件上传表单里使用