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 ...
随机推荐
- hadoop 之 kafka 安装与 flume -> kafka 整合
62-kafka 安装 : flume 整合 kafka 一.kafka 安装 1.下载 http://kafka.apache.org/downloads.html 2. 解压 tar -zxvf ...
- 如何解决Mac里面解压后文件名乱码问题
如果你把Mac当成你的主要工作机器,而你的同事用的都是Windows,有时候交换文档就是一件很痛苦的事,比如今天要说到的问题:当同事传给你一个zip文件,结果你拿过来解压后发现里面有些文件的文件名如果 ...
- Ubuntu编译PHP7问题
安装编译依赖 sudo apt-get -y install build-essential git autoconf sudo apt-get build-dep php5 sudo apt-get ...
- tone mapping简介
以下内容转自网络: tone Mapping原是摄影学中的一个术语,因为打印相片所能表现的亮度范围不足以表现现实世界中的亮度域,而如果简单的将真实世界的整个亮度域线性压缩到照片所能表现的亮度域内,则会 ...
- CentOS 6.5 zabbix 3.0.4 乱码问题
中文支持 修改web端源文件来开启语言 [root@localhost /]# vim /var/www/html/zabbix/include/locales.inc.php 'zh_CN' =&g ...
- Android 软键盘盖住输入框的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
- Spring mvc 报错：No qualifying bean of type [java.lang.String] found for dependency:
具体错误: No qualifying bean of type [java.lang.String] found for dependency: expected at least 1 bean w ...
- JQuery的Ajax跨域请求的解决方案
客户端调用代码示例: var myurl = "http://js.yingdoo.com/embed/CAPTCHA.ashx?m=" + phone_val + "& ...
- Activity的四个启动模式
/** * Activity有四种启动模式(android:launchMode) * 分别是: * 1. standard(默认),可以不停的在栈中创建新的Activity * 2. singleT ...
- 跟着百度学PHP[4]OOP面对对象编程-10-静态关键字static
使用static关键字可以将类中的成员标识为静态的,既可以用来标识成员属性,也可以用来标识成员方法. 以Person类为例,如果在person类中有一个“$country=’china’”的成员属性, ...