限制上传类型 & 多选：
① accept 属性只能与 <input type="file" /> 配合使用。它规定能够通过文件上传进行提交的文件类型。
② multiple 属性规定输入字段可选择多个值。
示例：
<!--
image/* 所有图片
image/png png图片
image/jpg jpg图片
image/gif gir动图
application/msword Word文档（.doc）
application/vnd.openxmlformats-officedocument.wordprocessingml.document Word文档（.docx）
application/vnd.ms-excel Excel文档（.xls）
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Excel文档（.xlsx）
application/vnd.ms-powerpoint PPT文档（.ppt）
application/vnd.openxmlformats-officedocument.presentationml.presentation PPT文档（.pptx）
application/zip 压缩文件
text/plain 文本文件
text/html HTML文件
text/css css文件
application/pdf pdf文件
audio/* 音频文件
video/* 视频文件
-->
<input id="files"
type="file"
accept="image/*,
application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document,
application/vnd.ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-powerpoint,
application/vnd.openxmlformats-officedocument.presentationml.presentation, application/zip,
text/plain,
text/html,
text/css,
application/pdf,
audio/*,
video/*"
multiple />
文件的上传（照片上传），文件上传照片上传
1.文本的上传
[1] 简介
> 将二个客户端的本土的文本发送到服务器中保存。
> 上传文件是经过流的款式将文件发送给服务器。
[2] 表单的设置
> 向服务器上传一个文书时，表单要选择post请求。
> 表单的暗中认可属性enctype=”application/x-www-form-urlencoded”
– 这一个特性的意味是请求体中的内容将会采取UWranglerL编码
> 上传文件的表单enctype必要设置为 multipart/form-data
– multipart/form-data表示的是表单是三个多部件的表单
–
若是类型设置为它，则大家的每三个表单项都会作为1个独门的部件发送给服务器。
– 三个部件之间采取类似 —————————–7df2d08c0894分割符来分别
>
当表单设置为multipart/form-data时，大家request.getParameter()将失效，大家不可能再通过该格局赢得请求参数。
[澳门葡京，3] FileUpload
>
大家一般景观下行使commons-fileupload-1.3.1.jar那么些工具来分析多部件请求。
> fileupload 信赖 commons-io
所以大家假诺Filtupload供给同时导入io包。
> 核心类：
DiskFileItemFactory
– 工厂类，用于构建1个解析器实例。
ServletFileUpload
– 解析器类，通过此类实例来解析request中的请求音讯。
FileItem
–
工具会将大家恳请中每二个部件，都打包为贰个FileItem对象，处理公事上传时，只供给调用该对象的主意
– 方法：
boolean isFormField() –>
当前表单项是不是是一个普通表单项，true是普通表单项， false是文件表单项
String getContentType() –> 重临的是文本的品类，是MIME值
String getFieldName() –> 获取表单项的name属性值
String getName() –> 获取上传的公文的名字
long getSize() –> 获取文件的深浅
String getString(String encoding) –>
获取表单项的value属性值，需求经受一个编码作为参数。
void write(File file) –> 将表单项中的内容写入到磁盘中
> 使用手续：
1.到手工业厂类实例[DiskFileItemFactory]
2.拿走解析器类实例[ServletFileUpload]
3.解析request获取FileItem[限定文件上传类型，文件的上传。parseRequest()]
[4] 细节
第②个难题
> 部分浏览器会将文件的总体路径作为文件名发送。
C:\Users\lilichao\Desktop\day20\图片\蒙娜Lisa.jpg
>
像那类文件名我们须要截取一下字符串，只得到名字那有的，而不须要获得路径部分的新闻。
通过如下代码对文本名举行截取字符串的操作：
if(name.contains(“\\”)){
//要是包括则截取字符串
name = name.substring(name.lastIndexOf(“\\”)+1);
}
第②个难点
> 上传的文件有只怕出现重名，后上传的文书会将先上传的文书覆盖。
> 解决：给文件名加贰个唯一的前缀。
唯一标识_fennu.jpg
UUID_fennu.jpg
第⑤个难题
> 有个别情形要求限制上传文件的大大小小。
– 设置单个文件大小为50KB：
fileUpload.setFileSizeMax(1024*50);
–
设置完单个文件大小限制之后，一旦上传的文件超越限定，则会抛出如下极度：
FileSizeLimitExceededException
全数能够对该特别举办捕获，当出现该尤其时则设置叁个错误新闻。
– 设置五个文件的总大小为150KB
fileUpload.setSizeMax(1024*150);
– 当多少个公文的分寸超出范围时，会抛出如下万分
SizeLimitExceededException
第七个难题
> 当用户上传贰个空的文书，依旧会将文件保留到硬盘上。
> 在保存文件应抢先对文本的尺寸进行判断，假设size为0，则不处理。
上边是代码完毕部分：
Servlet里面包车型客车始末：
1 package com.neuedu.servlet;
2
3 import java.io.File;
4 import java.io.IOException;
5 import java.util.List;
6 import java.util.UUID;
7
8 import javax.servlet.ServletContext;
9 import javax.servlet.ServletException;
10 import javax.servlet.annotation.WebServlet;
11 import javax.servlet.http.HttpServlet;
12 import javax.servlet.http.HttpServletRequest;
13 import javax.servlet.http.HttpServletResponse;
14
15 import org.apache.commons.fileupload.FileItem;
16 import org.apache.commons.fileupload.FileUploadBase.FileSizeLimitExceededException;
17 import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;
18 import org.apache.commons.fileupload.FileUploadException;
19 import org.apache.commons.fileupload.disk.DiskFileItemFactory;
20 import org.apache.commons.fileupload.servlet.ServletFileUpload;
21
22
23
24
25
26 @WebServlet("/FileUploadServlet")
27 public class FileUploadServlet extends HttpServlet {
28 private static final long serialVersionUID = 1L;
29
30
31
32 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
33 //1.创建工厂类
34 DiskFileItemFactory factory=new DiskFileItemFactory();
35 //2.创建ServletFilUpload对象，通过这个对象完成上传功能。
36 ServletFileUpload fileUpload=new ServletFileUpload(factory);
37 // fileUpload.setFileSizeMax(1024*50);
38 fileUpload.setSizeMax(1024*150);
39 ServletContext servletContext = request.getServletContext();
40 String realPath = servletContext.getRealPath("/upload");
41 System.out.println(realPath);
42 File file=new File(realPath);
43 if(!file.exists())
44 {
45 file.mkdirs();
46 }
47 //2.用这个fileUpload对象解析request请求
48 try {
49 List<FileItem> fileList = fileUpload.parseRequest(request);
50 for(FileItem item:fileList)
51 {
52 if(item.isFormField()){
53 //代表普通表单项
54 String name=item.getFieldName();
55 String value=item.getString("utf8");
56 System.out.println(name+":"+value);
57
58 }else {
59 //代表上传的文件
60 long size=item.getSize();
61 if(size==0){
62 continue;
63 }
64 String contentType = item.getContentType();
65 String name = item.getName();
66 if(name.contains("\\")){
67 name=name.substring(name.lastIndexOf("\\")+1);
68
69 }
70 //uuid_name.jpg
71 String prefix = UUID.randomUUID().toString();
72 prefix=prefix.replace("-", "");
73 String fileName=prefix+"_"+name;
74 String fieldName=item.getFieldName();
75 System.out.println(size+":"+contentType+":------------"+name+":"+fieldName);
76 try {
77 item.write(new File(realPath+"\\"+fileName));
78 } catch (Exception e) {
79 // TODO Auto-generated catch block
80 e.printStackTrace();
81 }
82
83 }
84 }
85 } catch (FileSizeLimitExceededException e)
86 {
87 System.out.println("文件大小不可以超过50k");
88 }
89 catch (SizeLimitExceededException e) {
90 System.out.println("文件大小不可以超过150K");
91 }
92
93 catch (FileUploadException e) {
94 // TODO Auto-generated catch block
95 e.printStackTrace();
96 }
97 }
98
99 }
FileUploadServlet.java
JSP里面包车型客车剧情：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <title>Insert title here</title>
8 </head>
9 <body>
10 <form action="${pageContext.request.contextPath}/FileUploadServlet" method="post" enctype="multipart/form-data">
11 用户名：<input type="text" name="username"/><br/>
12 <input type="file" name="photo"><br/>
13 <input type="file" name="photo1"><br/>
14 <input type="file" name="photo2"><br/>
15 <input type="submit" value="提交">
16 </form>
17 </body>
18 </html>
index.jsp
1.文件的上传 [1] 简介 将三个客户端的地点的文书发送到服务器中保留。
上传文件是透过流的…
- private void
button1_Click(object sender, EventArgs e) - {
-
//判断是还是不是打开对话框 - if
(this.openFileDialog1.ShowDialog() == DialogResult.OK) -
{ -
//文本框获取打开的公文的门路 -
this.textBox1.Text = this.openFileDialog1.FileName; -
} - }
一 NSURLSessionUploadTask概述
1.1NSMutableURLRequest
图片上传前预览：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.tip {
width: 100%;
text-align: center;
}
.main {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
border: 2px dotted red;
padding: 20px;
}
.add {
width: 100px;
height: 100px;
border: 2px solid #333;
box-sizing: border-box;
font-size: 100px;
line-height: 100px;
font-weight: 100;
color: #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.form {
display: none;
}
</style>
</head>
<body>
<div class="tip"></div>
<div class="main">
<div class="add">＋</div>
<form class="form"></form>
</div>
</body>
</html>
<script type="text/javascript">
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
$(".tip").html("<h1>当前浏览器不支持FileReader接口</h1>");
}
var index = 0;
$(".add").click(function(e) {
if (!$("#upload")[0]) {
$(".form").append("<input id='upload' class='num" + (++index) + "' onchange='showImg(this)' type='file' accept='image/*' />");
}
$("#upload").click();
});
// 展示图片
function showImg(el) {
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function(e) {
console.log("开始读取....");
};
reader.onprogress = function(e) {
console.log("正在读取中....");
};
reader.onabort = function(e) {
console.log("中断读取....");
};
reader.onerror = function(e) {
console.log("读取异常....");
};
reader.onload = function(e) {
console.log("成功读取....");
// console.log(e);
var img = "<img class='img num" + index + "' width='100px' height='100px' onclick='del(" + index + ")' src='" + e.target.result + "' alt=''>";
$(img).insertBefore('.add');
};
reader.readAsDataURL(el.files[0]);
$(el).removeAttr('id');
}
// 删除图片并删除对应隐藏的input
function del(cls){
$(".num" + cls).remove();
}
</script>
注意：如果不选图片，点取消的时候，上例中会有一个多余的input，表单提交的时候，记得把没有值的 input 删除掉。
上传数据的时候，一般要利用REST
API里的PUT大概POST方法。所以，要通过那几个类来安装有个别HTTP配置新闻。常见的归纳
timeoutInterval //timeout的小运间隔
HTTPMethod //HTTP方法
//设置HTTP表头音信
– addValue:forHTTPHeaderField:
– setValue:forHTTPHeaderField:
HTTP header的求实消息参见Wiki，常用的header一定要熟谙
1.2 二种上传数据的点子
NSData － 如果目的已经在内部存储器里
动用以下三个函数早先化
uploadTaskWithRequest:fromData:
uploadTaskWithRequest:fromData:completionHandler:
Session会自动总计Content－length的Header
日常，还需求提供一些服务器要求的Header，Content－Type就反复须求提供。
File－假使对象在磁盘上，这样做兴妖作怪下降内部存款和储蓄器使用。
应用以下三个函数举行初步化
uploadTaskWithRequest:fromFile:
uploadTaskWithRequest:fromFile:completionHandler:
无差异于，会自动总括Content－Length,倘诺App没有提供Content-Type,Session会自动成立3个。借使Server需求额外的Header信息，也要提供。
Stream
使用那几个函数创设
uploadTaskWithStreamedRequest:
小心，那种状态下必将要提供Server需求的Header音信，例如Content－Type和Content－Length。
接纳Stream一定要贯彻那么些代理方法，因为Session不能够在再一次尝试发送Stream的时候找到数据源。（例如需求授权音讯的动静）。那些代理函数，提供了Stream的数据源。
URLSession:task:needNewBodyStream:
1 .3 代理方法
采纳那一个代理方法取得upload的进程。别的的代办方法
NSUCRUISERLSessionDataDelegate,NSU中华VLSessionDelegate,NSUSportageLSessionTaskDelegate同样适用于UploadTask
-(void)URLSession:(NSURLSession *)session task:(NSURLSessionTask
*)task didSendBodyData:(int64_t)bytesSent
totalBytesSent:(int64_t)totalBytesSent
totalBytesExpectedToSend:(int64_t)totalBytesExpectedToSend；
二 上传数据
主导代码如下
NSMutableURLRequest * request = [NSMutableURLRequest
requestWithURL:[NSURL
URLWithString:@];
[request addValue:@application/json
forHTTPHeaderField:@Content-Type];//这一行一定不可能少，因为背后是更换来JSON发送的
[request addValue:@application/json forHTTPHeaderField:@Accept];
[request setHTTPMethod:@POST];
[request setCachePolicy:NSURLRequestReloadIgnoringCacheData];
[request setTimeoutInterval:20];
NSDictionary * dataToUploaddic =
@{self.keytextfield.text:self.valuetextfield.text};
NSData * data = [NSJSONSerialization
dataWithJSONObject:dataToUploaddic
options:NSJSONWritingPrettyPrinted
error:nil];
NSURLSessionUploadTask * uploadtask = [self.session
uploadTaskWithRequest:request fromData:data completionHandler:^(NSData
*data, NSURLResponse *response, NSError *error) {
if (!error) {
NSDictionary *dictionary = [NSJSONSerialization
JSONObjectWithData:data options:kNilOptions error:nil];
self.responselabel.text = dictionary.description;
}else{
UIAlertController * alert = [UIAlertController
alertControllerWithTitle:@Error message:error.localizedFailureReason
preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@OK
style:UIAlertActionStyleCancel handler:nil]];
[self presentViewController:alert animated:YES completion:nil];
}
}];
[uploadtask resume];
三 上传图片
主导部分代码
NSMutableURLRequest * request = [NSMutableURLRequest
requestWithURL:[NSURL
URLWithString:@];
[request addValue:@image/jpeg forHTTPHeaderField:@Content-Type];
[request addValue:@text/html forHTTPHeaderField:@Accept];
[request setHTTPMethod:@POST];
[request setCachePolicy:NSURLRequestReloadIgnoringCacheData];
[request setTimeoutInterval:20];
NSData * imagedata =
UIImageJPEGRepresentation(self.imageview.image,1.0);
NSURLSessionUploadTask * uploadtask = [self.session
uploadTaskWithRequest:request fromData:imagedata
completionHandler:^(NSData *data, NSURLResponse *response, NSError
*error) {
NSString * htmlString = [[NSString alloc] initWithData:data
encoding:NSUTF8StringEncoding];
UploadImageReturnViewController * resultvc = [self.storyboard
instantiateViewControllerWithIdentifier:@resultvc];
resultvc.htmlString = htmlString;
[self.navigationController pushViewController:resultvc animated:YES];
self.progressview.hidden = YES;
[self.spinner stopAnimating];
[self.spinner removeFromSuperview];
}];
[uploadtask resume];
代办函数
-(void)URLSession:(NSURLSession *)session task:(NSURLSessionTask
*)task didSendBodyData:(int64_t)bytesSent
totalBytesSent:(int64_t)totalBytesSent
totalBytesExpectedToSend:(int64_t)totalBytesExpectedToSend{
self.progressview.progress =
totalBytesSent/(float)totalBytesExpectedToSend;
}