文档章节

jsp中上传图片(使用ajaxfileupload)

风中帆
 风中帆
发布于 2017/07/14 15:01
字数 810
阅读 22
收藏 0

 jsp中上传图片(使用ajaxfileupload)

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" onclick="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>

 

本文转载自:http://blog.csdn.net/henren555/article/details/10577183

上一篇: Eclipse快捷键
下一篇: Java连接池详解
风中帆
粉丝 14
博文 200
码字总数 18552
作品 0
青岛
私信 提问
jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

由于对jquery不了解,想请教各位在jsp中的struts2框架下 怎么使用jquery的插件ajaxfileupload 实现图片的异步上传,求个简单的实例源码。 jsp中的JS代码怎么写?...

碧海云天
2011/03/08
22.3K
13
Jfinal的Ajax上传图片的异常

使用Jfinal需要异步上传图片以后得到上传图片的路径,在Jsp页面显示出来,所以用了一个 ajaxFileUpload:代码如下 function ajaxFileUpload() { $.ajaxFileUpload({ url : '', secureuri : f...

默默积极
2014/05/15
1K
6
tiny_mce的本地图片上传插件

做项目是需要将本地图片上传到服务器,可是tinymce自带的image插件不能很好的实现, tinymce需要动的输入图片地址,这个地址还得是服务器上的地址。所以不满足需要,需要改进。 通常的办法就...

cookqq
2012/03/22
776
0
ajaxfileupload 怎么取消正在上传的文件?

ajaxfileupload 怎么取消正在上传的文件? 上传的代码如下: 就是我jsp页面里面有个取消按钮,当点击之后要取消上传文件... 求大侠、指教该怎么取消正在上传的文件 http://bbs.ibei#feng.com...

玫瑰情书
2014/05/30
848
1
SpringMVC+jquery-fineuploader 文件上传

springmvc文件上传真头疼,网上搜了半天没发现都是TMD的用submit按钮提交到后台的,就没有插件的吗? 刚开始找到个ajaxfileUpload.还可以,单文件上传不错 ,怎么搞的网上百度一下很多. 最后...

javacc
2012/11/29
11.1K
6

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 女装大佬被拆穿是妹子假扮

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《All of the Stars》- Ed Sheeran 《All of the Stars》- Ed Sheeran 手机党少年们想听歌,请使劲儿戳(这里) @Leon_swool ...

小小编辑
23分钟前
63
3
3. 彤哥说netty系列之Java BIO NIO AIO进化史

你好,我是彤哥,本篇是netty系列的第三篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/AIO。 本...

彤哥读源码
26分钟前
10
0
02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
9
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
8
0
PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部