`

ajax上传图片(servlet)

    博客分类:
  • js
阅读更多

 <form name="upfile_form" action="UploadServlet" method="POST" enctype="multipart/form-data">
 <p>input file title:
   <input type="text" name="file_title" />
  </p>
  <p>select less than 200K file:
   <input type="file" name="upload_file" id="upload_file" onchange="checkFileSize(this);" />
  </p>
  <p>
   <input type="submit" value="submit" />
  </p>
  <iframe name="check_file_frame" style="display:none;"></iframe>
</form>

------sample.html

 

------web.xml---

<servlet>
    <servlet-name>UploadServlet</servlet-name>
    <servlet-class>com.test.servlet.UploadServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>UploadServlet</servlet-name>
    <url-pattern>/UploadServlet</url-pattern>
</servlet-mapping>

------servlet-----

public class UploadServlet extends HttpServlet
{

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
{
   request.setCharacterEncoding("UTF-8");
   DiskFileItemFactory factory=new DiskFileItemFactory();
   String path=request.getRealPath("/upload");
   factory.setRepository(new File(path));
   factory.setSizeThreshold(1024*1024);
 
   ServletFileUpload upload=new ServletFileUpload(factory);
   try{
    List<FileItem> list=upload.parseRequest(request);
  
    for(FileItem item:list)
    {
     if(item.isFormField())
     {
      String name=item.getFieldName();
      String value=item.getString("UTF-8");
      request.setAttribute(name, value);
     }
     else
     {
      String name=item.getFieldName();
      String value=item.getName();
      int start=value.lastIndexOf("\\");
      String fileName=value.substring(start+1);
      request.setAttribute(name, fileName);
    
      item.write(new File(path,fileName));
      /*OutputStream os=new FileOutputStream(new File(path,fileName));
    
      InputStream is=item.getInputStream();
    
      byte []buffer=new byte[400];
      int length=0;
    
      while((length=is.read(buffer))>0)
      {
       os.write(buffer,0,length);
      }
      os.close();
      is.close();*/
    
     }
    }
   }
   catch (Exception e) {
    e.printStackTrace();
   }
   request.getRequestDispatcher("/result.jsp").forward(request, response);
}

}

注意:需要添加commons-fileupload.jar commons-io.jar

-------check_file.js

 

var fileForm = new Object();
function checkFileSize(fileObj) {
  if(fileObj.value != "") {
    var form = document.forms['upfile_form'];

    //把form的原始数据缓存起来
    fileForm.f = form;
    fileForm.a = form.getAttribute("action");  //form.action 为一个静态的对象,所以这里要使用getAttribute方法取值
    fileForm.t = form.target;

    //请求服务器端
    form.target = "check_file_frame";
    //form.action = "./ajax.php?act=upload";
    form.action = "UploadServlet";
    //form.submit(); 其实上面的action已经会执行submit操作,这步可有可无
  }
  return false;
}

function ajax_callback(result) {
  //还原form属性
  fileForm.f.target = fileForm.t;
  fileForm.f.setAttribute("action", fileForm.a);

  //处理结果
  switch(result) {
    case 0:
      alert("文件超过了200K或者没有选择文件,请重新上传!");
      //todo somthing
    default :
      alert("合法");
      //do somthing,如果你想使用这种方法实现真正的上传的话,那么在成功后把返回的文件路经存储在一个 input[hidden]里是个不错的办法
  }
  return ;
}

分享到:
评论

相关推荐

    ajax异步文件上传,servlet处理

    在现代Web应用中,用户经常需要上传文件,如图片、文档等。为了提供更好的用户体验,开发者通常会采用AJAX(Asynchronous JavaScript and XML)技术实现异步文件上传,避免传统方式下页面刷新带来的中断感。AJAX允许...

    Servlet图片批量上传ajax异步上传

    在IT行业中,Web开发是不可或缺的一部分,而Servlet、图片批量上传和Ajax异步技术则是构建高效、用户友好的Web应用的关键技术。以下是对这些知识点的详细说明: **Servlet上传** Servlet是Java EE平台中用于扩展...

    jsp+servlet小项目(实现图片上传功能)

    本项目"jsp+servlet小项目(实现图片上传功能)"旨在教授如何利用这两者创建一个简单的图片上传功能。下面将详细介绍这个项目涉及的关键知识点。 1. JSP基础:JSP是一种动态网页技术,允许开发者在HTML页面中嵌入...

    ajax提交form表单和上传图片

    本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式,用户无需等待页面刷新,即可完成操作,提升了交互性。 首先,`jquery.js` 是jQuery库的核心文件...

    jsp+Ajax表单自动完成,和Google的搜索的差不多

    在JSP中,开发者可能使用Servlet或者EL(Expression Language)和JSTL(JavaServer Pages Standard Tag Library)来处理请求,查找匹配的数据。这可能涉及数据库查询、数据过滤和排序等操作。 8. **响应式设计**: ...

    电子相册(jsp+servlet+javabean+ajax+sqlserver2005)

    在电子相册中,Ajax被用于实现无刷新的上传照片、查看照片等操作,提高了用户体验。 5. **jQuery**:jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画效果和Ajax交互。在本项目中,jQuery被用来...

    prototype Ajax+Servlet(附Demo)

    NULL 博文链接:https://plane.iteye.com/blog/334832

    ajax上传图片

    【Ajax上传图片】技术是现代Web开发中一种常见的文件上传方式,它利用JavaScript的Ajax技术实现页面无需刷新即可完成文件的上传,极大地提升了用户体验。在Java后端支持下,Ajax异步上传图片或文件的流程通常包括...

    spingmvc集成插件ajax上传图片文件

    在Spring MVC框架中,集成jQuery插件实现Ajax上传图片和文件是一种常见的需求,尤其是在现代Web应用中,这种异步上传方式能提供更好的用户体验。本文将详细介绍如何在Spring MVC项目中集成Ajax上传功能,并重点关注...

    jsp Ajax图片上传

    1. 接收请求:在Java后端,通常使用Servlet或者Spring MVC的Controller来接收Ajax请求,解析请求参数获取图片数据。 2. 图片存储:后端需要将接收到的图片数据写入到服务器的某个目录,或者存入数据库,如MySQL、...

    一个简单的JSP+Servlet图片上传例子

    这个“一个简单的JSP+Servlet图片上传例子”是一个基础教程,旨在帮助初学者理解如何通过这两种技术实现用户界面与服务器端的交互,特别是处理文件上传的功能。 首先,JSP是Java的一种视图技术,它允许开发者在HTML...

    Java Servlet版图片裁剪

    Servlet处理请求时,会读取上传的图片数据,然后应用图像处理算法进行裁剪操作,并将处理后的图片返回给客户端。 AJAX(Asynchronous JavaScript and XML)是Web开发的一种技术,它使网页可以不需重新加载整个页面...

    图书管理系统,Java课程设计,前端网页用bootstrap,后端Java,Ajax和Servlet信息传送。.zip

    该项目采用前端Bootstrap、后端Java以及Ajax和Servlet的信息传输技术,构建了一个完整的Web应用程序,适用于学习者理解和掌握相关技能。 首先,让我们从前端部分开始。Bootstrap是Twitter推出的一个开源前端框架,...

    java做的ajax异步上传 图片或文件的demo

    总的来说,这个"java做的ajax异步上传 图片或文件的demo"涵盖了Java Web开发中的关键概念,包括Ajax通信、文件上传处理、Servlet、以及Eclipse和Tomcat的使用。通过学习和实践这个demo,开发者可以深入了解这些技术...

    基于jsp+servlet、使用原生ajax,实现单表增删改查、文件上传、条件查询和分页

    在Java Web开发中,"基于jsp+servlet、使用原生ajax,实现单表增删改查、文件上传、条件查询和分页" 是一个常见的实战项目,非常适合初学者熟悉整个Web应用开发流程。这个项目主要涵盖了以下几个核心知识点: 1. **...

    java文件、图片上传(表单、Ajax)

    接下来是Ajax上传,它通常与JavaScript和jQuery库一起使用,提供异步上传体验,不会刷新整个页面。在客户端,我们可以监听文件输入元素的`change`事件,读取选中的文件,然后使用XMLHttpRequest或jQuery的`ajax`方法...

    Uploadify多文件上传+servlet

    在IT行业中,多文件上传是一项常见的需求,尤其是在网站开发中,比如用户可能需要一次上传多个图片或者文档。Uploadify是一款非常流行的JavaScript插件,它能够实现异步的、基于Ajax的多文件上传功能,极大地提升了...

    jsp+servlet+javabean+ajax MVC模式,增删改查,数据分页显示

    本文将深入探讨`JSP(JavaServer Pages)、Servlet、JavaBean`以及`Ajax`如何在MVC架构下实现数据的增删改查与分页显示,并涉及`SmartUpload`组件用于文件和图片的上传。 首先,`MVC`模式是一种软件设计模式,它将...

    文件上传和ajax获取json的小示例

    在IT领域,文件上传和AJAX获取JSON是两个常见的功能,尤其在Web开发中。这里我们探讨的是一个基于JSP的文件上传示例,以及如何通过AJAX技术实现实时刷新,从数据库获取并返回JSON数据到前端页面。 首先,文件上传是...

Global site tag (gtag.js) - Google Analytics