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 ...
随机推荐
- 一张图告诉你，只会jQuery还不够！
会了jquery语法,会了jquery函数,你就真的会了jquery吗,来看这张图!是超实用的jquery代码段一书的导览!熊孩子们,赶紧学习去吧! 对于码农来说,代码就是生产力,你每天能码多少行并不 ...
- r8 - ASC 41(俄罗斯多校）
1 今天干的俄罗斯的一场多校,被虐哭啊,就做出两题. 2 3 4 5 6 7 Gym 100496D Data Mining 8 题目讲得是给你一串数字,然后给你i,p,表示从第i开始,对这串数离散话 ...
- hash-2.hashMap
1.HashMap的数据结构 a.HashMap是一个链表散列的结合体,即,数组和链表的结合体. b.HashMap类中定义了Entry类型的数组,Entry [ ] ,Entry有key value ...
- laravel中间件-----------middleware
middleware中间件 是访问到达服务器后在被对应的路由处理之前所经过的一层过滤层,故称中间件. 中间件是存放在app\http\middleware中,需要定一个 handle 处理方法,在ha ...
- java自定义标签 权限
<?xml version="1.0" encoding="UTF-8" ?> <taglib xmlns="http://java ...
- DP~数塔（hrbustoj1004)
aaarticlea/bmp;base64,iVBORw0KGgoAAAANSUhEUgAAAtQAAAPgCAYAAAASsev/AAAgAElEQVR4nOzdf4w0x33n9/4rQP4L8s
- 当webshell不可执行cmshell时 （菜刀的安全模式!）可用此脚本突破执行cmd命令
<?php /* ============== */ error_reporting(0); ini_set('max_execution_time',0); // -------------- ...
- 5-python学习——条件语句
5-python学习——条件语句 5-python学习——条件语句 条件语句if else形式 if else条件语句说明 测试一下 编程语言一般都由这么几个部分组成 变量 条件分支语句 循环语句 函 ...
- （转） 站在C#和JS的角度细谈函数式编程与闭包
1.函数式编程是什么? 摘自百度的说法是.函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus).而且λ演算的函数可以接受函数当作输 ...
- sharepoint更新左侧列表的名字
SPWeb myweb = SPContext.Current.Web; SPList myList = myweb.Lists["nihao"]; ...