JqueryAjaxFormData文件异步上传
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>添加图书</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
function checkNull(ele)
{
var error = $("#error");
error.html("");
if(ele.val() == "")
{
error.html(ele.attr("id")+"不能为空!");
return false;
}
return true;
}
function checkTypeid()
{
return true;
}
function checkName()
{
return checkNull($("#name"));
}
function checkAuthor()
{
return checkNull($("#author"));
}
function checkPrice()
{
var price = $("#price");
var error = $("#error");
error.html("");
if(checkNull(price))
{
if(isNaN(price.val()))
{
error.html("价格必须为数字!");
return false;
}
return true;
}
error.html("价格不能为空!");
return false;
}
function checkUser()
{
return checkNull($("#user"));
}
function checkDescription()
{
return checkNull($("#description"));
}
function checkState()
{
return checkNull($("#state"));
}
function checkAll()
{
if(checkTypeid() && checkName() && checkAuthor() &&
checkPrice() && checkUser() && checkDescription() && checkState())
{
return true;
}
return false;
}
function uploadFile()
{
var input = $("#input");
var form = $("#form");
if(checkNull(input))
{
var formData = new FormData(form[0]);
$.ajax
({
url : "file_upload.action",
type : "post",
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function()
{
confirm("确认上传图片？");
},
success : function(data)
{
if(data.status == 1)
{
alert("成功上传"+ data.inputFileName);
$("#picture").val(data.realPath);
}
else
{
alert("上传失败!");
}
},
error : function(responseStr)
{
alert("服务器忙!");
}
});
}
}
$
(
function prepare()
{
var typeid = $("#typeid");
var stateSpan = $("#stateSpan");
typeid.html("");
$.ajax
({
url:"bookType_getType.action",
type:"post",
dataType:"json",
success:function(data)
{
var typeList = data.typeList;
var stateMap = data.stateMap;
for(var i = 0; i < typeList.length; i++)
{
var type = typeList[i];
var option = "<option value='"+type.id+"'>"+type.name+"</option>";
typeid.append(option);
}
for(var key in stateMap)
{
var radio = "<input type='radio' value='"+ key +"' />" + stateMap[key];
stateSpan.append(radio);
}
},
error:function()
{
alert("服务器忙！");
}
});
}
);
</script>
</head> <body>
<div align="center">
<h1>添加图书</h1>
<a href="book_manage.action">浏览图书</a><br/><br/><br/>
<div>
<s:form action="file_upload.action" id="form" method="post" theme="xhtml" enctype="multipart/form-data">
<s:file label="上传封面" name="input" id="input"></s:file>
</s:form>
<input type="button" value="上传图片" onclick="uploadFile();" />
</div><br/>
<s:form action="book_add.action" method="post" theme="xhtml" onsubmit="return checkAll();" validate="true">
图书类别:<select name="book.typeid" id="typeid" onblur="checkTypeid();"></select><br/>
图书状态:<span id="stateSpan"></span>
<input type="hidden" name="book.picture" id="picture"/>
<s:textfield label="图书名称" name="book.name" id="name" onblur="checkName();"></s:textfield>
<s:textfield label="图书作者" name="book.author" id="author" onblur="checkAuthor();"></s:textfield>
<s:textfield label="图书价格" name="book.price" id="price" onblur="checkPrice();"></s:textfield>
<s:textfield label="借书读者" name="book.user" id="user" onblur="checkUser();"></s:textfield>
<s:textarea label="图书描述" name="book.description" id="description" onblur="checkDescription();"></s:textarea>
<s:submit align="center"></s:submit>
<s:token></s:token>
</s:form>
<span style="font-weigh:bold;color:red;"><h3 id="error"></h3></span>
<s:if test="flag == true">
<script>alert("图书添加成功！");</script>
</s:if>
<s:if test="#session.serverCheck != null">
<script>alert("价格必须大于0！");</script>
</s:if>
</div>
</body>
</html>
JqueryAjaxFormData文件异步上传的更多相关文章
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- 文件的上传（表单上传和ajax文件异步上传）
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- 普通文件的上传（表单上传和ajax文件异步上传）
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- 文件的上传（1）（表单上传和ajax文件异步上传）
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
- 小程序使用 Promise.all 完成文件异步上传
小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...
- 文件上传之——用SWF插件实现文件异步上传和头像截取
之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...
随机推荐
- Request.ServerVariables 参数大全
Request.ServerVariables("Url") 返回服务器地址 Request.ServerVariables("Path_Info") 客户端提 ...
- git ssh-add 报错 ssh-add Could not open a connection to your authentication agent
$ ssh-add ~/.ssh/id_rsa.pub Could not open a connection to your authentication agent. 启动ssh-agent服务 ...
- 分析Masonry
一. 继承关系 1.MASConstraint (abstract) MASViewContraint MASComposisionConstraint 2. UIView NSLayoutConst ...
- leetcode 32. Longest Valid Parentheses
Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
- c++ 操作符重载和友元
操作符重载(operator overloading)是C++中的一种多态,C++允许用户自定义函数名称相同但参数列表不同的函数,这被称为函数重载或函数多态.操作符重载函数的格式一般为: operat ...
- Java中如何解决double和float精度不准的问题
我们知道浮点数是无法在计算机中准确表示的,例如0.1在计算机中只是表示成了一个近似值,因此,对付点数的运算时结果具有不可预知性. 在进行数字运算时,如果有double或float类型的浮点数参与计算, ...
- HDU 1159 裸最长公共子串
试着拍了一道模板题 dp开了500,开100会超时..... string类型中间有空格会判为结束 #include<algorithm> -->min,max函数的头文件 #inc ...
- Python自动化之多进程
多进程multiprocessing from multiprocessing import Process import os def info(title): print(title) print ...
- centos rpmforge repo
在这里找到合适的rpm包:http://pkgs.repoforge.org/rpmforge-release/ 下载 wget http://pkgs.repoforge.org/rpmforge- ...
- sublime-text3配置编译php
在sublime-text中配置php的编译环境非常简单,只需要新建一个build system就可以了 步骤: 1. 工具->编译系统->新编译系统,将默认的内容替换为如下代码:蓝字部分 ...