甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
本文为大家分享了两种jQuery异步提交表单的方式，具体内容如下
目前成都创新互联已为近1000家的企业提供了网站建设、域名、网络空间、网站托管、服务器租用、企业网站设计、巴马网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
第一种方式：普通ajax方式提交
$(function(){
$('#send').click(function(){
$.ajax({
type:
"GET",
url:
GLOBAL_PATH
+
"/Enterprise/savecompanyphoto",
data:
{username:$("#username").val(),
content:$("#content").val()},
dataType:
"json",
success:
function(data){
$('#resText').empty();
//清空resText里面的所有内容
var
html
=
'';
$.each(data,
function(commentIndex,
comment){
html
+=
'div
class="comment"h6'
+
comment['username']
+
':/h6p
class="para"'
+
comment['content']
+
'/p/div';
});
$('#resText').html(html);
}
});
});
});
第二种方式：普通ajaxSubmit方式提交表单
script
src="jquery.form.js"
type="text/javascript"/script
script
src="dialog.js?lib=false"
type="text/javascript"/scriptsrc="jquery.min.js"
type="text/javascript"
function
uploader_img(){
var
optionsSave={
type:
"POST",
url:
GLOBAL_PATH
+
"/Enterprise/savecompanyphoto",
data:$('#addImg').serialize(),
success:
function
(data)
{
if
(data.code
==
0)
{
AlertMini('alt1',
"上传图片成功!",
'success.gif',
2);
window.location.reload();
}
else
{
AlertMini('alt1',
"上传图片失败!",
'error.gif',
2);
}
},
error:
function
(data)
{
AlertMini('alt1',
"上传图片失败!",
'error.gif',
2);
}
}
$('#addImg').ajaxSubmit(optionsSave);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
ajaxFileUpload是一个异步上传文件的jQuery插件，语法：$.ajaxFileUpload([options])。
使用方法：
第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序。
script src="jquery-1.7.1.js" type="text/javascript"/script
script src="ajaxfileupload.js" type="text/javascript"/script
第二步：HTML代码
第三步：JS代码第四步：后台页面upload.aspx代码。
ajaxfileupload实现异步上传的完整例子：
JSP页面中引入的script代码：
script
function ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'imgfile',//文件上传空间的id属性 input type="file" id="imgfile" name="file" /
dataType: 'json',//返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
/script
struts.xml配置文件中的配置方法：
struts
package name="struts2" extends="json-default"
action name="AjaxImageUploadAction" class="com.test.action.ImageUploadAction"
result type="json" name="success"
param name="contentType"text/html/param
/result
result type="json" name="error"
param name="contentType"text/html/param
/result
/action
/package
/struts
上传处理的Action ImageUploadAction.action
package com.test.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.Arrays;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public class ImageUploadAction extends ActionSupport {
private File imgfile;
private String imgfileFileName;
private String imgfileFileContentType;
private String message = "你已成功上传文件";
public File getImgfile() {
return imgfile;
}
public void setImgfile(File imgfile) {
this.imgfile = imgfile;
}
public String getImgfileFileName() {
return imgfileFileName;
}
public void setImgfileFileName(String imgfileFileName) {
this.imgfileFileName = imgfileFileName;
}
public String getImgfileFileContentType() {
return imgfileFileContentType;
}
public void setImgfileFileContentType(String imgfileFileContentType) {
this.imgfileFileContentType = imgfileFileContentType;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@SuppressWarnings("deprecation")
public String execute() throws Exception {
String path = ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[] imgTypes = new String[] { "gif", "jpg", "jpeg", "png","bmp" };
try {
File f = this.getImgfile();
String fileExt = this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".") + 1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上传的文件格式不允许!!!";
return ERROR;
}*/
/**
* 检测上传文件的扩展名是否合法
* */
if (!Arrays.String asList(imgTypes).contains(fileExt)) {
message="只能上传 gif,jpg,jpeg,png,bmp等格式的文件!";
return ERROR;
}
FileInputStream inputStream = new FileInputStream(f);
FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getImgfileFileName());
byte[] buf = new byte[1024];
int length = 0;
while ((length = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, length);
}
inputStream.close();
outputStream.flush();
} catch (Exception e) {
e.printStackTrace();
message = "文件上传失败了!!!!";
}
return SUCCESS;
}
}
Query Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，接下来通过本文给大家介绍jquery ajax 上传文件处理方式。
FormData对象
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求
XMLHttpRequest方式
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
其实jquery的ajax也可以支持到的，关键是设置：processData 和 contentType 。
ajax方式
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function(){
console.log("正在进行，请稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失败");
}
},
error : function(responseStr) {
console.log("error");
}
});
图片和文件等流媒体 上传都是靠from表单的提交。
你可以设置一个隐藏的from表单
里面有个input id='file' type='file'
选择玩图片之后赋值给file
然后用jquery from表单提交即可
form id="form" runat="server" enctype="multipart/form-data"
input id='file' type='file'
/from
$.ajax({
url:'XXXX',//上传后台路径
data:$('#form').serialize(),
type:"POST",
success:function(){
}
});