ajax jsp 无刷新上传文件

本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法

开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点。当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。

ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以使用IFrame来上传文件是最好的选择。

我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的

html:

<html>

<body>

<form action="/FileUploadServlet" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >

<input type="file" id="file" name="file" style="width:450">

<INPUT type="submit" value="上传文件"><span id="msg"></span>

<br>

<font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>

<iframe name=‘hidden_frame‘ id="hidden_frame" style=‘display:none‘></iframe>

</form>

</body>

</html>

<script type="text/javascript">

function callback(msg)

{

document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;

document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";

}

</script>

java 逻辑处理:

package com.partner.servlets;

import java.io.BufferedInputStream;

import java.io.BufferedOutputStream;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Date;

import java.util.Iterator;

import java.util.List;

import javax.servlet.ServletException;

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;

import org.apache.commons.fileupload.util.Streams;

import org.apache.commons.logging.Log;

import org.apache.commons.logging.LogFactory;

import com.partner.core.util.UploadConfigurationRead;

public class FileUploadServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected final transient Log log = LogFactory.getLog(FileUploadServlet.class);

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doPost(request, response);

}

@SuppressWarnings("unchecked")

protected void doPost(HttpServletRequest request, HttpServletResponse response){

//文件存放的目录

//File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+File.separator+"uploads");

String path = UploadConfigurationRead.getInstance().getConfigItem("tempPath").trim();

File tempDirPath = new File(path);

if(!tempDirPath.exists()){

tempDirPath.mkdirs();

}

//创建磁盘文件工厂

DiskFileItemFactory fac = new DiskFileItemFactory();

//创建servlet文件上传组件

ServletFileUpload upload = new ServletFileUpload(fac);

upload.setHeaderEncoding("UTF-8");

//文件列表

List fileList = null;

//解析request从而得到前台传过来的文件

try {

fileList = upload.parseRequest(request);

} catch (FileUploadException ex) {

ex.printStackTrace();

return;

}

//保存后的文件名

String imageName = null;

//便利从前台得到的文件列表

Iterator<FileItem> it = fileList.iterator();

while(it.hasNext()){

FileItem item =  it.next();

//如果不是普通表单域,当做文件域来处理

BufferedInputStream in = null;

BufferedOutputStream out = null;

if(!item.isFormField()){

imageName = new Date().getTime()+"_"+item.getName();

try {

in = new BufferedInputStream(item.getInputStream());

out = new BufferedOutputStream(

new FileOutputStream(new File(tempDirPath+File.separator+imageName)));

Streams.copy(in, out, true);

} catch (IOException e) {

log.error("文件上传异常:", e);

}finally{

if(in != null){

try {

in.close();

} catch (IOException e) {

log.error("上传文件关闭输入失败",e);

}

}

if(out != null){

try {

out.close();

} catch (IOException e) {

log.error("上传文件关闭输出失败",e);

}

}

}

}

}

PrintWriter out = null;

try {

out = encodehead(request, response);

} catch (IOException e) {

e.printStackTrace();

}

//这个地方不能少,否则前台得不到上传的结果

out.write("<script>parent.callback(‘upload file success‘)</script>);

out.write(imageName);

out.close();

}

/**

* Ajax辅助方法 获取 PrintWriter

* @return

* @throws IOException

* @throws IOException

* request.setCharacterEncoding("utf-8");

response.setContentType("text/html; charset=utf-8");

*/

private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{

request.setCharacterEncoding("utf-8");

response.setContentType("text/html; charset=utf-8");

return response.getWriter();

}

}

时间: 2024-12-12 03:19:30

ajax jsp 无刷新上传文件的相关文章

web 开发之js---巧用iframe实现jsp无刷新上传文件

首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的.    而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法.    开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

iframe实现无刷新上传文件(转)

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. [1].[代码] [HTML]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html>   <body>      <form action="upload.jsp

隐藏iframe无刷新上传文件

首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" name="upl

异步无刷新上传文件并且上传文件可以带上参数

关于异步上传文件并且带上参数,网上有很多关于这样的插件,而我最喜欢用的插件是ajaxfileupload.js,该插件的代码如下: /*   131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10    依赖:jquery-1.6.1.min.js   主方法:ajaxFileUpload 接受 json 对象参数   参数说明:   fileElementId:必选,上传文件域ID   url:必选,发送请求的URL字符串   fi

利用iframe无刷新上传文件的坑

原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性

Ajax 无刷新上传文件插件 uploadify 的使用

在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify 插件来实现该思路. 官方网站:http://www.uploadify.com 文档地址:http://www.uploadify.com/documentation/ 插件有 Flash 版 和 HTML5 版,项目中用到的是 Flash 版. 下载 Demo 并解压: 其中 index.php

mvc中file无刷新上传文件

前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下. 上传封装类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; n

异步无刷新上传文件而且上传文件能够带上參数

关于异步上传文件而且带上參数,网上有非常多关于这种插件.而我最喜欢用的插件是ajaxfileupload.js.该插件的代码例如以下: /*   131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件.支持 ie6-ie10    依赖:jquery-1.6.1.min.js   主方法:ajaxFileUpload 接受 json 对象參数   參数说明:   fileElementId:必选,上传文件域ID   url:必选,发送请求的URL字符串