jsp中上传图片(使用ajaxfileupload)

最新推荐文章于 2024-04-20 03:39:57 发布

杨名天吓

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量2.9w

点赞数 2

分类专栏： web jquery

web 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

jsp中无刷新上传图片(前台使用jquery+ajaxfileupload),后台用commons-fileupload处理

需求:前台选择图片，页面显示上传后的图片地址

代码一:ajaxUploadImg.jsp

请百度搜索，并下载jquery.js 及 ajaxfileupload.js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script language="javascript" src="<%=basePath%>js/jquery.js" ></script>
	<script language="javascript" src="<%=basePath%>js/ajaxfileupload.js" > </script> 
	<script language="javascript" type="text/javascript" src="<%=basePath%>js/ezeditor.js"></script>
	<script type="text/javascript">
	function ajaxFileUpload()
	{
	
	$("#loading")
        .ajaxStart(function(){
            $(this).show();
        })//开始上传文件时显示一个图片
        .ajaxComplete(function(){
            $(this).hide();
        });//文件上传完成将图片隐藏起来
        
       $.ajaxFileUpload({
                 url:'<%=basePath %>FileUpload',             //需要链接到服务器地址
                 secureuri:false,
                 fileElementId:'uploadFileInput',                         //文件选择框的id属性
                 dataType: 'json',                                     //服务器返回的格式，可以是json
                 success: function (data, status)             //相当于java中try语句块的用法
                 {   
                 //alert(data);       //data是从服务器返回来的值   
                     $('#result').html('上传图片成功!请复制图片地址<br/>'+data.src);
 
                 },
                 error: function (data, status, e)             //相当于java中catch语句块的用法
                 {
                     $('#result').html('上传图片失败');
                 }
               }
             );
    }
	</script>
  </head>
  
  <body> 
  <div id="result" style="FONT:12px 宋体"></div><br/>
 <img id="loading" src="loading.gif" style="display:none;">
		<form name="form_uploadImg" action="" method="POST" enctype="multipart/form-data">
 <input id="uploadFileInput" type="file" size="45" name="uploadFileInput" class="input" />
 <input type="button" id="buttonUpload" οnclick="return ajaxFileUpload();" value="上传图片"/>
 </form>
</html>

代码二: FileUpload.java
这里使用了commons-fileupload-1.2.1.jar的包，可以自行搜索下载
如果使用myeclipse，可以直接在Struts 2 Core Libraies中找到.
commons-fileupload-1.2.1.jar

package com.lz.servlet;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

public class FileUpload extends HttpServlet {

	public FileUpload() {
		super();
	}

	public void destroy() {
		super.destroy(); 
	}
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html");   
		response.setCharacterEncoding("UTF-8");
		String realDir = request.getSession().getServletContext().getRealPath("");
		String contextpath = request.getContextPath();
		String basePath = request.getScheme() + "://"
		+ request.getServerName() + ":" + request.getServerPort()
		+ contextpath + "/";

		try {
		String filePath = "uploadfiles";
		String realPath = realDir+"\\"+filePath;
		//判断路径是否存在，不存在则创建
		File dir = new File(realPath);
		if(!dir.isDirectory())
		    dir.mkdir();

		if(ServletFileUpload.isMultipartContent(request)){

		    DiskFileItemFactory dff = new DiskFileItemFactory();
		    dff.setRepository(dir);
		    dff.setSizeThreshold(1024000);
		    ServletFileUpload sfu = new ServletFileUpload(dff);
		    FileItemIterator fii = null;
		    fii = sfu.getItemIterator(request);
		    String title = "";   //图片标题
		    String url = "";    //图片地址
		    String fileName = "";
			String state="SUCCESS";
			String realFileName="";
		    while(fii.hasNext()){
		        FileItemStream fis = fii.next();

		        try{
		            if(!fis.isFormField() && fis.getName().length()>0){
		                fileName = fis.getName();
						Pattern reg=Pattern.compile("[.]jpg|png|jpeg|gif$");
						Matcher matcher=reg.matcher(fileName);
						if(!matcher.find()) {
							state = "文件类型不允许！";
							break;
						}
						realFileName = new Date().getTime()+fileName.substring(fileName.lastIndexOf("."),fileName.length());
		                url = realPath+"\\"+realFileName;

		                BufferedInputStream in = new BufferedInputStream(fis.openStream());//获得文件输入流
		                FileOutputStream a = new FileOutputStream(new File(url));
		                BufferedOutputStream output = new BufferedOutputStream(a);
		                Streams.copy(in, output, true);//开始把文件写到你指定的上传文件夹
		            }else{
		                String fname = fis.getFieldName();

		                if(fname.indexOf("pictitle")!=-1){
		                    BufferedInputStream in = new BufferedInputStream(fis.openStream());
		                    byte c [] = new byte[10];
		                    int n = 0;
		                    while((n=in.read(c))!=-1){
		                        title = new String(c,0,n);
		                        break;
		                    }
		                }
		            }

		        }catch(Exception e){
		            e.printStackTrace();
		        }
		    }
		    response.setStatus(200);
		    String retxt ="{src:'"+basePath+filePath+"/"+realFileName+"',status:success}";
		    response.getWriter().print(retxt);
		}
		}catch(Exception ee) {
			ee.printStackTrace();
		}
		
	}
	public void init() throws ServletException {
		// Put your code here
	}

}

代码三: web.xml做如下

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
    <servlet-name>FileUpload</servlet-name>
    <servlet-class>com.lz.servlet.FileUpload</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>FileUpload</servlet-name>
    <url-pattern>/FileUpload</url-pattern>
  </servlet-mapping>
</web-app>

杨名天吓

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
jsp中上传图片(使用ajaxfileupload)

jsp中无刷新上传图片(前台使用jquery+ajaxfileupload),后台用commons-fileupload处理需求:前台选择图片，页面显示上传后的图片地址代码一:ajaxUploadImg.jsp请百度搜索，并下载jquery.js 及 ajaxfileupload.js<% String path = request.getContextPath
复制链接

扫一扫