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 ...
随机推荐
- Markdown 學習
Markdown 格式由John Gruber 創建,是一種便於閱讀,非常簡潔直觀的純文本文件格式,可以方便地轉為html等其他格式,很適合與寫作,不需要關注排版問題 常用學習資源有: ###標題用 ...
- OC第一节 —— 类和对象
一.类和对象的概念 1.1类 自己的定义: 具有相同或相似性质对象的抽象. 1.2 对象 自己的定义: 对象是人们要进行研究的任何物体,从最简单的整数到复杂的飞机 等均可以看做是对象. 举例说明: 类 ...
- Hibernate框架之get和load方法的区别
我们在学习Hibernate框架时,经常会进行修改,删除操作,对于这些操作,我们都应该先加载对象,然后在执行或删除的操作,那么这里Hibernate提供了两种方法按照主键加载对象,也就是我要说的get ...
- android Home键和返回键
在Android中,当按下Home键,默认情况下stop前台的actiity,即activity设置成onstop,而不是ondestory.如果再次启动该activity不是调用onCreate,而 ...
- JSON字符串转JavaBean，net.sf.ezmorph.bean.MorphDynaBean cannot be cast to ……
在json字符串转java bean时,一般的对象,可以直接转,如:一个学生类,属性有姓名.年龄等 public class Student implements java.io.Serializab ...
- PHP 中的行为 ，与什么是切面
行为(Behavior)扩展以及插件(Plug or Hook)详解: 行为(Behavior)是ThinkPHP扩展机制中比较关键的一项扩展,行为即可以独立调用,也可以绑定到某个 标签中进行监听,官 ...
- 2016年11月10日--CSS动画
jquery动画:http://www.w3school.com.cn/jquery/jquery_animate.aspCSS3动画教程1:http://www.w3school.com.cn/cs ...
- fastx_toolkit去除测序数据中的接头和低质量的reads
高通量测序数据下机后得到了fastq的raw_data,通常测序公司在将数据返还给客户之前会做"clean"处理,即得到clean_data.然而,这些clean_data是否真的 ...
- 2.5---链表来进行加法，链式A+B（CC150)
这里是用了自己的方法,和书本不一样. import java.util.HashSet; import java.util.Set; class ListNode{ int val; ListNode ...
- phpcms二层栏目下拉和当前栏目高亮
这里需要嵌套loop标签,既双层循环 第一层loop的catid = 0代表顶级栏目 第二层loop的catid = "$r[catid]"代表上层循环的栏目id <ul c ...