文件上传Demo
用jQueryFileUpload做的上传控件demo,支持同页面多个上传按钮
⽤jQueryFileUpload做的上传控件demo,⽀持同页⾯多个上传按钮需求有这么⼀个需求,⼀个form有多个⽂件要上传,但⼜不是传统的图⽚批量上传那种,是类似下图这种需求,⼀开始是⽤的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的⽅法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个⼩巧的玩意,jQuery File Upload。
本⽂包含了upload的js实现,html的分析,css的实现等内容,⽂章末尾有git地址最简运⾏时官⽹下载的demo有N多js⽂件,⼀⼤堆js⽂件中只有⼏个才是必要的,其他的⽂件都是⼀些⽤不到的功能,只有在你需要的时候才需要引⽤。
<script src="/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script src="JS/jquery/jquery.iframe-transport.js"></script><script src="JS/jquery/jquery.ui.widget.js"></script><script src="JS/jquery/jquery.xdr-transport.js"></script><script src="JS/jquery/jquery.fileupload.js"></script>其中iframe那个⽂件是为了进⾏iframe上传,ui⽂件是能选完⽂件⾃动上传的必要⽂件,xdr那个是在ie下才需要的,最后⼀个⽂件是主体后台代码新建⼀个ashx的⽂件,这⾥建⽴⼀个uploadHandler.ashx,然后写⼊如下代码,⽤于保存。
文件上传和下载总结
文件上传和下载总结文件上传和下载:在java中文件的上传主要有fileupload.jar,cos,mulitpartRequestFile这个控件实现文件上传到服务器。
其实简单的原理就是先上传的项目中,然后上传到服务器上面去。
COS文件的上传首先页面:File.jsp<html><head><title>文件上传</title><link href="css/style.css" rel="stylesheet" type="text/css"> <script src="js/icommon.js"></script><%String path =request.getParameter("path")==null?"":request.getParameter("path"); String filename = "";if(path!=""){filename = path.substring(path.indexOf("/")+1,path.indexOf(".")); }%><script type="text/javascript">function check(){var fileName=document.getElementById("files").value;}</script></head><body><div class="page_title">PDC系统 >上传附件</div><div class="button_bar"><button class="common_button" onclick="alert('欢迎使用')">帮助</button><button class="common_button"onclick="javascript:history.go(-1);">返回</button><input type="reset" value="取消" class="common_button"> </div><form name="form1" method="post" enctype="multipart/form-data"action="upload.jsp"><p><input id="files" name="files" type="file"><input type="submit" name="Submit" value="上传文件"></p></form >Upload.jsp<%@page import="java.io.*"%><%@page import="java.util.*"%><%@page import="com.oreilly.servlet.MultipartRequest"%><%@page contentType="text/html; charset=gb2312" %><%//文件上传后,保存在\\gf_s\\uploadString s1=new File(new File(newFile(application.getRealPath(request.getRequestURI())).getParent()).g etParent()).getParent();String saveDirectory =s1+"\\UploadDemo\\upload";//每个文件最大5m,最多3个文件,所以...int maxPostSize =1 * 5 * 1024 * 1024 ;//response的编码为"gb2312",同时采用缺省的文件名冲突解决策略,实现上传MultipartRequest multi =new MultipartRequest(request, saveDirectory, maxPostSize,"gb2312");//输出反馈信息Enumeration files = multi.getFileNames();while (files.hasMoreElements()) {System.err.println("上传成功");String name = (String)files.nextElement();File f = multi.getFile(name);if(f==null){response.sendRedirect("do.jsp");break;}else{request.getSession().setAttribute("fileName",f.getPath());String fileName = multi.getFilesystemName(name);String lastFileName= "upload/" + fileName;out.println("上传的文件:"+lastFileName);out.println("<hr>");out.println("上传的文件:"+lastFileName);out.println("<script Language=Javascript>alert('上传成功!');</script>");response.sendRedirect("feedback.html?question=updateFile");}}%><meta http-equiv="Content-Type" content="text/html; charset=gb2312">下载:页面:<table class="data_list_table"><tr><th>编号</th><th align="left">附件名</th><th align="left">提交时间</th><th align="left">操作</th></tr><logic:notEmpty name="fileList"><logic:iterate id="reports" name="fileList"><tr><td align="left">${reports.rtManagerId }</td><td align="left">${reports.rtName }</td><td align="left">${reports.rtCreatTime }</td><td width="30%" style="background-color:#eeeeff;"><ahref="feedback.html?question=todown&id=${reports.rtManagerId }">下载</a></td></tr></logic:iterate></logic:notEmpty><logic:empty name="fileList"><tr><td colspan="7" align="center">没有记录</td></tr></logic:empty></table>Action :public ActionForward todown(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException{request.setCharacterEncoding("GB2312");int id=0;try{id=Integer.parseInt(request.getParameter("id"));}catch(Exception e){}ReportManager fb=reportManagerBiz.getReportManagerByID(id);Feedback feedback=this.feedbackBiz.getOne(fb.getFeedbackId());String filename=fb.getRtName();if(request.getHeader("User-Agent").toLowerCase().indexOf("firefox") > 0)filename = new String(filename.getBytes("GB2312"),"ISO8859-1");// firefox浏览器else if(request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0) filename = URLEncoder.encode(filename, "UTF-8");// IE浏览器response.reset();// 如果有换行,对于文本文件没有什么问题,但是对于其它格response.setContentType("application/x-msdownload;charset=GBK");System.out.print(response.getContentType());response.setCharacterEncoding("UTF-8");//乱码问题response.setHeader("Content-Disposition", "attachment;filename=" +new String(filename.getBytes("UTF-8"),"GBK"));// response.setContentType("application/octet-stream");// response.setHeader("Content-Disposition","attachment;filename=\""// + filename + "\"");// response.setHeader("Connection", "close");ServletOutputStream sos = response.getOutputStream();FileInputStream fis = null;File d = new File("D:/"+feedback.getId()+"/"+fb.getRtName()); // File d=new File(fb.getRtPath());try{if (d.exists()){//路径fis = newFileInputStream("D:/"+feedback.getId()+"/"+fb.getRtName());// fis = new FileInputStream(fb.getRtPath());byte b[] = new byte[1000];int j;//读取while ((j = fis.read(b)) != -1){try{//写入sos.write(b, 0, j);}catch (IOException exp) {}}}fis.close();sos.flush();sos.close();}catch (Exception e) {String mailOK="下载失败";request.getSession().setAttribute("mailOK", mailOK);}return null;}。
文件 上传 方法
文件上传方法文件上传是指将本地计算机中的文件上传到远程服务器存储的过程。
在实际应用中,文件上传的场景及要求多种多样,需要考虑安全性、速度、稳定性等因素。
本文将从文件上传的工作原理、常用的文件上传技术以及优化方法进行详细阐述。
一、文件上传的工作原理通常情况下,文件上传可以分为浏览器端和服务端两个环节。
具体操作如下:1.浏览器端用户在浏览器页面上选择一个文件上传,浏览器通过input标签构造包含文件内容的FormData对象。
FormData对象可以用来构造XMLHttpRequest对象进行AJAX传输。
2.服务端用户上传的文件最终会被存储在服务端。
服务端会从请求中获取到文件,在对文件进行处理后再保存到磁盘或其他网络存储设备上。
二、常用的文件上传技术1.表单上传表单上传是最基本的文件上传方式,通常使用form标签和input type="file"标签实现。
用户选择文件后,表单会将文件内容以二进制流的形式发送到服务端。
表单上传的优点是简单易用,缺点是不支持进度条展示,也无法进行二次开发。
2.iframe上传iframe上传是一种比较古老的文件上传方式,通常采用window.frames[name]方式进行访问。
用户选择文件后,表单会被嵌套在一个隐藏的iframe页面内,通过iframe与服务端进行交互。
iframe上传的优点是可以进行二次开发,缺点是无法显示进度条,且由于采用Iframe进行交互,存在各种兼容性问题。
3.XMLHttpRequest上传XMLHttpRequest上传是目前比较流行的一种文件上传方式,也可以称之为AJAX上传。
用户选择文件后,文件内容以二进制流的形式被发送到服务端。
由于JavaScript本身具有很强的动态性,因此XMLHttpRequest上传具有较好的兼容性和浏览器支持,也可以进行一些进度条处理、出错处理以及二次开发等。
4.WebSocket上传WebSocket上传是将WebSocket协议应用在文件上传上的一种方式。
文件上传----常见的几种形式
⽂件上传----常见的⼏种形式
1遇到⽂件上传先抓包,尝试修改后缀⼤⼩写,关键字替换为空1.pphphp,修改Content-Type加上gif⽂件头信息gif89a 和00截断.
基本修改以下3处还有截断
还有⼀种是在路径处截断
2.htaccess⽂件上传拿shell
1.创建htaccess⽂件,编辑内容为:
SetHandler application/x-httpd-php
然后再上传shell.jpg的⽊马, 这样shell.jpg就可解析为php⽂件。
2.编辑内容为:
<Files demo.jpg> ForceType application/x-httpd-php SetHandler application/x-httpd-php </Files>指定⽂件名的⽂件,才能被当做PHP解析.
----------例⼦
先上传图⽚马
然后上传写好的.htaccess ⽂件
上传123.htaccess ⽤burpsuit 抓包改为
.htaccess
成功解析
<FilesMatch "yi.jpg"> //这⾥填上传的jpg ⽂件名,会当成php 解析 SetHandler application/x-httpd-php
</FilesMatch >
3.解析漏洞。
Java通用文件上传功能实现
Java通用文件上传功能实现一、文件上传流程说明:Java文件上传功能是指在Java开发中,实现文件上传的功能,可以用于各种场景,如网站上传图片、文件管理系统等。
以下是一种常见的实现方式:1、创建一个包含文件上传功能的表单页面,用户可以选择要上传的文件并提交表单。
2、在后端Java代码中,接收表单提交的文件数据。
可以使用Apache Commons FileUpload库或Spring框架提供的MultipartFile类来处理文件上传。
3、对接收到的文件进行处理,可以将文件保存到服务器的指定位置,或者将文件存储到数据库中。
4、返回上传成功或失败的信息给用户。
二、代码实现,方案一:在Java中实现文件上传功能可以通过以下步骤来完成:1、创建一个HTML表单,用于选择要上传的文件:<form action="upload"method="post" enctype="multipart/form-data"> <input type="file" name="file" /><input type="submit" value="Upload" /></form>2、创建一个Servlet或者Controller来处理文件上传请求:@WebServlet("/upload")public class UploadServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) {// 获取上传的文件Part filePart = request.getPart("file");String fileName = filePart.getSubmittedFileName();// 指定上传文件的保存路径String savePath = "C:/uploads/" + fileName;// 将文件保存到指定路径filePart.write(savePath);// 返回上传成功的消息response.getWriter().println("File uploaded successfully!");}}3、配置web.xml(如果使用传统的Servlet方式)或者使用注解(如果使用Servlet 3.0+)来映射Servlet。
elementui 的upload的方法
上传文件是Web开发中常见的需求之一,而ElementUI是一套为开发者提供友好的UI组件库,其中自带了一个upload组件,可以方便地实现文件上传功能。
在ElementUI中,upload组件提供了多种方法来实现文件的上传,使得开发者可以根据自己的需求来选择最合适的方式来上传文件。
以下将详细介绍upload组件的方法和使用。
1. upload 文件上传的基本使用在ElementUI中,我们可以通过简单地引入upload组件来实现文件的上传。
以下是使用示例:```<el-uploadclass="upload-demo"action="网络协议s://jsonplaceholder.typicode/posts/":on-preview="handlePreview":on-remove="handleRemove":on-success="handleSuccess":on-error="handleError":before-upload="beforeUpload":on-exceed="handleExceed":limit=3:file-list="fileList"><div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div></el-upload>```上面的示例中,我们可以看到el-upload组件的基本使用方式。
我们需要设置action属性为文件上传的位置区域,然后可以设置一些事件监听器来处理文件上传的过程,比如on-preview用于处理文件预览,on-remove用于处理文件移除,on-success用于处理文件上传成功的回调,on-error用于处理文件上传失败的回调,before-upload用于在上传之前进行一些处理,on-exceed用于处理文件超出限制的情况,limit可以限制上传文件的数量,file-list用于显示已经上传的文件列表。
文件上传组件_Apache_Commons_FileUpload_应用指南
Apache Commons FileUpload应用指南前言几乎每一个Web应用中都需要为用户提供文件上传的功能,例如,QQ空间、各种博客的相册、论坛的附件、个人头像等。
对文件上传功能,在浏览器端提供了较好的支持,只要将FORM表单的enctype属性设置为“multipart/form-data”,method属性设置为“post”即可;但在Web服务器端获取通过浏览器上传的文件数据(二进制输入流),需要进行复杂的编程处理。
为了简化文件上传的的处理,一些公司和组织专门开发了文件上传组件。
其中,Apache文件上传组件得到了广泛的传播和应用。
我们将详细介绍如何使用Apache文件上传组件进行文件上传实现。
1 获取上传组件使用Apache Commons Fileupload 文件上传组件需要两个类库文件:1)commons-fileupload-1.2.2.jar2)commons-io-1.4.jar第一步:下载commons-fileupload-1.2.2.jar。
在浏览器中输入/fileupload/打开Apache Commons Fileupload 文件上传组件主页面,在Downloading 栏目中点击任意一个版本号后面的“here”超级链接,可以打开当前最新版本的 Apache Commons Fileupload 文件上传组件下载页面,(2010-08-28为止的可下载最新版本是1.2.2版)。
也可以直接输入/fileupload/download_fileupload.cgi打开最新版本下载页面。
主页面当前最新版本的下载页面在当前最新版本的下载页面,提供二进制可执行版本(Binares)和源程序版本(Source)两种文件的下载,每一种文件都有两种压缩格式:1).zip,适用windows 操作系统2).tar.gz,适用linux 和unix 操作系统我们这里选择下载commons-fileupload-1.2.2-bin.zip 文件。
Struts2实现文件上传
Struts2实现文件上传文件上传,说白了就是个文件复制的过程,文件复制需要什么呢,只需要有源文件和目标地址即可,·用main方法实现的文件复制代码如下:package cn.oracle.upload;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.InputStream;import java.io.OutputStream;public class FileUploadDemo {public static void main(String[] args) throws Exception{File input=new File(args[0]); 参数args[0]是你运行Java程序的时候输入的参数,下面有详细解释:if(!input.exists()){System.out.println("源文件不存在!");System.exit(0);}File output=new File(args[1]);if(!output.getParentFile().exists()){output.mkdirs();}OutputStream outputFile=new FileOutputStream(output);InputStream inputFile=new FileInputStream(input);byte data[]=new byte[1024];int temp=0;while((temp=inputFile.read(data))!=-1){outputFile.write(data, 0, temp);}outputFile.close();inputFile.close();}}例如上图中的Java 运行的程序类名称后面就是参数第一个是d:\1.txt 是一个参数args[0],d:\2.txt是第二个参数args[1]C:\Users\congz_000>java FileUploadDemo d:\1.txt d:\2.txt上面的代码就实现了文件的复制,其实在struts2之中的实现原理是一样的,也就是两个File对象,两个字节流对象,然后调用相应的方法执行的复制而已;在struts2之中实现的复制需要一个表单,将此表单的内容提交到一个action之中,然后struts负责参数的接受处理,赋给相应的变量,编写一个文件复制的方法即可完成文件上传;·给项目添加struts2开发支持,我们用自动配置的方式,用myeclipse帮我们完成,不需要做过多的配置,一路next即可;·新建一个upload.jsp页面<%@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><title>文件上传</title></head><body><form action="FileUpload!upload.action"method="post"enctype="multipart/form-data"><input type="file"name="photo"id="photo"> 这个name属性一定要和action之中的File 类对象的名称一致;<input type="submit"value="上传"></form></body></html>·一个用来表示上传成功的页面<%@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><title>文件上传</title></head><body><h1>上传成功</h1></body></html>·一个用来表示上传失败的页面<%@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><title>文件上传</title></head><body><h2>上传失败!</h2></body></html>·编写相应的上传需要的action FileUploadActionpackage cn.oracle.action;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.InputStream;import java.io.OutputStream;import java.util.UUID;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;@SuppressWarnings("serial")public class FileUploadAction extends ActionSupport { private File photo;private String photoFileName;public void setPhotoFileName(String photoFileName) { this.photoFileName = photoFileName;}public void setPhoto(File photo) {this.photo = photo;}public String upload(){System.out.println("************");String filePath =ServletActionContext.getServletContext().getRealPath("/upload")+ File.separator+ UUID.randomUUID()+ "."+ this.photoFileName.substring(this.photoFileName.lastIndexOf(".") + 1);if(this.saveFile(this.photo, filePath)){return"success";}return"failure";}public boolean saveFile(File input, String outputFilePath) { File output = new File(outputFilePath);if (!output.getParentFile().exists()) {output.mkdirs();}InputStream inputFile = null;try {inputFile = new FileInputStream(input);} catch (FileNotFoundException e) {e.printStackTrace();}OutputStream outputFile = null;try {outputFile = new FileOutputStream(output);} catch (FileNotFoundException e) {e.printStackTrace();}byte[] data = new byte[1024];int temp = 0;try {while ((temp = inputFile.read(data)) != -1) {outputFile.write(data, 0, temp);}if (inputFile != null) {inputFile.close();}if (outputFile != null) {outputFile.close();}return true;} catch (Exception e) {e.printStackTrace();}return false;}}·配置Struts.xml文件<?xml version="1.0"encoding="UTF-8"?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN""/dtds/struts-2.1.dtd"><struts><package name="main"namespace="/"extends="struts-default"><action name="FileUpload"class="cn.oracle.action.FileUploadAction"> <result name="success">/success.jsp</result><result name="failure">/failure.jsp</result></action></package></struts>·我们还需要配置一个Struts.properties的资源文件,在src之中,设置上传的限制和编码;struts.i18n.encoding=UTF-8struts.multipart.saveDir=/tempstruts.multipart.maxSize=2097152000·我们把项目部署到tomcat或者weblogic之中,按照你的连接访问,整个上传到此就完成了,这是个最简单的上传,没有做任何的修饰,有些上传做的很华丽的,那些都是div+css的功劳,如果你想要那种特效的话,需要研究下css 这个很不错的;。
文件上传下载原理:http协议分析及实现
⽂件上传下载原理:http协议分析及实现 我们现在⽤得⾮常多互联⽹下载⽂件,⾮常直观。
有⼀个下载按钮,然后我点击了下载,然后⽂件慢慢就下载到本地了。
就好像是⼀个复制的过程。
⽽既然是互联⽹,那么必然会是使⽤⽹络进⾏传输的。
那么到底是怎样传输的呢? 当然,下载⽂件有两种⽅式:⼀是直接针对某个⽂件资源进⾏下载,⽆需应⽤开发代码;⼆是应⽤代码临时⽣成需要的内容⽂件,然后输出给到下载端。
其中,直接下载资源⽂件的场景给我们感觉是下载就是针对这个⽂件本⾝的⼀个操作,和复制⼀样没有什么疑义。
⽽由应⽤代码进⾏下载⽂件时,⼜当如何处理呢?1. 上传下载⽂件demo 在⽹上你可以⾮常容易地找到相应的模板代码,然后处理掉。
基本的样⼦就是设置⼏个头信息,然后将数据写⼊到response中。
demo1. 服务端接收⽂件上传,并同时输出⽂件到客户端@PostMapping("fileUpDownTest")@ResponseBodypublic Object fileUpDownTest(@ModelAttribute EncSingleDocFileReqModel reqModel,MultipartFile file,HttpServletResponse response) {// 做两件事:1. 接收上传的⽂件; 2. 将⽂件下载给到上传端;// 即向双向⽂件的传输,下载的⽂件可以是你处理之后的任意⽂件。
String tmpPath = saveMultipartToLocalFile(file);outputEncFileStream(tmpPath, response);System.out.println("path:" + tmpPath);return null;}/*** 保存⽂件到本地路径** @param file ⽂件流* @return本地存储路径*/private String saveMultipartToLocalFile(MultipartFile file) {try (InputStream inputStream = file.getInputStream()){// 往临时⽬录写⽂件String fileSuffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.'));File tmpFile = File.createTempFile(file.getName(), ".tmp" + fileSuffix);FileUtils.copyInputStreamToFile(inputStream, tmpFile);return tmpFile.getCanonicalPath();}catch (Exception e){log.error("【加密⽂件】⽂件流处理失败:" + file.getName(), e);throw new EncryptSysException("0011110", "⽂件接收失败");}}/*** 输出⽂件流数据** @param encFileLocalPath ⽂件所在路径* @param response servlet io 流*/private void outputEncFileStream(String encFileLocalPath, HttpServletResponse response) {File outFile = new File(encFileLocalPath);OutputStream os = null;InputStream inputStream = null;try {response.reset();response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");// response.setHeader("Content-Length", file.getContentLength()+"");String outputFileName = encFileLocalPath.substring(stIndexOf('/') + 1);response.setHeader("Content-Disposition", String.format("attachment; filename=%s", URLEncoder.encode(outputFileName, "UTF-8")));response.setContentType("application/octet-stream; charset=utf-8");response.setHeader("Pragma", "no-cache");response.setHeader("Expires", "0");inputStream = new FileInputStream(outFile);//写⼊信息os = CommonUtil.readInputStream(inputStream, response.getOutputStream());}catch (Exception re) {log.error("输出⽂件流失败,", re);throw new RuntimeException("0011113: 输出加密后的⽂件失败");}finally {os.flush();os.close();}catch (IOException e) {log.error("输出流⽂件失败", e);}}if(inputStream != null) {try {inputStream.close();}catch (IOException e) {log.error("加密⽂件输⼊流关闭失败", e);}}}} 我们在做开发时,⾯对的仅仅是 Request, Response 这种什么都有对象,直接问其要相关信息即可。
前端开发中的文件上传和下载实现方法
前端开发中的文件上传和下载实现方法在现代互联网时代,文件的上传和下载是我们经常要面对的需求。
特别是在前端开发中,如何实现文件上传和下载功能是一个相当重要的课题。
本文将介绍一些前端开发中常用的文件上传和下载的实现方法。
一、文件上传的实现方法1. 表单提交方式最传统的文件上传方法就是利用表单提交。
我们可以通过创建一个包含文件输入框的表单,然后用户选择文件后,点击提交按钮将文件上传到服务器。
在HTML中,可以使用input元素的type属性为file来创建文件输入框,然后将表单的enctype属性设置为multipart/form-data,这样可以保证文件能够正确上传到服务器。
在服务端,可以使用各种后端技术来处理上传文件,如Java的Servlet、PHP、Node.js等。
2. AJAX方式使用AJAX方式实现文件上传可以实现无刷新上传,提升用户体验。
传统的表单提交会导致页面的刷新,而使用AJAX可以在不刷新页面的情况下异步上传文件。
在实现上,可以使用FormData对象来传输文件数据,并通过XMLHttpRequest 对象发送请求。
同时,通过监听上传进度事件,可以实时显示文件上传的进度。
3. 第三方库除了自己实现文件上传逻辑外,也可以使用第三方库来简化文件上传的过程。
一些流行的前端框架和库,如jQuery、React等都提供了丰富的插件或组件来方便实现文件上传功能。
这些插件和组件一般都有了良好的兼容性和一套完整的API,可以大大简化文件上传的开发流程。
二、文件下载的实现方法1. 普通链接下载最简单的文件下载方式就是提供一个普通链接,让用户点击链接后即可下载文件。
在HTML中,可以使用a标签的href属性指向文件的URL,然后点击该链接即可完成文件下载。
不过需要注意的是,在特定情况下,如需要下载大文件时,直接使用普通链接下载可能会导致浏览器崩溃或内存耗尽的问题。
2. Blob对象下载为了解决上述问题,可以使用Blob对象来进行文件下载。
大文件上传第二弹(分片、秒传、断点续传)
⼤⽂件上传第⼆弹(分⽚、秒传、断点续传)关键部分前端⽤file.slice()分块前端⽤FileReader获取每⼀分块的md5值后端⽤MultipartFile接受分块⽂件后端⽤FileOutputStream拼装分块⽂件话不多说,直接上代码,我想这是你们最喜欢的⼯程截图<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";String clientCookie = request.getHeader("Cookie");%><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>up6.2-MySQL演⽰页⾯</title><link href="js/up6.css"type="text/css"rel="Stylesheet"/><script type="text/javascript"src="js/jquery-1.4.min.js"></script><script type="text/javascript"src="js/json2.min.js"charset="utf-8"></script><script type="text/javascript"src="js/up6.config.js"charset="utf-8"></script><script type="text/javascript"src="js/up6.app.js"charset="utf-8"></script><script type="text/javascript"src="js/up6.edge.js"charset="utf-8"></script><script type="text/javascript"src="js/up6.file.js"charset="utf-8"></script><script type="text/javascript"src="js/up6.folder.js"charset="utf-8"></script><script type="text/javascript"src="js/up6.js"charset="utf-8"></script><script language="javascript"type="text/javascript">var cbMgr = new HttpUploaderMgr();cbMgr.event.md5Complete = function (obj, md5) { /*alert(md5);*/ };cbMgr.event.fileComplete = function (obj) { /*alert(obj.pathSvr);*/ };cbMgr.Config["Cookie"] = 'JSESSIONID=<%=request.getSession().getId()%>';cbMgr.Config.Fields["test"] = "test";$(function(){cbMgr.load_to("FilePanel");//加载控件});</script></head><body><p>up6.2多⽂件上传演⽰页⾯</p><div id="FilePanel"></div><div id="msg"></div></body></html>⽂件MD5计算/*** 把⽂件转成md5字符串* @param file* @return*/publicstatic String fileToMD5(File file) {if(file == null) {returnnull;}if(file.exists() == false) {returnnull;}if(file.isFile() == false) {returnnull;}FileInputStream fis = null;try {//创建⼀个提供信息摘要算法的对象,初始化为md5算法对象MessageDigest md = MessageDigest.getInstance("MD5");fis = new FileInputStream(file);byte[] buff = newbyte[1024];int len = 0;while(true) {len = fis.read(buff, 0, buff.length);if(len == -1){break;}//每次循环读取⼀定的字节都更新md.update(buff,0,len);}//关闭流fis.close();//返回md5字符串return bytesToHex(md.digest());} catch (Exception e) {e.printStackTrace();}returnnull;}⽂件夹⽂件夹名称⽣成逻辑package ;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.UUID;import up6.model.FileInf;publicclass PathBuilderUuid extends PathBuilder{/* ⽣成⽂件夹存储路径,完全与客户端⽂件夹结构保持⼀致* 格式:* upload/2016/05/17/uuid/folder_name* 更新记录:* 2016-03-01 upload/uid/folders/uuid/folder_name* 2016-05-17 将格式改为⽇期格式**/public String genFolder(int uid,String nameLoc) throws IOException {SimpleDateFormat fmtDD = new SimpleDateFormat("dd");SimpleDateFormat fmtMM = new SimpleDateFormat("MM");SimpleDateFormat fmtYY = new SimpleDateFormat("yyyy");Date date = new Date();String strDD = fmtDD.format(date);String strMM = fmtMM.format(date);String strYY = fmtYY.format(date);String uuid = UUID.randomUUID().toString();uuid = uuid.replace("-","");String path = this.getRoot() + "/";path = path.concat(strYY);path = path.concat("/");path = path.concat(strMM);path = path.concat("/");path = path.concat(strDD);path = path.concat("/");path = path.concat(uuid);path = path.concat("/");path = path.concat(nameLoc);return path;}/* 保留原始⽂件名称,不检查⽂件是否重复* 格式:* upload/uid/年/⽉/⽇/uuid/file_name* @see Xproer.PathBuilder#genFile(int, Xproer.xdb_files)*/public String genFile(int uid,FileInf f) throws IOException{String uuid = UUID.randomUUID().toString();uuid = uuid.replace("-", "");SimpleDateFormat fmtDD = new SimpleDateFormat("dd");SimpleDateFormat fmtMM = new SimpleDateFormat("MM");SimpleDateFormat fmtYY = new SimpleDateFormat("yyyy");Date date = new Date();String strDD = fmtDD.format(date);String strMM = fmtMM.format(date);String strYY = fmtYY.format(date);String path = this.getRoot() + "/";path = path.concat(strYY);path = path.concat("/");path = path.concat(strMM);path = path.concat("/");path = path.concat(strDD);path = path.concat("/");path = path.concat(uuid);path = path.concat("/");path = path.concat(Loc);return path;}}⽂件上传的效果⽂件保存位置及逻辑在up6中有两种保存模式,⼀种是md5⼀种是uuid。
炫酷的文件上传效果
1、文件上传基础1)浏览器页面:<form action="${pageContext.request.contextPath }/UploadServlet" method="POST" enctype="multipart/form-data">选择文件:<input type="file" name="name"></br/>文件信息:<input type="text" name="info"/><input type="submit" value="提交"/></form>2)服务器Servlet端:使用Apache提供的和文件上传有关的两个jar包:common-fileupload-1.3.1.jar和common-io-2.2.jar。
注意后面那个包的版本一定要>=2。
代码:publicclass UploadServlet extends HttpServlet{private String serverPath ="e:/uploader/";publicvoid doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//[1]创建一个DiskFileItemFactory对象,配置缓存信息DiskFileItemFactory factory =new DiskFileItemFactory();//[2]创建ServletFIleUpload对象ServletFileUpload sfu =new ServletFileUpload(factory);//[3]设置文件名称的编码sfu.setHeaderEncoding("utf-8");sfu.setFileSizeMax(1024);//设置单个文件的最大字节数:1Msfu.setSizeMax(10*1024);//设置整个表单的最大字节数:10M//[4]开始解析文件try{//一个文件/普通数据就封装在一个FileItem中List<FileItem> items = sfu.parseRequest(request);//[5]获取文件信息for(FileItem item:items){//[6]判断是文件还是普通数据if(item.isFormField()){//普通数据String fileName = item.getFieldName();if(fileName.equals("info")){//获取数据String value = item.getString();System.out.println("info:"+value);}}else{//文件//获取文件名称String name = item.getName();//获取文件实际内容InputStream is = item.getInputStream();//保存文件,使用common-io.jar包中的工具类,将输入流保存至文件中FileUtils.copyInputStreamToFile(is,new File(serverPath+"/"+name));System.out.println("文件:"+name+"保存成功");}}}catch(FileUploadException e){// TODO Auto-generated catch blocke.printStackTrace();}}publicvoid doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{doGet(request,response);}}2、使用WebUploader上传组件baidu开发的开源组件WebUploader,可以实现异步上传文件、拖拽式上传、黏贴上传、上传进度监控、文件缩略图、大文件的断点续传、大文件秒传、2.1 下载WebUpload组件到WebUploader官网下载,2.2基本文件上传Demo(包含上传进度)前端:1)在页面导入所需css、js<!--1.准备好webuploader的资源--><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath }/jx/webuploader.css"> <script type="text/javascript"src="${pageContext.request.contextPath }/jx/jquery.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath }/jx/webuploader.js"></script>2)编写html<!--2.设计一个页面元素--><div id="uploader"><!--用于显示文件列表--><div id="fileList"></div><!--用于选择文件--><div id="filePicker">点击选择文件</div></div>3)对上传组件进行渲染<!--3.使用webuploader进行渲染--><script type="text/javascript">//3.1 WebUpload组件初始化,以及配置全局参数var uploader =WebUploader.create({//flash地址swf:"${pageContext.request.contextPath }/jx/Uploader.swf",//设置提交的服务器地址server:"${pageContext.request.contextPath }/UploadServlet",//渲染文件上传元素pick:"#filePicker",//自动上传auto:true});//3.2选择文件,并且提示文件的功能//file:代表选择到的文件uploader.on("fileQueued",function(file){//把文件信息追加到fileList的idv中$("#fileList").append("<divid="+file.id+"><span>"++"</span><div><spanclass='percentage'></span></div></div>");});//3.3在上传的过程中实现文件上传监控//percentage:代表文件上传的百分比:0.1uploader.on("uploadProgress",function(file,percentage){$("#"+file.id).find("span.percentage").text(Math.round(percentage*100)+"%") ;});</script>服务器端仍使用之前的UploadServlet。
文件 上传 方法
文件上传方法
文件上传方法可以通过以下几种方式实现:
1. 表单提交:在HTML中设置一个文件类型的input标签,用户可以点击该标签选择待上传的文件。
当用户提交表单时,表单数据会包含所选文件的二进制数据,后台服务器可以接收并保存该文件。
2. HTTP请求:使用HTTP POST请求上传文件。
可以使用HTTP工具库(如axios、jQuery.ajax等)在前端发送POST请求,将文件以二进制数据的形式发送给后台服务器。
3. AJAX上传:通过AJAX技术实现文件上传。
可以使用FormData对象将文件数据封装为表单数据,然后使用XMLHttpRequest(XHR)对象发送POST请求,将FormData对象发送到后台服务器。
4. FTP上传:使用FTP协议实现文件上传。
FTP是一种文件传输协议,可以使用FTP客户端软件(如FileZilla等)将本地文件上传到远程服务器。
5. 第三方库/插件:使用第三方库或插件来简化文件上传操作。
一些流行的文件上传库/插件有Dropzone.js、Plupload、Fine Uploader等,它们提供了丰富的上传功能和用户友好的界面。
无论使用哪种方式,都需要注意安全性和性能问题。
例如,限制上传文件的大小、类型和数量,对上传文件进行验证和过滤,以及进行合理的上传速度控制,避免对服务器造成过大负载。
OSS阿里云文件上传demo。
public static void main(String[] args) {
//String bucketName = "demo10"; String Objectkey = "photo1.jpg";
System.out.println("正在下载..."); downloadFile(client, BUCKET_NAME, Objectkey, downloadFilePath); }catch(Exception e){ e.printStackTrace(); } finally { deleteBucket(client, BUCKET_NAME); } }
try { ensureBucket(client, BUCKET_NAME);
setBucketPublicReadable(client, BUCKET_NAME);
System.out.println("正在上传..."); uploadFile(client, BUCKET_NAME, Objectkey, uploadFilePath);
import com.aliyun.openservices.ClientConfiguration; import com.aliyun.openservices.ClientException; import com.aliyun.openservices.ServiceException; import com.aliyun.openservices.oss.OSSClient; import com.aliyun.openservices.oss.OSSErrorCode; import com.aliyun.openservices.oss.OSSException; import com.aliyun.openservices.oss.model.CannedAccessControlList; import com.aliyun.openservices.oss.model.GetObjectRequest; import com.aliyun.openservices.oss.model.OSSObjectSummary; import com.aliyun.openservices.oss.model.ObjectListing; import com.aliyun.openservices.oss.model.ObjectMetadata;
文件上传到阿里云OSS存储(前端js含demo)
⽂件上传到阿⾥云OSS存储(前端js含demo)⽂件上传上传组件:⾃定义:使⽤input的file使⽤中有阿⾥云上传组件(react)//⾃定义<input ref = 'uploadbtn' type="file" multiple="multiple" onChange={changeFiles}/>补充:multiple="multiple"⽤于定义是否允许⼀次多⽂件上传;changeFiles⽅法在每次更改⽂件时候触发;在react中⽤ref⽅法this.refs.uploadbtn.files拿到这个节点选择的files;⚠ 注意:由于阿⾥云oss给出的只能⼀次上传⼀个⽂件,因此这⾥如果要同时上传多个⽂件的话注意应该⽂件遍历挨个上传(同时这⾥需要注意;下载同时下载多个⽂件时,如果前⼀个暂未下载完成导致后⾯failed,需要等待前⾯⼀个⽂件下载完成之后再下载另外⼀个)开始上传上传组件中我们获取了需要上传的⽂件进⾏上传⽅法:直接引⼊使⽤使⽤进⾏//直接引⼊使⽤/****html中引⼊aliyun-oss-sdk.min.js**/<script type="text/javascript" src="./aliyun-oss-sdk.min.js"></script>//js部分var progress = function (p) {console.log(p) //上传进度};var options = {progress: progress, //可以拿到⽂件上传进度;⽤于写进度条partSize: 500 * 1024,meta: {year: 2017,people: 'test'},timeout: 60000,callback: {//如果有后台鉴权;那么这⾥是鉴权的回调;回调返回给后台的数据;下⾯只是样例'url': appHost + '/oss/callback','body': "{\"bucket\":${bucket},\"object\":${object}, \"type\":${x:type}, \"name\":${x:name}, \"iscover\":${x:iscover}}",'contentType': 'application/json','customValue': { // ⾃定义参数'type': '0','name': 'default图⽚.jpeg','iscover': '0', //0:否 1:是},},},};var uploadFile = function (file) {//如果使⽤后台鉴权返回临时accessKeyId、accessKeySecret、stsToken需要前⾯的 OSS.urllib.request;如果没有后台鉴权、那么直接填写阿⾥云OSS给出的值(就安全⽅⾯;阿⾥云平台建议采⽤鉴权⽅式,避免前端将访问accessKeyId、acces OSS.urllib.request(url, {method: 'GET'}).then(function (result) {var creds = JSON.parse(result.data);var client = new OSS({region: region,accessKeyId: creds.AccessKeyId,accessKeySecret: creds.AccessKeySecret,stsToken: creds.SecurityToken,bucket: bucket});//objectKey, file, options三个参数分别是:objectKey阿⾥云上buket中的虚拟⽂件地址(String);file是读取的⽂件,注意这⾥是⼀个⽂件;options见上定义的optionsclient.multipartUpload(objectKey, file, options).then(function (res) {console.log('upload success: %j', res);}});}//使⽤ali-sdk进⾏/**** 1、安装npm install ali-oss --save** 2、引⼊let OSS = require('ali-oss');** 3、使⽤ var client = new OSS({....});初始client不⼀样;其他同上**/⽂件下载let OSS = require('ali-oss');var appHost = ''; //阿⾥云host地址var appServerUrl = appHost+'/oss/ststoken';var bucket = '';var region = ''; //阿⾥云OSS服务区地区export const downloadFile = function (fileurl) { //fileurl是指⽂件在阿⾥云上的存储地址var url = appServerUrl;return OSS.urllib.request(url, {method: 'GET'}).then(function (result) {var creds = JSON.parse(result.data);var client = new OSS({region: region,accessKeyId: creds.AccessKeyId,accessKeySecret: creds.AccessKeySecret,stsToken: creds.SecurityToken,bucket: bucket});var result = client.signatureUrl(fileurl, {response: {'content-disposition': 'attachment; filename="' + downloadFilename + '"' //downloadFilename是指下载下来的⽂件名称}});window.location = result;return result;});};未完待续…(内容上传;⽂件列表获取;案例demo;待定)。
JavaScript中使用webuploader实现上传视频功能(demo)
JavaScript中使⽤webuploader实现上传视频功能(demo)之前有⼈让我做⼀个webuploader上传视频,但是⼀直没有时间,现在抽出了时间来。
来完成以下这个简单的demo 第⼀步,上传视频和上传图⽚有什么区别么?其实是没有的,因为执⾏的操作都是上传,所以说我们并不⽤担⼼上传的问题。
但是webuploader实际上是限制了你上传的参数(这⾥指的是限制了你的⽂件扩展名)我们找到webuploader中的js参数accept中的extensionsaccept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}这⾥⾯我们只需要将gif等后缀改成你需要上传的格式(MP4,AVI等)这⾥⾯改了后我们的后台也要进⾏修改[HttpPost]public ActionResult upload(HttpPostedFileBase file){if (file != null && file.ContentLength > 0){string folderpath = "/UploadFile/";//上传图⽚的⽂件夹if (!Directory.Exists(folderpath)){Directory.CreateDirectory(Server.MapPath(folderpath));}string ext1 = Path.GetExtension(file.FileName);if (ext1 != ".mp4" && ext1 != ".rmvb" && ext1 != ".avi" && ext1 != ".flv")//笔者这⼉修改了后缀的判断{return Json(new { statu = 201, msg = "⽂件格式不正确!" });}else{string name = DateTime.Now.ToString("yyyyMMddHHmmssff");string ext = Path.GetExtension(file.FileName);string downpath = folderpath + name + ext;string filepath = Server.MapPath(folderpath) + name + ext;file.SaveAs(filepath);return Json(new { statu = 200, src = downpath, id = name });}}else{return Json(new { statu = 202, msg = "请上传⽂件!" });}} 后台的判断也要记得更新哦完成了这些后我们上传基本上就没有问题了现在开放下前端的代码<tr><td>上传视频</td><td><div id="upl">上传视频</div>//马上这个会⽤js实例化</td></tr><script>var uploader;$(function () {uploader = WebUploader.create({auto: true,swf: '/Scripts/Uploader.swf',server: '@Url.Action("Upload")',//控制器pick: '#upl',accept: {title: 'Images',extensions: 'mp4,flv,jpeg,bmp,doc,docx,rar,pdf',}})});</script> 这⾥⾯⼤家也看到了uploader不仅仅可以上传⼀些最基本的图⽚视频⽽且还能上传⼀些doc⽂档等杂七杂⼋的东西啊。
vue实现文件上传功能
vue实现⽂件上传功能vue ⽂件上传,供⼤家参考,具体内容如下⾸先先说⼀下想要实现的效果就如截图所见,需要将企业和需要上传的⽂件提交到后台处理,那么接下来就说如何实现vue 实现vue 页⾯代码<el-uploadclass="upload-demo"ref="upload"action="doUpload":limit="1":file-list="fileList":before-upload="beforeUpload"><el-button slot="trigger" size="small" type="primary">选取⽂件</el-button><a href="./static/moban.xlsx" rel="external nofollow" download="模板"><el-button size="small" type="success">下载模板</el-button></a> <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> --><div slot="tip" class="el-upload__tip">只能上传excel⽂件,且不超过5MB</div><div slot="tip" class="el-upload-list__item-name">{{fileName}}</div></el-upload><span slot="footer" class="dialog-footer"><el-button @click="visible = false">取消</el-button><el-button type="primary" @click="submitUpload()">确定</el-button></span>上传之前的⼤⼩校验beforeUpload(file){debuggerconsole.log(file,'⽂件');this.files = file;const extension = .split('.')[1] === 'xls'const extension2 = .split('.')[1] === 'xlsx'const isLt2M = file.size / 1024 / 1024 < 5if (!extension && !extension2) {this.$message.warning('上传模板只能是 xls、xlsx格式!')return}if (!isLt2M) {this.$message.warning('上传模板⼤⼩不能超过 5MB!')return}this.fileName = ;return false // 返回false不会⾃动上传},⼿动上传确认提交submitUpload() {debuggerconsole.log('上传'+)if(this.fileName == ""){this.$message.warning('请选择要上传的⽂件!')return false}let fileFormData = new FormData();fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的⽂件,test.zip是要传的⽂件名 let requestConfig = {headers: {'Content-Type': 'multipart/form-data'},}this.$http.post(`/basedata/oesmembers/upload?companyId=`+pany, fileFormData, requestConfig).then((res) => { debuggerif (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500,onClose: () => {this.visible = falsethis.$emit('refreshDataList')}})} else {this.$message.error(data.msg)}})}后台/*** 上传⽂件*/@PostMapping("/upload")@RequiresPermissions("basedata:oesmembers:upload")public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) {System.out.println(companyId);if (file.isEmpty()) {throw new RRException("上传⽂件不能为空");}//上传⽂件相关逻辑return R.ok();}以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
Vue+Elementel-upload文件上传
Vue+Elementel-upload⽂件上传Vue+Element el-upload⽂件上传多⽂件上传,类型、⼤⼩限制<h2>上传⽂件</h2><el-card><el-uploadclass="upload-demo"ref="upload"action="#":file-list="fileList"accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar":http-request="reportFileHttpRequest":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeAvatarUpload":auto-upload="false"dragmultiplestyle="text-align: center"><i class="el-icon-upload"></i><div class="el-upload__text">将⽂件拖到此处,或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传word,excel,pdf,jpg,png,zip,rar⽂件</div></el-upload><div align="center"><span slot="footer" class="dialog-footer" ><el-button style="margin-left: 10px;" size="small" @click="fileList = []">取消</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </span></div></el-card>ref="upload" 注册引⽤信息action="#":file-list="fileList" ⽂件列表accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar" 限制⽂件接收类型:http-request="reportFileHttpRequest" ⾃定义上传:on-preview="handlePreview" 点击⽂件列表中已上传的⽂件时的钩⼦:on-remove="handleRemove" ⽂件列表移除⽂件时的钩⼦:before-upload="beforeAvatarUpload" ⽂件上传之前的钩⼦:auto-upload="false" 关闭⾃动上传drag 拖拽上传multiple 批量上传// 上传⽂件此时会触发组件的http-requestsubmitUpload() {this.$refs.upload.submit();},// ⽂件列表移除⽂件时的钩⼦handleRemove(file, fileList) {console.log(file, fileList);},// 点击⽂件列表中已上传的⽂件时的钩⼦handlePreview(file) {console.log(file);},// ⽂件上传之前的钩⼦beforeAvatarUpload(file) {const isLt2M = file.size / 1024 / 1024 < 32;if (!isLt2M) {this.$message.error('上传头像图⽚⼤⼩不能超过 32MB!');}return isLt2M;},// ⾃定义上传reportFileHttpRequest(param) {if (this.$refs.upload) {this.$refs.upload.clearFiles() // 清除上传的⽂件}const _this = this// 开始上传⽂件新建⼀个formDataconst formData = new FormData();//FormData对象,添加参数只能通过append('key', value)的形式添加formData.append("file", param.file);//添加⽂件对象const url = 'http://***********/upload';axios.post(url, formData).then(res => {axios.post(url, data).then(function (resp) {if (resp.data.code == 200) {_this.$message({message: '上传成功',type: 'success'});} else {_this.$message(resp.data.data) }})})}。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
InputStream
inp=ExcelUtil.class.getResourceAsStream("/com/java1234/template/"+templateFileName);
POIFSFileSystem fs=new POIFSFileSystem(inp);
Workbook wb=new HSSFWorkbook(fs);
Sheet sheet=wb.getSheetAt(0);
// 获取列数
int cellNums=sheet.getRow(0).getLastCellNum();
int rowIndex=1;
while(rs.next()){
Row row=sheet.createRow(rowIndex++);
for(int i=0;i<cellNums;i++){
row.createCell(i).setCellValue(rs.getObject(i+1).toString());
}
}
return wb;
}
public static void export(HttpServletResponse response,Workbook wb,String fileName)throws Exception{
response.setHeader("Content-Disposition", "attachment;filename="+new String(fileName.getBytes("utf-8"),"iso8859-1"));
response.setContentType("application/ynd.ms-excel;charset=UTF-8");
OutputStream out=response.getOutputStream();
wb.write(out);
out.flush();
out.close();
}
//文件上传的实例
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.swing.*;
public class ExampleFrame_09 extends JFrame {
/**
*
*/
private static final long serialVersionUID = 1L;
private JTextField textField;
public static void main(String args[]) {
ExampleFrame_09 frame = new ExampleFrame_09();
frame.setVisible(true);
}
public ExampleFrame_09() {
super();
setTitle("文件选择对话框");
setBounds(100, 100, 500, 375);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
final JPanel panel = new JPanel();
getContentPane().add(panel, BorderLayout.NORTH);
final JLabel label = new JLabel();
label.setText("文件:");
panel.add(label);
textField = new JTextField();
textField.setColumns(20);
panel.add(textField);
final JButton button = new JButton();
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
JFileChooser fileChooser = new JFileChooser();// 创建文件选择对话框
// 显示文件选择对话框
int i = fileChooser.showOpenDialog(getContentPane());
// 判断用户单击的是否为“打开”按钮
if (i == JFileChooser.APPROVE_OPTION) {
// 获得选中的文件对象
File selectedFile = fileChooser.getSelectedFile();
// 显示选中文件的名称
textField.setText(selectedFile.getName());
System.out.println(selectedFile.getName());
int len = 0;
byte []byt = new byte[1024];
try {
FileInputStream fileInputStream = new FileInputStream(selectedFile);
while((len = fileInputStream.read(byt)) != -1){
System.out.println(new String(byt));
}
} catch (FileNotFoundException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
} catch(IOException e2){
e2.printStackTrace();
}
}
}
});
button.setText("上传");
panel.add(button);
//
}
}
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.swing.*;
import javax.swing.filechooser.*;
import javax.swing.filechooser.FileFilter;
public class ExampleFrame_10 extends JFrame {
/**
*
*/
private static final long serialVersionUID = 1L;
public static void main(String args[]) {
ExampleFrame_10 frame = new ExampleFrame_10();
frame.setVisible(true);
}
public ExampleFrame_10() {
super();
setTitle("选择照片对话框");
setBounds(100, 100, 500, 375);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
final JLabel label = new JLabel("<双击选择照片>", SwingConstants.CENTER);
label.addMouseListener(new MouseAdapter() {
JFileChooser fileChooser;
{
// 创建文件选择对话框
fileChooser = new JFileChooser();
// 设置文件过滤器,只列出JPG或GIF格式的图片
FileFilter filter = new FileNameExtensionFilter(
"图像文件(JPG/GIF)", "JPG", "JPEG", "GIF");
fileChooser.setFileFilter(filter);
}
public void mouseClicked(MouseEvent e) {
if (e.getClickCount() == 2) {
// 显示文件选择对话框
int i = fileChooser.showOpenDialog(getContentPane());
// 判断用户单击的是否为“打开”按钮
if (i == JFileChooser.APPROVE_OPTION) {
// 获得选中的图片对象
File selectedFile = fileChooser.getSelectedFile();
label.setIcon(new ImageIcon(selectedFile
.getAbsolutePath()));// 将图片显示到标签上
label.setText(null);
}
}
}
});
getContentPane().add(label, BorderLayout.CENTER);
}
}。