版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/SSH_5523/article/details/78095196
JS:// 图片上传demo
jQuery(function() {
var $ = jQuery,
$list = $('#fileList'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
// Web Uploader实例
uploader;
// 初始化Web Uploader
uploader = WebUploader.create({
// 自动上传。
auto: true,
// swf文件路径
swf:'webuploader/Uploader.swf',
// 文件接收服务端。
server: 'http://localhost:8080/webuploader/uploadServlet',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 只允许选择文件，可选。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
//注意我写样式了啊response:服务端返回的数据
uploader.on( 'uploadSuccess', function( file,response) {
$( '#'+file.id ).addClass('upload-state-done');
//console.info(response);
$("#upInfo").html("<font color='red'>"+response._raw+"</font>");
});
// 文件上传失败
uploader.on( 'uploadError', function(file) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
alert(reson);
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败!');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
});HTML<body>
<h3>图片上传示例</h3>
<!--dom结构部分-->
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="upInfo"></div>
<div id="filePicker">选择图片</div>
</div>
</body>package com.servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;
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.FileItem;
import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.sun.xml.internal.bind.v2.runtime.unmarshaller.XsiNilLoader.Array;
public class UploadServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 5340739900311516259L;
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
try {
final long MAX_SIZE = 300 * 1024 * 1024;// 设置上传文件最大为 3M
// 允许上传的文件格式的列表
// final String[] allowedExt = new String[] { "jpg", "jpeg", "gif",
// "php", "JPG" };
response.setContentType("text/html");
// 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload
DiskFileItemFactory dfif = new DiskFileItemFactory();
dfif.setSizeThreshold(4096);// 设置上传文件时用于临时存放文件的内存大小,这里是4K.多于的部分将临时存在硬盘
dfif.setRepository(new File(request.getRealPath("/") + "upload"));// 设置存放临时文件的目录,web根目录下的upload目录
System.out.println("临时目录:"
+ new File(request.getRealPath("/") + "upload"));
// 用以上工厂实例化上传组件
ServletFileUpload sfu = new ServletFileUpload(dfif);
// 设置最大上传尺寸
sfu.setSizeMax(MAX_SIZE);
// 从request得到 所有 上传域的列表
List fileList = null;
try {
fileList = sfu.parseRequest(request);
} catch (FileUploadException e) {// 处理文件尺寸过大异常
if (e instanceof SizeLimitExceededException) {
out.println("文件尺寸超过规定大小:" + MAX_SIZE + "字节!");
return;
}
e.printStackTrace();
}
// 没有文件上传
if (fileList == null || fileList.size() == 0) {
out.println("请选择上传文件!");
return;
}
// 得到所有上传的文件
Iterator fileItr = fileList.iterator();
// 循环处理所有文件
while (fileItr.hasNext()) {
FileItem fileItem = null;
String path = null;
long size = 0;
// 得到当前文件
fileItem = (FileItem) fileItr.next();
// 忽略简单form字段而不是上传域的文件域(<input type="text" />等)
if (fileItem != null && fileItem.isFormField()) {
String fname = fileItem.getFieldName();
String fvalue = fileItem.getString();
System.out.println("字段名：" + fname + ",值：" + fvalue);
continue;
}else{
// 得到文件的完整路径
path = fileItem.getName();
}
// 得到文件的大小
size = fileItem.getSize();
if ("".equals(path) || size == 0) {
out.println("请选择上传文件!");
return;
}
// 得到去除路径的文件名
String t_name = path.substring(path.lastIndexOf("//") + 1);// kaola.jpeg
System.out.println("t_name:" + t_name);
// 得到文件的扩展名(无扩展名时将得到全名)
String t_ext = t_name.substring(t_name.lastIndexOf(".") + 1);// jpeg
System.out.println(t_ext);
// 拒绝接受规定文件格式之外的文件类型
// String tmp = Arrays.toString(allowedExt);
Pattern p = Pattern.compile(t_ext);
// Matcher m = p.matcher(tmp);
// if (m.find() == true) {
// 如果符合上传的格式
String realName = UUID.randomUUID().toString();
//String now = new SimpleDateFormat("yyyyMMddhhmmss").format(new Date());
System.out.println(realName);
// 根据系统时间生成上传后保存的文件名
String prefix = realName;
// 保存的最终文件完整路径,保存在web根目录下的upload目录下
String u_name = request.getRealPath("/") + "upload/" + prefix
+ "." + t_ext;
System.out.println("最终保存目录:" + u_name);
try {
File file = new File(u_name);
// 保存文件
fileItem.write(file);
System.out.println("文件上传成功. 已保存为: " + prefix + "." + t_ext
+ " 文件大小: " + size + "字节<p />");
} catch (Exception e) {
e.printStackTrace();
}
// } else {
// System.out.println("不符合规定");
// out.print("上传文件不符合规定!");
// }
}
} catch (Exception e) {
out.print("系统异常,请稍后再试!");
e.printStackTrace();
}
}
// @SuppressWarnings("rawtypes")
// public void service(HttpServletRequest request, HttpServletResponse
// response)
// throws ServletException, IOException {
//
// }
}<!-- 引入js和css文件 -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="webuploader/webuploader.min.js"></script>
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"/>配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
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_2_5.xsd">
<servlet>
<servlet-name>UploadServlet</servlet-name>
<servlet-class>com.servlet.UploadServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UploadServlet</servlet-name>
<url-pattern>/uploadServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>引入jar包
commons-fileupload-1.3.jar
commons-io-2.4.jar
点击打开链接