input(type='file')上传多张照片并显示，传到后台
以下内容为网络摘抄和实践修改所得，如有雷同，请谅解！！！！
1、首先是前端页面代码：
其中，<input type="file" id="file_input" name="filePath" multiple="multiple"/> ，需要设置multiple属性
<style type="text/css">
.float{
float:left;
width : 100px;
height: 100px;
overflow: hidden;
border: 1px solid #CCCCCC;
border-radius: 10px;
padding: 5px;
margin: 5px;
}
img{
position: relative;
}
.result{
width: 100px;
height: 100px;
text-align: center;
box-sizing: border-box;
}
#file_input{
display: none;
}
.delete{
width: 100px;
height:100px;
position: absolute;
text-align: center;
line-height: 100px;
z-index: 10;
font-size: 30px;
background-color: rgba(255,255,255,0.8);
color: #777;
opacity: 0;
transition-duration: 0.7s;
-webkit-transition-duration: 0.7s;
}
.delete:hover{
cursor: pointer;
opacity: 1;
}
button {
border-color: #4898d5;
/*background-color: #2e8ded;*/
background-color:#62BF00;
color: #fff;
height: 28px;
line-height: 28px;
margin: 0 6px;
padding: 0 15px;
border: 1px solid #dedede;
border-radius: 2px;
font-weight: 400;
cursor: pointer;
text-decoration: none;
}
#submit {
background-color: #2e8ded;
}
#clear {
background-color: #FAAC58;
}
</style>
<body>
<table style="width:100%;">
<tr>
<td style="width:80%">
<label>请选择图像文件：</label>
<button id="select">选择图片</button>
@*<button id="add">追加图片</button>*@
<button id="clear">清空图片</button>
@*<button id="submit" onclick="submitPhoto()" >上传</button>*@
</td>
<td style="width:20%">
<form id="form1" method="post" enctype="multipart/form-data" style="width:95%;text-align:right;">
<input type="file" id="file_input" name="filePath" multiple="multiple"/>
</form>
</td>
</tr>
</table> <div id="append" style="width:100%;height:5px;"></div> </body>
如图：
2、写选择图片（<button id="select">选择图片</button>）和清空图片（<button id="clear">清空图片</button>）的事件，图片显示和删除的方法
var input = document.getElementById("file_input");
var result;
var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
var fd; //FormData方式发送请求
var oSelect = document.getElementById("select");
var oAdd = document.getElementById("add");
var oSubmit = document.getElementById("submit");
var oInput = document.getElementById("file_input");
var oClear = document.getElementById("clear");
if(typeof FileReader==='undefined'){
alert("抱歉，你的浏览器不支持 FileReader");
input.setAttribute('disabled','disabled');
} else {
input.addEventListener('change',readFile,false);
}
oSelect.onclick=function(){
oInput.value = "";
//清空已选图片
$('.float').remove();
dataArr = [];
index = ;
oInput.click();
}
oClear.onclick = function () {
oInput.value = "";
//清空已选图片
$('.float').remove();
dataArr = [];
index = ;
}
function readFile() {
fd = new FormData();
var iLen = this.files.length;
var index = ;
for (var i = ; i < iLen; i++) {
//if (!(input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i))) { //判断上传文件格式
if (!this.files[i].name.match(/.jpg|.gif|.png|.jpeg|.bmp/i)) { //判断上传文件格式
return alert("上传的图片中含有格式不正确的图片，请重新选择!请选择.jpg|.gif|.png|.jpeg|.bmp格式的图片");
}
var filereader = new FileReader();
filereader.index = i;
fd.append(i, this.files[i]);
filereader.readAsDataURL(this.files[i]); //转成base64
filereader.fileName = this.files[i].name;
filereader.onload = function (e) {
var imgMsg = {
name: this.fileName,//获取文件名
base64: this.result //filereader.readAsDataURL方法执行完后，filereader.result里
}
dataArr.push(imgMsg);
result = '<div class="delete">delete</div><div class="result"><img src="' + this.result + '" alt=""/><br><span style="margin:0 auto;font-size:9px">' + imgMsg.name + '</span></div>';
var div = document.createElement('div');
div.innerHTML = result;
div['className'] = 'float ';
div['index'] = index;
document.getElementsByTagName('body')[].appendChild(div); //插入dom树
//document.getElementById('append').appendChild(div);
var imgpic = div.getElementsByTagName('img')[];
imgpic.onload = function () {
var nowHeight = ReSizePic(this); //设置图片大小
this.parentNode.style.display = 'block';
var oParent = this.parentNode;
if (nowHeight) {
oParent.style.paddingTop = (oParent.offsetHeight - nowHeight) / + 'px';
}
}
div.onclick = function () {
this.remove(); // 在页面中删除该图片元素
delete dataArr[this.index]; // 删除dataArr对应的数据
}
index++;
}
}
}
function ReSizePic(ThisPic) {
var RePicWidth = ; //这里修改为您想显示的宽度值
var TrueWidth = ThisPic.width; //图片实际宽度
var TrueHeight = ThisPic.height; //图片实际高度
if (TrueWidth > TrueHeight) {
//宽大于高
var reWidth = RePicWidth;
ThisPic.width = reWidth;
//垂直居中
var nowHeight = TrueHeight * (reWidth / TrueWidth);
return nowHeight; //将图片修改后的高度返回，供垂直居中用
} else {
//宽小于高
var reHeight = RePicWidth;
ThisPic.height = reHeight;
}
}
function submitPhoto() {
SubmitPhoto("ControllerName");
}
如图：
3、提交到后台的方法
function SubmitPhoto(controller) {
if (!dataArr.length) {
tipDialog("请选择文件", , );
return;
}
Loading(true, "正在提交数据...");
$("#form1").ajaxSubmit({
url: "/" + controller + "/SubmitPhoto",
type: 'POST',
//data : JSON.stringify(submitArr),
dataType: 'json',
//processData: false, 用FormData传fd时需有这两项
//contentType: false,
success: function (data) {
Loading(false);
layer.alert(data.Message, {
skin: 'layui-layer-lan'
, closeBtn:
, anim: //动画类型
, end: function () {
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer
}
});
}
})
}
如图：
4、后台接收前台传过来的图片数据进行处理
public ActionResult SubmitPhoto()
{
//如果上传文件为空则返回
if (Request.Files.Count > )
{
//文件名
string fileName = "";
string code = "";
List<string> noCodes = new List<string>();
for (int i = ; i < Request.Files.Count; i++)
{
fileName = Request.Files[i].FileName; code = fileName.Substring(, fileName.LastIndexOf('.')); User_EP_Boiler bolier = OperateContext.Current.BllContext.IUser_EP_BoilerBll.GetModel(c => c.No == code && c.DeleteMark == && c.CompId == userContext.User.CompId); if (bolier == null)
{
noCodes.Add(code);
continue;
} string ext = Path.GetExtension(fileName).ToLower();
string filename = Guid.NewGuid().ToString() + ext;
string pathServer = "../Upload/" + userContext.Company.BranchStr + "/User_EPPhotos/" + filename;
bool result = false; bolier.Photos = filename; result = OperateContext.Current.BllContext.IUser_EP_BoilerBll.Modify(bolier); if (result)
{
Request.Files[i].SaveAs(IOHelper.GetMapPath(pathServer));
}
else
{
noCodes.Add(code);
continue;
} }
if (noCodes.Count <= )
{
return Json(new MsgModel() { Message = "全部操作成功", State = , Code = }, "text/html");
}
else
{
string result = "【";
foreach (string codestr in noCodes)
{
result += codestr + ",";
}
result = result.Substring(, result.Length - );
result += "】";
string message = "";
if (noCodes.Count == Request.Files.Count)
{
message = "图像对应的特种设备编号不存在或者操作失败";
}
else
{
message = "部分操作成功，图像对应的特种设备编号：" + result + "不存在或者操作失败";
}
return Json(new MsgModel() { Message = message, State = , Code = }, "text/html");
} }
else
{ return Json(new MsgModel() { Message = "请上传文件", State = }); }
}
页面有些地方使用了easyui和bootstrap的一些内容。。。没有显示出来。
记录下来，以免忘记，以后方便使用。
input(type='file')上传多张照片并显示，传到后台的更多相关文章
- input type=file 上传文件样式美化（转载）
input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
- input type=file上传控件老问题
// 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框. // 2.如果在手机上使用时,一般不会出现这种较丑的 // 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数 ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- 判断input[type=file]上传文件格式
input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...
- <input type=file>上传唯一控件
值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- 将通过<input type="file">上传的txt文件存储在localStorage，提取并构建File对象
参考博文: JS 之Blob 对象类型 在本地存储localStorage中保存图片和文件 <input type="file" id="jobData" ...
随机推荐
- Markdown语法及html内嵌
目录 1.Markdown介绍 2.Markdown语法介绍 3.内嵌html语法 之前看到很多大佬博客写的特别漂亮,非常羡慕,他们是怎么排版的呢?作为一个小白,学习使我快乐....终于在不断摸索 ...
- Fleck For Web Socket
效果图 (前沿).WebSocket是一种基于TCP/IP通讯一种新的通讯协议,它实现了服务器和客户端双工通讯,允许服务器主动发送给客户端. (浏览器对Socket的支持) . 浏览器 支持情况 Ch ...
- Quartz.NET学习笔记（三） 简单触发器
触发器是Quartz.NET的另外第一个核心元素,他有2种类型,简单触发器(Simple Trigger)和计划任务触发器(Cron Trigger), 一个触发器可以绑定一个任务. 通用触发器属性 ...
- Python爬虫入门教程 33-100 《海王》评论数据抓取 scrapy
1. 海王评论数据爬取前分析 海王上映了,然后口碑炸了,对咱来说,多了一个可爬可分析的电影,美哉~ 摘录一个评论 零点场刚看完,温导的电影一直很不错,无论是速7,电锯惊魂还是招魂都很棒.打斗和音效方面 ...
- Java提高班（四）面试必备—你不知道的数据集合
导读:Map竟然不属于Java集合框架的子集?队列也和List一样属于集合的三大子集之一?更有队列的正确使用姿势,一起来看吧! Java中的集合通常指的是Collection下的三个集合框架List. ...
- Spring Boot 2.x （十五）：Dubbo + Zookeeper + 新版Dubbo Admin
Dubbo 简介 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成. 它提供了三大核心能力: 面向接口的远程 ...
- 痞子衡嵌入式：常用的数据差错控制技术（3）- 和校验(Checksum)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里数据差错控制技术-和校验. 在系列前一篇文章里,痞子衡给大家介绍了比较简单的校验法-奇偶校验,该校验法主要是针对byte传输校验而 ...
- xshell连接虚拟机详解--技术流ken
xshell连接虚拟机 第一步:网络模式更改为桥接模式 第二步:重启网络 [root@ken1 ~]# systemctl restart network 第三步:获取IP地址 输入命令ip a 第四 ...
- Oracle day01 select where关键字
select关键字 作用:检索“列” 注意:1.select后面的列可以起别名(查询的显示结果) 1) 列名后面一个空格后添加别名(别名中不许有“空格”) 2) 列名后面一个空格后使用双引号添加别名 ...
- 多线程(5)async&await
.net 4.0的Task已经让我们可以非常简单地使用多线程,并且可以有返回值,也可以支持线程的取消等操作,可谓已经很强大了.但.net 4.5为我们带来了async&await,使得实现多线 ...