input(type='file')上传多张照片并显示，传到后台

以下内容为网络摘抄和实践修改所得，如有雷同，请谅解！！！！

1、首先是前端页面代码：

其中，<input type="file" id="file_input" name="filePath" multiple="multiple"/> ，需要设置multiple属性

#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" ...

随机推荐

ubuntu18下安装docker
1.通过指令检查linux内核 uname -a 可以看到大于3.10版本 2.检查是否存在对应目录 ls -l /sys/class/misc/device-mapper 3. apt-get指令 ...
vue组件，可以通过npm引用的组件
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调源码下载 ...
『2019/4/9 TGDay2模拟赛反思与总结』
2019/4/9 TGDay2模拟赛今天是$TG$模拟赛的第二天了,试题难度也是相应地增加了一些,老师也说过,这就是提高组的难度了.刚开始学难的内容,一道正解也没想出来,不过基本的思路也都是对了 ...
懵逼的this指向
请看以下代码: 以上的console.log打印出来的,如果你能完全知道,请忽略,如果你不知道,那就接下来看吧. console.log打印的结果: Google非常智能地把对象给打印出来了,看结果, ...
给vs2015添加EF
今天做EF的小例子时,发现需要添加实体数据模型,但是不管怎么找在新建项中都找不到这个选项,这是怎么回事,于是就开始百度吧,有的说可能是VS安装时没有全选,也有的人说可能是重装VS时,没有将注册表清除, ...
带着萌新看springboot源码04
继续开头说些废话,我也不知道什么鬼,每次写着写着经常会写到其他地方去了,太容易分神了. 这次说一下springboot对于springmvc的大概整个流程,以请求动态网页为例 . 1.梳理一下spri ...
windows下安装bpython方法（新）
刚开始学习python的时候使用的ipython解释器,挺好用的,后来发现bpython功能更强大,linux系统中安装基本没啥问题,不过在windows下安装倒是不容易啊.使用google搜了一下, ...
Python系列文章
前面带有[]符号的是待补充文章,有些可能在随后会跟着补上,有些可能有缘再补
在windows中创建.gitignore文件
1.先任意创建一个文件,例如:1.txt 2.打开cmd命令行窗口,到1.txt目录下 windows7/8输入ren 1.txt .gitignore修改成功 windows10输入mv 1.txt ...
python算法-选择排序
核心算法:固定位置,选择元素,即:先从序列中,找到最小的元素,放在第一个位置,之后找到第二小的元素,放在第二个元素,以此类推,就可以完成整个排序工作了. 代码示例如下: x=[6,3,2,7,4,9, ...

input(type='file')上传多张照片并显示，传到后台

input(type='file')上传多张照片并显示，传到后台的更多相关文章

随机推荐

热门专题