web客户端通过ajaxfileupload方式上传文件
fileUpload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jQuery/ajaxfileupload.js"></script>
<script type="text/javascript">
function fileClick(){
if (confirm("摄像文件录制完成，是否上传？(默认存放目录：C:\\OCXRecordFiles)")) {
$("#file").click();
} else {
return;
};
}
function ajaxFileUpload()
{
alert("ajaxFileUpload()函数");
$.ajaxFileUpload
(
{
url:'fileUploadServlet',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json',//返回值类型 一般设置为json
data: {//加入的文本参数
"logoPath": "param1",
"logoName": "param2"
},
success: function (data, status) //服务器成功响应处理函数
{
alert("ajax成功返回");
//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 true;
} function openBrowse(){
var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;
if(ie){
document.getElementById("file").click();
document.getElementById("filename").value=document.getElementById("file").value;
}else{
var a=document.createEvent("MouseEvents");//FF的处理
a.initEvent("click", true, true);
document.getElementById("file").dispatchEvent(a);
}
}
</script>
</head>
<body>
<input type="file" id="file"name="file" style="display:none" onchange="ajaxFileUpload()"/>
<input type="button" name="button" value="点我就像点击“浏览”按钮一样" onclick="javascript:openBrowse();" />
<input type="text" id="filename"/>
<!--
<input type="file" id="file" name="file" onchange="ajaxFileUpload()" accept="audio/mp4, video/mp4, image/jpeg" style=""/>
<input type="button" value="上传" onclick="fileClick()">
-->
<!--
<style>
#file{position:absolute;filter:alpha(opacity=0);opacity:0;size:1;width:50px}
</style> <input type="file" id="file" name="file" onchange="ajaxFileUpload()" accept="audio/mp4, video/mp4, image/jpeg" />
<input type="button" value="上传" >
-->
<FORM METHOD=POST ACTION="fileUploadServlet" enctype="multipart/form-data">
<A hideFocus class=addfileA id=aComposeAttach href="#"> <INPUT hideFocus class=addfileI type=file size=1 name="FF" onchange="this.form.submit()"></A>
<INPUT TYPE="submit" value="提交">
</FORM> </body>
</html>
后台 FileUploadServlet.java
package com.zm.servlet;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List; import javax.servlet.ServletException;
//import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload; /**
* Servlet implementation class FileUpload
*/
//@WebServlet("/FileUpload")
public class FileUploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public FileUploadServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub File tmpDir = new File("E:/Downloads/tmp/"); //临时存放目录
String saveDir = "E:/Downloads/upload/"; //最终存放目录 // 检查是否有一个文件上传请求
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (!isMultipart) {
return;
} // 创建一个基于硬件磁盘文件项的工厂
DiskFileItemFactory factory = new DiskFileItemFactory(); //指定在内存中缓存数据大小,单位为byte,这里设为1Mb
factory.setSizeThreshold(1024);
//设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录
factory.setRepository(tmpDir); ServletFileUpload upload = new ServletFileUpload(factory); //setProgressListener
//upload.setProgressListener(new FileUploadProgressListener()); // Parse the request
List items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
} // Process the uploaded items
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem)iter.next(); //整个表单的所有域都会被解析，要先判断一下是普通表单域还是文件上传域
if (item.isFormField()) {
String name = item.getFieldName();
String value = item.getString();
System.out.println(name + ":" + value);
} else {
String fieldName = item.getFieldName();
String fileName = item.getName();
String contentType = item.getContentType();
boolean isInMem = item.isInMemory();
long sizeInBytes = item.getSize();
if(fileName.contains(":")){
String[] sArray = fileName.split("\\\\");
int iLength = sArray.length;
fileName = sArray[iLength -1];
}
System.out.println(fieldName + ":" + fileName);
System.out.println("类型：" + contentType);
System.out.println("是否在内在：" + isInMem);
System.out.println("文件大小" + sizeInBytes); File uploadedFile = new File(saveDir + fileName);
try {
item.write(uploadedFile);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doGet(request, response);
} }
web.xml
<!-- 测试jquery fileUpload -->
<servlet>
<servlet-name>fileUploadServlet</servlet-name>
<servlet-class>com.zm.servlet.FileUploadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>fileUploadServlet</servlet-name>
<url-pattern>/fileUploadServlet</url-pattern>
</servlet-mapping>
web客户端通过ajaxfileupload方式上传文件的更多相关文章
- 通过Ajax方式上传文件，使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- [转] 通过Ajax方式上传文件，使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- ajaxfileupload异步上传文件
ajaxfileupload插件可以以异步方式上传文件(其实现:iframe),不像传统那样需要刷新,下面就介绍下其使用 1.HTML部分(先引入jquery): <!DOCTYPE html& ...
- Ajax方式上传文件
用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...
- Android必知必会-使用okhttp的PUT方式上传文件
注:如果移动端排版有问题,请看 简书版 (<-点击左边),希望CSDN能更好的支持移动端. 背景 公司的文件上传接口使用PUT协议,之前一直用的都是老项目中的上传类,现在项目中使用了okhttp ...
- koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- 前端 - jquery方式 / iframe +form 方式 上传文件
环境与上一章一样 jquery 方式上传文件: HTML代码 {#html代码开始#} <input type="file" id="img" > ...
随机推荐
- 3月31日学习笔记（HTML基础）
HTML标签和元素概念区别 <p>是标签,<p>内容</p>是HTML元素. <pre></pre>定义预格式化文本,多用来显示源代码. 表 ...
- 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
- 《Web编程入门经典》
在我还不知道网页的基础结构的时候,我找过很多本介绍Web基础的书籍,其中这本<Web编程入门经典>,我认为是最好的. 这本书内容很全面.逻辑很严谨.结构很清晰.语言文字浅显易懂. 看这本书 ...
- 对于观察者模式，Reactor模式，Proactor模式的一点理解
最近就服务器程序IO效率这一块了解一下设计模式中的Reacotr模式和proactor模式,感觉跟观察者模式有些类似的地方,网上也看了一些其他人对三者之间区别的理解,都讲得很仔细,在此根据自己的理解做 ...
- QQ音乐API分析记录
我一直是QQ音乐的用户,最近想做一个应用,想用QQ音乐的API,搜索了很久无果,于是就自己分析QQ音乐的API. 前不久发现QQ音乐出了网页版的,是Flash的,但是,我用iPhone打开这个链接的时 ...
- hibernate导入大量数据时，为了避免内存中产生大量对象，在编码时注意什么，如何去除？
Session session = sessionFactory.openSession(); Transaction tx = session.beginTransaction(); for ( i ...
- 纯CSS3代码实现简单的图片轮播
以4张图片为例:1.基本布局:将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,相框设置1个图片的大小并设置溢出隐藏,以保证正确显 ...
- ListView练习
1. 在 .xml中创建一个ListView是不会显示出来的. 2. ListView的Item: 列表项, 3. 显示ListView的4个要素: 3.1 ListView控件:在layout布局中 ...
- centos install（160112更新）
centos安装之后: 更新 yum update 新增用户: useradd myuser passwd myuser 添加sudo: usermod -a -G wheel myuser //vi ...
- Django文档——Model字段类型(Field Types)
大部分内容参考自http://wrongwaycn.github.io/django11/topics/db/models/index.html#topics-db-models ,内容是django ...