下载文档原格式
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊图片上传的设计与实现二．设计目的运用jsp开发工具和数据库开发一个小型的基于Web系统。
要求提交详细的设计说明书及各步骤所需图表和文档，对复杂的代码段和程序段，应画出程序流程图。
在界面设计中，画出每个窗口的布局。
通过本实践性教学环节，能较好地巩固jsp基本知识，jsp连接数据库实现动态网页。
三．需求分析如今时代，互联网已经进入我们的生活，而互联网上就有图片上传，显示，访问等等功能，有着很大的市场空间。
图片上传必须实现：1.数据库访问模块：利用JavaBean封装对数据库的操作，主要包括连接数据库、添加、删除、查询数据表、关闭连接等功能；2.上传模块：通过上传组件实现图片的上传。
3.显示模块：提供图片信息列表的显示效果。
4.查看模块：点击可以显示图片的内容。
四．总体设计图片上传是指客户端通过Web应用程序将本地图片资源传输到服务器上。
在客户端需要显示图片时，服务器端将图片通过网络以流的形式发送给客户端，然后利用不同的形式显示图片。
图片上传必须要对电子相册有，用户注册，用户注册，添加相片，修改相册，用户反馈，管理用户，如图1所示。
图1 总体设计┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊1.文件上传组件介绍文件上传组件是一些开源组织发布的针对实现文件上传功能的一组class 文件。
jspSmartUpload和Apache的common-fileupload是两个比较流行的文件上传组件。
这两个组件都可以在JSP中实现文件上传。
本节使用Apache的common-fileupload组件实现图片上传。
2.HTML中文件上传组件介绍HTML中<input type="file"/>元素可以创建文件上传组件。
该控件带有一个文本框和浏览按钮。
使用该组件时要注意以下几点。
xheditor +struts2 文件上传（一般情况和支持HTML5拖拽上传）1、准备工作Struts2.2.3导入相关jar包Xheditor1.1.4引入jquery和xheditor的js文件2、效果图a) 使用上传图片按钮进行上次b) 将图片进行拖入上传（支持html5的浏览器）3、相关代码a)单纯的使用普通方式上传:如下图：Struts2中Action中的方法：和传统的上传没什么区别，记得写getter和setterXheditor官方要求：返回内容必需是标准的json字符串，结构可以是如下：{"err":"","msg":"200906030521128703.gif"} 或者{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}} 注：若选择结构2，则url变量是必有注意：1.上传成功时返回的json字符串是：{"err":"","msg":"200906030521128703.gif"}2.err是””，不能省略，3.方式1,msg返回值是上传成功文件的路径；4.方式2，则msg中的url是上传成功文件的路径5.url第一个字符是!表示立即上传，不需要点确定就插入到textarea中Jsp中：【特别应该注意的是：html5Upload:false;如果不设置成false，在支持html5的浏览器（eg:chrome）中，会默认使用html5上传的方式，导致未设置multipart/form-data上传失败，而在不支持html5，例如IE中正常。
在用java开发企业器系统的使用,特别是涉及到与办公相关的软件开发的时候,文件的上传是客户经常要提到的要求.因此有一套很好文件上传的解决办法也能方便大家在这一块的开发.首先申明,该文章是为了自己记录一备以后开发需要的时候,不用手忙脚乱哈哈........现在在国内用的非常多的一般是两种方法解决来解决文件上传.cos.jar + uploadbean.jar + filemover.jar这个是用的非常普遍的,原因是因为他操作方便,是我们不必再去关注,那些文件的输入和输出流,使我们从底层的流中解脱出来.uploadfile,uploadbean,multipartformdatarequest<%@ page contenttype="text/html;charset=gb2312" %><head><title>fbysss uploadbean 示例</title><!--meta http-equiv="content-type" content="text/html; charset=iso-8859-1"--><!--meta http-equiv="content-type" content="text/html; charset=gb2312"--></head><form name="form1" method="post" action="sssupload.jsp" enctype="multipart/form-data"><input name="title" type= "text" value="中文字"><td class="bodystyle">附件</td><td class="bodystyle"> <input name="attach" type="file" id="attach" size="50" > </td><input name="ok" type= "submit" value="提交"></form>2.读取表单页面sssgetdata.jsp<!--//==================================================== ======================//文件：uploadbean上传实例//功能：解决中文乱码，完成文件上传，并提供上传改名解决方案//作者：fbysss//msn:jameslastchina@//==================================================== ======================--><%@ page contenttype="text/html;charset=gbk" %><%@ page language="java" import="com.jspsmart.upload.*"%><%@ page import="java.text.simpledateformat"%><%@ page import="java.io.file"%><%@ page import="java.util.*"%><%@ page import="javazoom.upload.*"%><%@ page import="uploadutilities.filemover"%><head><meta http-equiv="content-type" content="text/html; charset=gb2312"></head><%request.setcharacterencoding("gbk");//设置编码格式，就不用一个个转码了。
1.开发环境：1）eclipse3.2+tomcat5.5；2）创建dynamic web project；3）下载：Commons FileUpload 可以在/commons/fileupload/下载附加的Commons IO 可以在/commons/io/下载将commons-fileupload-1.2.1.jar commons-io-1.4.jar拷贝到WebContent\WEB-INF\\lib 目录；2.前台：<;form method=";post"; enctype=";multipart/form-data"; action=";upload.jsp"; target=";_blank";>;<;%-- 类型enctype用multipart/form-data，这样可以把文件中的数据作为流式数据上传，不管是什么文件类型，均可上传--%>;<;table>;<;tr>;<;td>;作品：<;input type=";file"; name=";upfile"; size=";50";>;<;/td>;<;/tr>;<;tr>;<;td>;作者：<;input type=";text"; name=";author"; size=";22";>;标题：<;input type=";text"; name=";title"; size=";22";>;<;input type=";submit"; name=";submit"; value=";上传";>;<;/td>;<;/tr>;<;tr>;<;td>;备注：上传的jpg图片（显示扩展名为.jpg）大小不能超过4M！<;/td>;<;/tr>; <;/table>;<;/form>;3.后台：1)引用：<;%@ page import=";mons.fileupload.servlet.ServletFileUpload";%>; <;%@ page import=";mons.fileupload.disk.DiskFileItemFactory";%>; <;%@ page import=";mons.fileupload.*";%>;2)代码：String id=null;//上传记录idString destinationfileName=null;//目标文件名String author=null;String title=null;int flag=0;//上传标志String uploadPath =request.getSession().getServletContext().getRealPath(";/";)+";upload/";;//图片上传路径String tempPath = request.getSession().getServletContext().getRealPath(";/";)+";upload/temp/";;//图片临时上传路径StringimagePath=request.getScheme()+";://";+request.getServerName()+";:";+request.getS erverPort()+request.getContextPath()+";/";; // 图片网络相对路径if(!new File(uploadPath).isDirectory()) new File(uploadPath).mkdirs();// 文件夹不存在就自动创建：if(!new File(tempPath).isDirectory())new File(tempPath).mkdirs();try {DiskFileUpload fu = new DiskFileUpload();fu.setSizeMax(4194304);// 设置最大文件尺寸，这里是4MBfu.setSizeThreshold(4096);// 设置缓冲区大小，这里是4kbfu.setRepositoryPath(tempPath);// 设置临时目录：List fileItems = fu.parseRequest(request);// 得到所有的文件：Iterator i = fileItems.iterator();while(i.hasNext()) {// 依次处理表单中每个域FileItem file = (FileItem)i.next();// 获得用户上传时文件名if (file.isFormField()){ //获得文本域表单数据if(";author";.equals(file.getFieldName()))author=codeToString(file.getString());if(";title";.equals(file.getFieldName())) title=codeToString(file.getString()); continue;//非file域不处理}String sourcefileName = file.getName();if( sourcefileName.endsWith(";.jpg";)){//生成上传后的文件名Random rd = new Random();Calendar time = Calendar.getInstance();id=String.valueOf(time.get(Calendar.YEAR))+ String.valueOf(time.get(Calendar.MONTH)+1)+ String.valueOf(time.get(Calendar.DAY_OF_MONTH))+ String.valueOf(time.get(Calendar.HOUR_OF_DAY))+ String.valueOf(time.get(Calendar.MINUTE))+ String.valueOf(time.get(Calendar.SECOND))+ String.valueOf(rd.nextInt(100));destinationfileName=id+";.jpg";;File fTmp=new File(uploadPath+destinationfileName);file.write(fTmp);//out.print(";<;img src=";+imagePath+";upload/";+destinationfileName+";>;";); flag=1;//上传成功标志1}else{out.print(";上传失败，只能上传jpg文件！";); }}//out.print(";<;script>;location.href=\";demo.jsp\";;<;/script>;";);}catch (IOException e) {out.print(";上传失败！";);}out.flush();out.close();4.主要解决点：1)问题：form设置enctype=";multipart/form-data";，request.getParameters函数无法获取表单域值；2)解决方案：if (file.isFormField()){ //获得文本域表单数据if(";author";.equals(file.getFieldName()))author=codeToString(file.getString());if(";title";.equals(file.getFieldName())) title=codeToString(file.getString()); continue;//非file域不处理}。
html+css+js实现拍照预览上传图⽚功能前⾔：我们在做⽹页时经常会需要有上传图⽚的需求，可能是选择图⽚或者拍照上传，如果简单的使⽤<input type="file"/>这种⽅式虽然也能实现功能，但⽤户体验上可能会差了⼀些，所以本⽂记录了使⽤css+js实现图⽚选中后的预览及压缩上传功能，部分带来来源于⽹络，此处做了记录整理。
效果预览：1.创建index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>拍照上传</title><link rel="stylesheet" href="index.css"/><script type='text/javascript' src='index.js' charset='utf-8'></script></head><body><form id="mainForm"><div class="content"><div class="label">⾝份证</div><div class="img-area"><div class="container"><input type="file" id='id-face' name='face' accept="image/*" /><div id='face-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证正⾯照</p></div><img style='width: 100%' id='face-result'/></div><div class="container" style='margin-top:0.5rem;'><input type="file" id='id-back' name='back' accept="image/*" /><div id='back-empty-result'><img style='width:4rem' src="https:///wangheng3751/my-resources/blob/master/images/camera.png?raw=true" alt=""><p>⾝份证反⾯照</p></div><img style='width: 100%' id='back-result'/></div></div></div><div class="btn">提交</div></form></body></html>2.创建index.cssbody{margin: 0}.content{padding:0.5rem;display: flex;align-items: center;border-bottom: 1px #999 solid}.label{width:5rem;}.img-area{flex:1}.container{background-color:#e7e7e7;position: relative;}.container div{text-align: center;padding:0.5rem 0}.container input{opacity:0;filter:alpha(opacity=0);height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 9;}.container p{font-size: 0.9rem;color:#999}.btn{background-color: #4363ab;color: #fff;text-align: center;padding: 0.5rem 1rem;width:80%;border-radius: 0.2rem;margin: 2rem auto;font-weight: 600;font-size: 1.2rem}3.创建index.jswindow.onload=function(){document.getElementById("id-face").addEventListener("change", function(){onFileChange(this,"face-result","face-empty-result")});document.getElementById("id-back").addEventListener("change", function(){onFileChange(this,"back-result","back-empty-result")});document.getElementsByClassName("btn")[0].addEventListener("click", function(){ submit();});};/*** 选中图⽚时的处理* @param {*} fileObj input file元素* @param {*} el //选中后⽤于显⽰图⽚的元素ID* @param {*} btnel //未选中图⽚时显⽰的按钮区域ID*/function onFileChange(fileObj,el,btnel){var windowURL = window.URL || window.webkitURL;var dataURL;var imgObj = document.getElementById(el);document.getElementById(btnel).style.display="none";imgObj.style.display="block";if (fileObj && fileObj.files && fileObj.files[0]) {dataURL = windowURL.createObjectURL(fileObj.files[0]);imgObj.src=dataURL;} else {dataURL = fileObj.value;imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;}}/*** 将图⽚压缩后返回base64格式的数据* @param {*} image img元素* @param {*} width 压缩后图⽚宽度* @param {*} height 压缩后图⽚⾼度* @param {*} qua //图⽚质量1-100*/function compressImageTobase64(image,width,height,qua){var quality = qua ? qua / 100 : 0.8;var canvas = document.createElement("canvas"),ctx = canvas.getContext('2d');var w = image.naturalWidth,h = image.naturalHeight;canvas.width = width||w;canvas.height = height||h;ctx.drawImage(image, 0, 0, w, h, 0, 0, width||w, height||h);var data = canvas.toDataURL("image/jpeg", quality);return data;}//提交function submit(){//1、form提交//document.getElementById("mainForm").submit();//2、压缩后ajax提交var face_data=compressImageTobase64(document.getElementById("face-result"),200,100,90);var back_data=compressImageTobase64(document.getElementById("back-result"),200,100,90);var formData = new FormData();formData.append("face",face_data);formData.append("back",back_data);//需引⼊jQuery$.ajax({url:"/地址",type: 'POST',cache: false,data: formData,timeout:180000,processData: false,contentType: false,success:function(r){},error:function(r){}});}源码：总结以上所述是⼩编给⼤家介绍的html+css+js 实现拍照预览上传图⽚功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
1 JSP文件上传简单实例1、index.html代码：<html><head><title>上传图片</title></head><body><form action="do_upload.jsp" method="post" enctype="multipart/form-data"><input type="file" name="Photo"><input type="submit" value="上传"></form></body></html>2、使用到的函数和类说明File类文件和目录路径名的抽象表示形式，File(parent,child)方法根据parent 抽象路径名和child 路径名字符串创建一个新File实例FileOutputStream文件输出流，InputStream输入流，将输入数据看成一根管道，可以形象的将输入流比喻成管道的入口，而输出流比喻成管道的出口。
read(byte[] b) 从此输入流中将最多 b.length 个字节的数据读入一个字节数组中。
read() 从此输入流中读取一个数据字节。
write(int b) 将指定字节写入此文件输出流，write(byte[] b, int off, int len) 将指定字节数组中从偏移量off 开始的len 个字节写入此文件输出流。
write(byte[] b) 将 b.length 个字节从指定字节数组写入此文件输出流中Random.readLine()逐行读入，Random.seek(int pos)设置到此文件开头测量到的文件指针偏移量，该位置发生下一个读取和写入操作，Random.getFilePointer()返回此文件当前偏移量，Random.readByte()此方法从该文件的当前文件指针开始读取第一个字节。
现在想写个程序向数据库中插入图片路径(或则插入图片也可以)最好是插入图片的路径这样可插入任意大的图片...请高手指点一下思路..感激不尽1.通过显示层向数据库中插入图片2.在界面显示的时候是小图片(缩小过的)3.当点击查看大图片会显示图片(原来的大小)提供给你图片上传和显示的代码吧！希望对你有帮助我在程序代码里贴了向Mysql数据库写入image代码的程序，可是好多人都是Java的初学者，对于这段代码，他们无法将它转换成jsp，所以我在这在写一下用jsp怎样向数据库写入图像文件。
大家先在数据库建这样一张表，我下面的这些代码对任何数据库都通用，只要支持blob类型的只要大家将连接数据库的参数改一下就可以了。
SQL> create table image(id int,content varchar(200),image blob);如果在sqlserver2000的数据库中，可以将blob字段换为image类型，这在SqlServer2000中是新增的。
testimage.html文件内容如下：<HTML><HEAD><TITLE> Image File </TITLE><meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 "></HEAD><FORM METHOD=POST ACTION= "testimage.jsp "><INPUT TYPE= "text " NAME= "content "> <BR><INPUT TYPE= "file " NAME= "image "> <BR><INPUT TYPE= "submit "> </FORM><BODY></BODY></HTML>我们在Form的action里定义了一个动作testimage.jsp，它的内容如下：<%@ page contentType= "text/html;charset=gb2312 "%><%@ page import= "java.sql.* " %><%@ page import= "java.util.* "%><%@ page import= "java.text.* "%><%@ page import= "java.io.* "%><html><%Class.forName( "org.gjt.mm.mysql.Driver ").newInstance();String url= "jdbc:mysql://localhost/mysql?user=root&password=&useUnicode=true&characterEncoding=885 9_1 ";//其中mysql为你数据库的名字，user为你连接数据库的用户，password为你连接数据库用户的密码，可自己改Connection conn= DriverManager.getConnection(url);String content=request.getParameter( "content ");String filename=request.getParameter( "image ");FileInputStream str=new FileInputStream(filename);String sql= "insert into test(id,content,image) values(1,?,?) ";PreparedStatement pstmt=dbconn.conn.prepareStatement(sql);pstmt.setString(1,content);pstmt.setBinaryStream(2,str,str.available());pstmt.execute();out.println( "Success,You Have Insert an Image Successfully ");%>下面我写一个测试image输出的例子看我们上面程序写的对不对，testimageout.jsp的内容如下：<%@ page contentType= "text/html;charset=gb2312 "%><%@ page import= "java.sql.* " %><%@ page import= "java.util.* "%><%@ page import= "java.text.* "%><%@ page import= "java.io.* "%><html><body><%Class.forName( "org.gjt.mm.mysql.Driver ").newInstance();String url= "jdbc:mysql://localhost/mysql?user=root&password=&useUnicode=true&characterEncoding=885 9_1 ";//其中mysql为你数据库的名字，user为你连接数据库的用户，password为你连接数据库用户的密码，可自己改Connection conn= DriverManager.getConnection(url);String sql = "select image from test where id =1 ";Statement stmt=null;ResultSet rs=null;try{stmt=conn.createStatement();rs=stmt.executeQuery(sql);}catch(SQLException e){}while(rs.next()) {res.setContentType( "image/jpeg ");ServletOutputStream sout = response.getOutputStream();InputStream in = rs.getBinaryStream(1);byte b[] = new byte[0x7a120];for(int i = in.read(b); i != -1;){sout.write(b);in.read(b);}sout.flush();sout.close();}}catch(Exception e){System.out.println(e);}%></body></html>你运行这个程序，你就会看到刚才你写入美丽的图片就会显示在你面前。
Java后端SSM框架图⽚上传功能实现⽅法解析⼀、技术概述（1）这个技术是做什么这个技术是上传图⽚到服务器上，并且把地址存在数据库中。
前端调⽤的时候之间通过地址即可调⽤。
（2）学习该技术的原因由于⽤户在写⽇记的时候也可以进⾏图⽚的上传，同时还有⽤户头像的上传。
⼆、技术详述以上传⽤户的头像为例（1）接⼝代码@RequestMapping(value = "user/profilePhoto", produces = "application/json; charset=utf-8")@ResponseBodypublic boolean imageUphold(@RequestParam("photo") MultipartFile file, Long phone) throws IOException {String filePath = ducumentBase;// 保存图⽚的路径// String filePath = "/image";//保存图⽚的路径// 获取原始图⽚的拓展名String originalFilename = file.getOriginalFilename();System.out.println("originalFilename: " + originalFilename);// 新的⽂件名字String newFileName = UUID.randomUUID() + originalFilename;// 封装上传⽂件位置的全路径filePath += "/" + phone;System.out.println("filePath: " + filePath);File targetFile = new File(filePath, newFileName);if (!targetFile.exists()) {targetFile.mkdirs();}// 把本地⽂件上传到封装上传⽂件位置的全路径System.out.println("newFileName: " + newFileName);System.out.println("targetFile: " + targetFile.getName());System.out.println("phone: " + phone);//System.out.println("afterPhone");try {file.transferTo(targetFile);} catch (IllegalStateException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}String allPath=mappingPath + "/" + phone+ "/" + newFileName;System.out.println("存储路径为"+allPath);boolean result=onedayServiceImpl.updProfilePhoto(allPath, phone);//存在数据库中，其中allPath的数据库类型为varchar(1000)return result;}其中的ducumentBase以及mappingPath@Value("${ducument.base}")private String ducumentBase;@Value("${mapping.path}")private String mappingPath;为全局变量配置⽂件ducument.base = D://oneday_upholdmapping.path = /images（2）解释⽤MultipartFile来接收图⽚的⼆进制码，然后使⽤路径+图⽚名+随机数保存图⽚。
首先下载jsmartcom_zh_CN.jar /hijackwust然后将其解压，并放到项目web-inf下面的lib目录下，之后到myeclipse的项目下导入jar包到项目下。
JSP+Mysql+jspsmart=上传图片并生成略缩图片然后记录到数据库原代码代码是由网上找的，然后自己修改了一下将输入的信息以及图片路径保存到数据库。
根目录必须预先有2个文件夹存在1。
pc 文件夹 --> 用来装上传的正本图片2。
pc2 文件夹 --> 用来装缩小的图片希望对大家有用~~jspsmart插件下栽地址/upfile*************.rar将web-inf 这个目录下面的那个jspsmart包,放入你自己的.classess文件夹里面放的位置是：tomcat\网站根目录\WEB-INF\classes\com\jspsmart\uploadupimg.jsp--------------------------------------------------------------------------------------<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上传文件</title></head><body><table border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="45" align="center" valign="middle"><formaction="uploadimage.jsp" method="post" enctype="multipart/form-data" name="form1"><p>上传人姓名(注意上面加红色的代码一定要加，否则获取页面就得不到参数）<input name="name" type="text" id="name" onpaste="return false;" style='border: 1px solid #CCCCCC; font-size:9pt;margin-top:4px;ime-mode:disabled;' size="20"onfocusout="if(isSearch(this.value))this.focus()" /></p><p>请选择上传的图片<input type="file" name="file"><input type="submit" name="Submit" value="上传"></p></form></td></tr></table></body></html>===================================================================== =======uploadimage.jsp--------------------------------------------------------------------------------------<%@ page contentType="text/html;charset=gb2312" language="java" import="java.io.*,java.awt.Image,java.awt.image.*,com.sun.image.codec .jpeg.*,java.sql.*,com.jspsmart.upload.*,java.util.*"%><jsp:useBean id="db" scope="page" class="classmate.DB"/><html><head><title>文件上传处理页面</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head><bord><%SmartUpload mySmartUpload =new SmartUpload();long file_size_max=4000000;String fileName2="",ext="",testvar="";String url="pc/"; //应保证在根目录中有此目录的存在//初始化mySmartUpload.initialize(pageContext);//只允许上载此类文件try {mySmartUpload.setAllowedFilesList("jpg,gif");//上载文件mySmartUpload.upload();} catch (Exception e){%><SCRIPT language=javascript>alert("只允许上传.jpg和.gif类型图片文件");window.location=''upfile.jsp'';</script><%}try{com.jspsmart.upload.File myFile = mySmartUpload.getFiles().getFile(0); if (myFile.isMissing()){%><SCRIPT language=javascript>alert("请先选择要上传的文件");window.location=''upfile.jsp'';</script><%}//String myFileName=myFile.getFileName(); //取得上载的文件的文件名ext= myFile.getFileExt(); //取得后缀名int file_size=myFile.getSize(); //取得文件的大小String str1=mySmartUpload.getRequest().getParameter("name"); //获得上传的人名称！String saveurl="";if(file_size<file_size_max){//更改文件名，取得当前上传时间的毫秒数值Calendar calendar = Calendar.getInstance();String filename = String.valueOf(calendar.getTimeInMillis());saveurl=request.getRealPath("/")+url;saveurl+=filename+"."+ext; //保存路径myFile.saveAs(saveurl,mySmartUpload.SAVE_PHYSICAL);//out.print(filename);//-----------------------上传完成，开始生成缩略图-------------------------java.io.File file = new java.io.File(saveurl); //读入刚才上传的文件String url2="pc2/";String newurl=request.getRealPath("/")+url2+filename+"."+ext; //新的缩略图保存地址String weburl=filename+"."+ext; //保存数据库路径Image src =javax.imageio.ImageIO.read(file); //构造Image 对象float tagsize=100;old_w=src.getWidth(null); //得到源图宽int old_h=src.getHeight(null);int new_w=0;int new_h=0; //得到源图长int tempsize;float tempdouble;if(old_w>old_h){tempdouble=old_w/tagsize;}else{tempdouble=old_h/tagsize;}new_w=Math.round(old_w/tempdouble);new_h=Math.round(old_h/tempdouble);//计算新图长宽BufferedImage tag = newBufferedImage(new_w,new_h,BufferedImage.TYPE_INT_RGB);tag.getGraphics().drawImage(src,0,0,new_w,new_h,null); //绘制缩小后的图FileOutputStream newimage=new FileOutputStream(newurl); //输出到文件流JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(newimage);encoder.encode(tag); //近JPEG编码newimage.close();String sql="insert into pc(name,url,day) values ('"+str1+"','"+ weburl +"',NOW())";db.executeUpdate(sql);%>yes ok!!<%}else{out.print("<SCRIPT language=''javascript''>");out.print("alert(''上传文件大小不能超过"+(file_size_max/1000)+"K'');");out.print("window.location=''upfile.jsp;''"); out.print("</SCRIPT>");}}}catch (Exception e){e.toString();}%></bord></html>。
«博客园首页如何在Jsp上传图片作者：夏夏知来源：博客园发布时间：2012-03-28 11:43 阅读：246 次原文链接[收藏] 1. 新建一个Dynamic Web Project：2. 键入工程名UploadImage：3. 选择Dynamic web module version ：2.54. 点击“Finish”5. 新建两个jsp文件：ImageUpload.jsp和ImageUploadHandler.jsp6. 新建一个类，专门用来处理图片上传新建一个包mytest：在包下新建一个类FileUpload：代码内容：package mytest;import java.awt.image.BufferedImage;import java.io.*;import java.awt.Image;import com.sun.image.codec.jpeg.JPEGCodec;import com.sun.image.codec.jpeg.JPEGImageEncoder; public class FileUpload{public static void uploadImage(String imgFolderPath,String srcFileName,String dstFileName) throws IOException{//判断文件夹image是否存在，若不存在则创建File folder = new File(imgFolderPath);System.out.println("function'uploadFileTest2'-imgFolderPath'"+imgFolderPath);if(!folder.exists()){folder.mkdir();System.out.println("maked a folder!");}File _file = new File(srcFileName); //读入文件Image src = javax.imageio.ImageIO.read(_file); //构造Image对象int wideth=src.getWidth(null); //得到源图宽int height=src.getHeight(null); //得到源图长BufferedImage tag = newBufferedImage(wideth,height,BufferedImage.TYPE_INT_RGB); tag.getGraphics().drawImage(src,0,0,wideth,height,null); FileOutputStream out=new FileOutputStream(dstFileName); //输出到文件流JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out); encoder.encode(tag); //JPEG编码out.close();System.out.println("function 'uploadFileTest2'-status:A Image File Saved!");}}发现报错：找到代码的库Libraries：打开rt.jar所在文件夹：复制这个文件：右键粘贴到WEB_INF\lib下：效果：没再报错。
JSP实现⽂件上传功能本⽂实例为⼤家分享了JSP实现⽂件上传功能的具体代码，供⼤家参考，具体内容如下⼀、准备部分需要fileupload.jar与io.jar包共同完成。
构建完成路径后可继续。
⼆、页⾯部分<form action="UploadServlet" method="post" enctype="multipart/form-data">学号:<input type="text" name="sno"/><br/>姓名:<input type="text" name="sname"/><br/>上传照⽚:<input type="file" name="spicture"/><br/><input type="submit" value="注册"/></form>注意：1.⽂件上传必须要使⽤post，以避免⽤get⽅法时传输总量超过搜索框所能承载最⼤字符数。
2.必须加⼊enctype="multipart.form-data"字段3.⽂件处需⽤“file”三、Servlet部分package webtest;import java.io.File;import java.io.IOException;import java.util.Iterator;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import mons.fileupload.FileItem;import mons.fileupload.FileItemFactory;import mons.fileupload.FileUploadBase;import mons.fileupload.FileUploadException;import mons.fileupload.disk.DiskFileItemFactory;import mons.fileupload.servlet.ServletFileUpload;/*** Servlet implementation class UploadServlet*/@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");// 请求编码处理，传输时response.setCharacterEncoding("utf-8");// 响应编码处理,传输时response.setContentType("utf-8");// 响应编码处理，显⽰时boolean isMultipart = ServletFileUpload.isMultipartContent(request);// 判断是否有entype="multipart/form-data"部分if (isMultipart) {try {FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);//设置上传时的内存缓冲区⼤⼩，超出时写⼊临时⽂件 10kb((DiskFileItemFactory) factory).setSizeThreshold(10240);//单位byte//设置临时⽂件⽬录，防⽌系统空间不⾜((DiskFileItemFactory) factory).setRepository(new File(request.getSession().getServletContext().getRealPath("Uploadtemp")));//动态获取Uploadtemp⽂件夹位于该项⽬中的位置 //控制上传单个⽂件的最⼤值 20kbupload.setSizeMax(20480);//单位byteList<FileItem> items = upload.parseRequest(request);// 解析form中的所有请求字段，并保存在item中Iterator<FileItem> iter = items.iterator();while (iter.hasNext()) {// 解析时⽆顺序，因此需根据名字查找FileItem item = iter.next();if (item.isFormField()) {//⾮⽂件数据String itemName = item.getFieldName();//获取⾮⽂件的范围数据名if (itemName.equals("sno")) {int sno = -1;sno = Integer.parseInt(item.getString("utf-8"));}else if (itemName.equals("sname")) {String sname = null;sname = item.getString("utf-8");}else {System.out.println("其他字段...");}} else {//⽂件上传String fileName = item.getName();//获取⽂件范围数据。
js实现上传图⽚功能前端上传图⽚的原理是：运⽤input type=“file”的标签获取图⽚，再使⽤FileReader这个对象 new ⼀个实例，通过这个对象的readAsDataURL()⽅法读取file标签获取的图⽚并转换为base64格式，完成之后通过ajax之类的⽅式传到后台。
HTML需要⼀个input type="file" 的标签如果需要预览的话可以再加⼀个img标签<div class="warp"><div class="warp-content">点击上传</div><input type="file" id="file" /></div><img src="" />JS⼀、图⽚上传需要检测上传的图⽚是否变化，所以这⾥选择js的onchange事件.先获取input,img的dom元素,在inputtype=‘file'的demo元素下，有⼀个files属性，⾥⾯是我们上传的⽂件信息，打印⼀下，就可以看到上传⽂件的名字，类型等信息。
var file = document.getElementById('file');var image = document.querySelector("img");file.onchange = function() {var fileData = this.files[0];//这是我们上传的⽂件}⼆、然后运⽤ FileReader 这个对象，FileReader主要⽤于将⽂件内容读⼊内存，通过⼀系列异步接⼝，可以在主线程中访问本地⽂件。
使⽤FileReader对象，web应⽤程序可以异步的读取存储在⽤户计算机上的⽂件(或者原始数据缓冲)内容，可以使⽤File对象或者Blob对象来指定所要处理的⽂件或数据。
jsp用户上传头像、上传图片、邮件上传附件代码jsp教程用户上传头像、上传图片、邮件上传附件代码2. 页面表单的实现文件上传表单和普通表单有两个区别1) 需要文件上传字段<input type=”file” />2) form 表单的 enctype 属性需要指定为 multipart/form-data3. 服务器端解析request在 Servlet 中通过 request.getInputStream 获得表单上传数据，会发现数据是分段发送的由于自己写程序解析有难度，我们可以使用Apache 开发的开源组件Commons-fileupload需要导入 jar 包Commons-fileupload 和Commons-io4 . UploadServlet 中处理文件上传程序// 1. 创建工厂类DiskFileItemFactory factory = new DiskFileItemFactory();// 2. 创建FileUpload对象ServletFileUpload upload = new ServletFileUpload(factory);// 3. 判断是否是上传表单boolean b = upload.isMultipartContent(request);if(!b) {// 不是文件上传request.setAttribute("message", "对不起，不是文件上传表单！");request.getRequestDispatcher("/message.jsp").forward(requ est, response);return;}// 是文件上传表单// 4. 解析request，获得FileItem项List<FileItem> fileitems = upload.parseRequest(request); // 5. 遍历集合for(FileItem item : fileitems) {// 判断是不是普通字段if(item.isFormField()) {String name = item.getFieldName();String value = item.getString();// 手工的转换了value = new String(value.getBytes("iso-8859-1"),"utf-8"); System.out.println(name + "=" + value);} else {// 文件上传字段// 获得文件名String filename = item.getName();System.out.println(filename);filename = filename.substring(stIndexOf("")+1);System.out.println(filename);// 创建文件ServletContext context = getServletContext();String dir = context.getRealPath("WEN-INF/upload");File file = new File(dir, filename);file.createNewFile();// 获得流，读取数据写入文件InputStream in = item.getInputStream(); FileOutputStream fos = new FileOutputStream(file);int len;byte[] buffer = new byte[1024];while((len=in.read(buffer))>0)fos.write(buffer,0,len);fos.close();in.close();item.delete(); // 删除临时文件}二、文件上传处理细节1. 中文乱码问题1) 文件名中文乱码问题，解决办法：告诉文件上传组件以什么编码方式来解码文件名ServletUpload.setCharacterEncoding(“utf-8”);request. setCharacterEncoding(“utf-8”);2) 普通字段中文乱码问题fileitem.getString(“utf-8”);2. 临时文件对于大文件不能缓存在内存，需要缓存到硬盘，为了方便管理，我们需要设置临时文件存放目录// 设置临时文件的存放位置factory.setRepository(new File("d:/temp"));文件上传完毕需要删除临时文件，否则会导致服务器存在两份上传文件// 注意，需要先将流进行关闭，否则会导致临时文件无法删除out.close();in.close();// 删除临时文件fileitem.delete();3. 文件存放目录1) 目录需要隐藏，禁止外界直接访问2) 文件名需要保证不重复3) 文件应该分目录存放三、上传进度条1. 实现进度监听需要实现对文件上传进度的监听，需要给FileUpload 对象添加ProgressListener在upload方法中对与进度相关的数据进行处理upload.setProgressListener(new ProgressListener() {long num = 0;public void update(long bytesRead, long contentLength, int items) {long progress = bytesRead*100/contentLength;if(progress==num)return;num = progress;System.out.println("上传进度:" + progress + "%");// request.getSession().setAttribute("progress", progress);}});2. 在 jsp 页面显示进度实验：1) 使用 iframe 发送请求，请求一个Servlet, 在Servlet 中返回响应,发送自增的num此时会发现 iframe 会不停第想Servlet发送请求2) 点击文件上传按钮后，iframe立刻停止刷新，直至上传完毕页面跳转至新页面3）为了观察实验结果，将form 的target 指定为iframe，UploadServlet回送上传完毕的结果4) 出现上述问题的原因，浏览器不支持多线程同时访问服务器只能同时发送一个请求，这样的访问方式为同步访问5) 要在文件上传的同时在iframe中实现进度访问，就需要ie浏览器与服务器进行异步交互此时就需要 XMLHttpRequest 对象在网页特效中可以直接使用XMLHttpRequest 对象与服务器进行异步通信获得XmlHttpRequest 对象的方式有两种ie7以上版本var xhr = null;if(window.XMLHttpRequest)xhr = new XMLHttpRequest();ie7以下版本if(window.ActiveXObject)xhr = new ActiveXObject(“Microsoft.XMLHTTP”);获得对象后需要调用open方法输入请求地址注意请求方式，地址的输入，并且需要设置为true 指定异步访问该地址xhr.open(“get”,”/upload/servlet/UploadServlet”, false)// 调用send 方法发送请求，post方式需要发送消息体，get方式则不用直接传入null值xhr.send(null);// 访问 responseT ext 属性获得 Servlet 回送的数据document.write(xhr.responseText);四、 api方法1. DiskFileItemFactory 对象设置缓冲区大小，字节为单位，默认为10K，一般不用修改factory.setSizeThreshold(1000);设置临时文件存放目录factory.setRepository(file);2. ServletFileUpload 对象判断是否为文件上传表单boolean b = upload.isMultipartContent(request);解析request对象List<FileItem> list = upload.parseRequest(request);设置上传文件的最大值setFileSizeMax(long fileSizeMax)设置上传文件总量的最大值setSizeMax(long sizeMax)设置编码格式setHeaderEncoding(ng.String encoding)注册进度监听器setProgressListener(ProgressListener pListener)3. FileItem 对象获得表单字段的属性名item.getFieldName();获得普通字段的值item.getString(charsetName)获得文件上传字段的文件名item.getName()获得文件上传的流item.getInputStream()文件上传时需要注意的问题：1.如何设置上传文件最大值，并实现超出最大值时给用户一个友好提示upload.setFileSizeMax(1024*10); //设置最大值实现超出最大值时给用户一个友好提示:在程序中捕获FileUploadBase.FileSizeLimitExceededException只要程序抛出这个异常，代表用户上传的文件超出最大值2.上传过程中的乱码问题2.1 普通输入项的乱码item.getString("码表 ")2.2 上传文件名的乱码ServletFileUpload.setHeaderEncoding("码表")3.上传文件的安全性问题为防止用户直接上传文件，危害服务器安全，程序应禁止用户直接访问上传文件（即把上传文件保存在用户无法直接访问的目录）4.防止文件覆盖（UUID）5.文件打散存储（一个目录下面不能存超出1000个文件）用hash算法生成目录保存6.设置监听器，监听文件上传进度upload.setProgressListener(newProgressListener(){public void update(long arg0, longarg1, int arg2) {System.out.println("当前已上传" +arg0 + ",当前处理的文件总大小" + arg1);}});7.临时文件的删除问题处理完每一个文件上传后，一定要记得调用Fileitem.delete方法，删除临时文件8.限定上传文件类型判断上传文件后缀名。
最近做SSH项目碰到一个问题，我在页面上想上传一个图片文件到服务器，但是在上传前希望能在页面上看到图片的预览。
查了一下资料，发现有几种方式可以完成这个功能。
一种是通过javascript来实现这个预览的功能，但是这种方法对浏览器有限制，有的浏览器用此方法无效。
一种是通过ajax实现，还有一种就是通过无刷新页面上传文件到服务器，通过显示服务器上的临时图片文件也可以实现预览的效果。
下面讲的就是最后一种方式。
先看页面文件test.html源码：<!DOCTYPE html><html><head><title>test.html</title><meta name="keywords"content="keyword1,keyword2,keyword3"><meta name="description"content="this is my page"> <meta name="content-type"content="text/html; charset=GB18030"><!--<link rel="stylesheet" type="text/css"href="./styles.css">--></head><body><form action="/ECSystem/imgupload"id="form1" name="form1"encType="multipart/form-data"method="post"target="hidden_frame"><input type="file"id="file"name="file"style="width:450" accept=".jpg, .gif"><INPUT type="submit"value="上传文件"><spanid="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>上面的源码中，要上传图片文件form的属性里必须有encType="multipart/form-data"method="post"z，想要页面不刷新，“target="hidden_frame"”这个是必要的设置，表示页面的action请求刷新到iframe里，不必刷新整个页面。
Struts2+Spring+Hibernate上传文件前段时间，我用struts2.1.6、spring2.5、hibernate3.3做了一个文件上传的demo。
上传是通过struts2自带的组件Commons FileUpload文件上传的。
上传需要的jar包：commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar。
首先了解一下文件上传的原理：表单元素的enctype属性指定的是表单数据的编码方式，该属性有3个值：a 、 application/x-www-form-urlencoded：这是默认编码方式，它只处理表单域里的value属性值，采用这种编码方式的表单会将表单域的值处理成URL编码方式。
b 、 multipart/form-data：这种编码方式的表单会以二进制流的方式来处理表单数据，这种编码方式会把文件域指定文件的内容也封装到请求参数里。
c、 text/plain：这种方式主要适用于直接通过表单发送邮件的方式。
上传文件主要是通过读写二进制流进行操作的。
配置很简单，相信网上有很多这方面的资料，我就不再叙述了(最后面引用了网友的对struts2文件上传的配置)。
主要说明1点：因为spring的bean 默认是单态singleton的。
这样导致一个问题：就是当我们如果上传了一个不允许的类型文件或超出大小范围的文件，之后再上传正常的文件也上传不了。
这时候需要把bean设置为非单态模式:Java代码<!-- 上传action --><bean id="uploadAction" class="com.action.upload.UploadAction"scope="prototype"><property name="busiWlphotodirService"ref="busiWlphotodirService"></property></bean>1. 文件上传的原理：表单元素的enctype属性指定的是表单数据的编码方式，该属性有3个值：1) application/x-www-form-urlencoded：这是默认编码方式，它只处理表单域里的value属性值，采用这种编码方式的表单会将表单域的值处理成URL编码方式。
FormFile上传图片早前我做JSP项目的时候，用过jspSmartUpload这个组件来上传和下载图片，但是现在做的是SSH整合的项目，而struts又提供了一个FormFile类来做文件的上传和下载，如果还用jspSmartUpload来做的话，有点说不过去，于是试着使用FormFile，在把我的代码贴出来之前，先做几个说明。
1、图片的保存图片可以以二进制形式的字段blob保存在数据库（我用的是MYSQL），但是我使用的方法是把图片保存在文件夹，而图片的路径以string形式保存在数据库，下次展现图片的时候，直接在数据库找到路径就行2、struts+hibernate保存图片struts+hibernate整合项目保存图片时候，除了struts的FormFile起主要作用外，hibernate 做了什么？其实hibernate所做的事和保存图片没太大的关系，只是把路径保存了3、struts保存图片除了配置文件外，我只了建3个文件（Action、Form、Jsp）。
下面给出我3个文件完整的代码，代码可以正确运行保存图片，如果把我的代码拷贝到你机器上运行，请看代码的注释文件一Index.Jsp代码如下<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%String path = request.getContextPath();String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServ erPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><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">--></head><body><form action="upload.do" method="post"enctype="multipart/form-data"><input type="file" name="formFile" /><br/><input type="submit" value="添加"/><br/></form></body></html>请注意这行代码<form action="upload.do" method="post"enctype="multipart/form-data"> 后面那个enctype属性是设置表单中有图片要提交，而且值是固定的multipart/form-datapackage com.yourcompany.struts.action;import java.io.FileOutputStream;import java.io.InputStream;import java.io.OutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import org.apache.struts.upload.FormFile;import com.yourcompany.struts.form.UploadForm;public class UploadAction extends Action {public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {UploadForm uploadForm=(UploadForm)form; //表单转换FormFile formFile= uploadForm.getFormFile(); //struts把图片文件封装在uploadForm的属性里面/***下面是构建文件以什么路径保存：（关键部分）*getServlet().getServletContext().getRealPath("/images")是取得tomcat中项目路径下images文件夹的根路径，把我的代码拷到你项目里时候，要到你项目根路径里建images文件夹*在我这里是C:\Tomcat 6.0\webapps\imgUpload\images*最后path值就是C:\Tomcat 6.0\webapps\imgUpload\images\yyf.jpg。
JS实现上传图⽚的三种⽅法并实现预览图⽚功能在常见的⽤户注册页⾯，需要⽤户在本地选择⼀张图⽚作为头像，并同时预览。
常见的思路有两种：⼀是将图⽚上传⾄服务器的临时⽂件夹中，并返回该图⽚的url，然后渲染在html页⾯；另⼀种思路是，直接在本地内存中预览图⽚，⽤户确认提交后再上传⾄服务器保存。
这两种⽅法各有利弊，⽅法⼀很明显，浪费流量和服务器资源；⽅法⼆则加重了浏览器的负担，并且对浏览器的兼容性要求更⾼（在某些低版本中的IE浏览器不⽀持）。
以下是实现上述思路的⽅法：1. 模板⽂件<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="margin-left: 30px; margin-top: 30px"><form action="">{% csrf_token %}<h3>⽤户注册</h3><p>⽤户名：<input type="text" name="userName"></p><p>密码：<input type="password" name="password"></p><p>邮箱：<input type="text" name="email"></p><input id="avatar" type="text" value="/static/images/sample.png" name="avatar" style="width: 400px"> {# 实际应⽤中要将该input标签隐藏，display:none; #} <p><input type="submit" value="注册"></p></form><div style="position: absolute; top: 85px; left: 300px;"><input id="avatarSlect" type="file" style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;"><img id="avatarPreview" src="/static/images/sample.png" title="点击更换图⽚" style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px"> </div></div></body><script src="/static/jquery-3.2.1.js"></script><script>$(function () {bindAvatar();});function bindAvatar() {if(window.URL.createObjectURL){bindAvatar3();}else if(window.FileReader){bindAvatar2();}else {bindAvatar1();}}/*Ajax上传⾄后台并返回图⽚的url*/function bindAvatar1() {$("#avatarSlect").change(function () {var csrf = $("input[name='csrfmiddlewaretoken']").val();var formData=new FormData();formData.append("csrfmiddlewaretoken",csrf);formData.append('avatar', $("#avatarSlect")[0].files[0]); /*获取上传的图⽚对象*/$.ajax({url: '/upload_avatar/',type: 'POST',data: formData,contentType: false,processData: false,success: function (args) {console.log(args); /*服务器端的图⽚地址*/$("#avatarPreview").attr('src','/'+args); /*预览图⽚*/$("#avatar").val('/'+args); /*将服务端的图⽚url赋值给form表单的隐藏input标签*/}})})}/*window.FileReader本地预览*/function bindAvatar2() {console.log(2);$("#avatarSlect").change(function () {var obj=$("#avatarSlect")[0].files[0];var fr=new FileReader();fr.onload=function () {$("#avatarPreview").attr('src',this.result);console.log(this.result);$("#avatar").val(this.result);};fr.readAsDataURL(obj);})}/*window.URL.createObjectURL本地预览*/function bindAvatar3() {console.log(3);$("#avatarSlect").change(function () {var obj=$("#avatarSlect")[0].files[0];var wuc=window.URL.createObjectURL(obj);$("#avatarPreview").attr('src',wuc);$("#avatar").val(wuc);{# $("#avatarPreview").load(function () {#} /*当图⽚加载后释放内存空间，但在jQuery3.2.1中会报错。
jspsmart的使用
上传
// 新建一个SmartUpload对象
SmartUpload su = new SmartUpload();
// 上传初始化
su.initialize(pageContext);
// 限制每个上传文件的最大长度。
su.setMaxFileSize(10000);
// 限制总上传数据的长度。
su.setTotalMaxFileSize(20000);
// 设定允许上传的文件（通过扩展名限制）,仅允许doc,txt文件。
su.setAllowedFilesList("doc,txt");
// 设定禁止上传的文件（通过扩展名限制）,禁止上传带有exe,bat,
//jsp,htm,html扩展名的文件和没有扩展名的文件。
su.setDeniedFilesList("exe,bat,jsp,htm,html,,");
// 上传文件
su.upload();
// 将上传文件全部保存到指定目录
int count = su.save("/upload");
下载
// 新建一个SmartUpload对象
SmartUpload su = new SmartUpload();
// 初始化
su.initialize(pageContext);
// 设定contentDisposition为null以禁止浏览器自动打开文件，
//保证点击链接后是下载文件。
若不设定，则下载的文件扩展名为
//doc时，浏览器将自动用word打开它。
扩展名为pdf时，
//浏览器将用acrobat打开。
su.setContentDisposition(null);
// 下载文件
su.downloadFile("/upload/test.doc");
应用实例：
uploadimage.jsp
<%@ page contentType="text/html;charset=gb2312" language="java" import="java.io.*,java.awt.Image,java.awt.image.*,com.sun.image.codec.jpeg.*,java.sql.*,com.js psmart.upload.*,java.util.*"%>
<%
SmartUpload mySmartUpload =new SmartUpload();
long file_size_max=4000000;
String fileName2="",ext="",testvar="";
String url="Admin/upload/"; //应保证在根目录中有此目录的存在
//初始化
mySmartUpload.initialize(pageContext);
//只允许上载此类文件
try {
mySmartUpload.setAllowedFilesList("jpg,gif");
//上载文件
mySmartUpload.upload();
} catch (Exception e){
%>
<SCRIPT language=javascript>
alert("只允许上传.jpg和.gif类型图片文件");
window.location='upload.htm';
</script>
<%
}
try{
com.jspsmart.upload.File myFile = mySmartUpload.getFiles().getFile(0);
if (myFile.isMissing()){%>
<SCRIPT language=javascript>
alert("请先选择要上传的文件");
window.location='upload.htm';
</script>
<%}
else{
//String myFileName=myFile.getFileName(); //取得上载的文件的文件名ext= myFile.getFileExt(); //取得后缀名
int file_size=myFile.getSize(); //取得文件的大小
String saveurl="";
if(file_size<file_size_max){
//更改文件名，取得当前上传时间的毫秒数值
Calendar calendar = Calendar.getInstance();
String filename = String.valueOf(calendar.getTimeInMillis());
saveurl=application.getRealPath("/")+url;
saveurl+=filename+"."+ext; //保存路径
myFile.saveAs(saveurl,SmartUpload.SA VE_PHYSICAL);
out.print(saveurl);
String ret = "parent.HtmlEdit.focus();";
ret += "var range = parent.HtmlEdit.document.selection.createRange();" ;
ret += "range.pasteHTML('<img src=\"" + request.getContextPath() + "/admin/upload/" + filename + "." + ext + "\">');" ;
ret += "alert('上传成功！');";
ret += "window.location='upload.htm';";
out.print("<script language=javascript>" + ret + "</script>");
}
}
}catch (Exception e){
out.print(e.toString());
}
%>
upload.htm
<html>
<head>
<title>请选择上传的图片</title>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="45" align="center" valign="middle"><form action="uploadimage.jsp" method="post" enctype="multipart/form-data" name="form1">
<input type="file" name="file">
<input type="submit" name="Submit" value="上传">
</form></td>
</tr>
</table>
</body>
</html>。
