胖胖交友网,搜源码,武林外传 动画版
以下内容为网络摘抄和实践修改所得，如有雷同，请谅解！！！！
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>）的事件，图片显示和删除的方法
我要评论 1 var input = document.getelementbyid("file_input");
2 var result;
3 var dataarr = []; // 储存所选图片的结果(文件名和base64数据)
4 var fd; //formdata方式发送请求
5 var oselect = document.getelementbyid("select");
6 var oadd = document.getelementbyid("add");
7 var osubmit = document.getelementbyid("submit");
8 var oinput = document.getelementbyid("file_input");
9 var oclear = document.getelementbyid("clear");
10
11 if(typeof filereader==='undefined'){
12 alert("抱歉，你的浏览器不支持 filereader");
13 input.setattribute('disabled','disabled');
14 } else {
15 input.addeventlistener('change',readfile,false);
16 }
17 oselect.onclick=function(){
18 oinput.value = "";
19 //清空已选图片
20 $('.float').remove();
21 dataarr = [];
22 index = 0;
23 oinput.click();
24 }
25
26 oclear.onclick = function () {
27 oinput.value = "";
28 //清空已选图片
29 $('.float').remove();
30 dataarr = [];
31 index = 0;
32 }
33
34 function readfile() {
35 fd = new formdata();
36 var ilen = this.files.length;
37 var index = 0;
38 for (var i = 0; i < ilen; i++) {
39 //if (!(input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i))) { //判断上传文件格式
40 if (!this.files[i].name.match(/.jpg|.gif|.png|.jpeg|.bmp/i)) { //判断上传文件格式
41 return alert("上传的图片中含有格式不正确的图片，请重新选择!请选择.jpg|.gif|.png|.jpeg|.bmp格式的图片");
42 }
43 var filereader = new filereader();
44 filereader.index = i;
45 fd.append(i, this.files[i]);
46 filereader.readasdataurl(this.files[i]); //转成base64
47 filereader.filename = this.files[i].name;
48
49 filereader.onload = function (e) {
50 var imgmsg = {
51 name: this.filename,//获取文件名
52 base64: this.result //filereader.readasdataurl方法执行完后，filereader.result里
53 }
54 dataarr.push(imgmsg);
55 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>';
56 var div = document.createelement('div');
57 div.innerhtml = result;
58 div['classname'] = 'float ';
59 div['index'] = index;
60 document.getelementsbytagname('body')[0].appendchild(div); //插入dom树
61 //document.getelementbyid('append').appendchild(div);
62 var imgpic = div.getelementsbytagname('img')[0];
63 imgpic.onload = function () {
64 var nowheight = resizepic(this); //设置图片大小
65 this.parentnode.style.display = 'block';
66 var oparent = this.parentnode;
67 if (nowheight) {
68 oparent.style.paddingtop = (oparent.offsetheight - nowheight) / 3 + 'px';
69 }
70 }
71
72
73 div.onclick = function () {
74 this.remove(); // 在页面中删除该图片元素
75 delete dataarr[this.index]; // 删除dataarr对应的数据
76
77 }
78 index++;
79 }
80 }
81 }
82
83
84
85
86 function resizepic(thispic) {
87 var repicwidth = 100; //这里修改为您想显示的宽度值
88
89 var truewidth = thispic.width; //图片实际宽度
90 var trueheight = thispic.height; //图片实际高度
91
92 if (truewidth > trueheight) {
93 //宽大于高
94 var rewidth = repicwidth;
95 thispic.width = rewidth;
96 //垂直居中
97 var nowheight = trueheight * (rewidth / truewidth);
98 return nowheight; //将图片修改后的高度返回，供垂直居中用
99 } else {
100 //宽小于高
101 var reheight = repicwidth;
102 thispic.height = reheight;
103 }
104
105
106
107
108 }
109
110
111 function submitphoto() {
112 submitphoto("controllername");
113 }
如图：
3、提交到后台的方法
1 function submitphoto(controller) {
2 if (!dataarr.length) {
3 tipdialog("请选择文件", 1000, 3);
4 return;
5 }
6 loading(true, "正在提交数据...");
7 $("#form1").ajaxsubmit({
8 url: "/" + controller + "/submitphoto",
9 type: 'post',
10 //data : json.stringify(submitarr),
11 datatype: 'json',
12 //processdata: false, 用formdata传fd时需有这两项
13 //contenttype: false,
14 success: function (data) {
15 loading(false);
16
17 layer.alert(data.message, {
18 skin: 'layui-layer-lan'
19 , closebtn: 0
20 , anim: 4 //动画类型
21 , end: function () {
22 var index = parent.layer.getframeindex(window.name); //获取窗口索引
23 parent.layer.close(index); // 关闭layer
24 }
25 });
26
27
28 }
29
30 })
31 }
如图：
4、后台接收前台传过来的图片数据进行处理
public actionresult submitphoto()
{
//如果上传文件为空则返回
if (request.files.count > 0)
{
//文件名
string filename = "";
string code = "";
list<string> nocodes = new list<string>();
for (int i = 0; i < request.files.count; i++)
{
filename = request.files[i].filename;
code = filename.substring(0, filename.lastindexof('.'));
user_ep_boiler bolier = operatecontext.current.bllcontext.iuser_ep_boilerbll.getmodel(c => c.no == code && c.deletemark == 0 && 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 <= 0)
{
return json(new msgmodel() { message = "全部操作成功", state = 1, code = 1 }, "text/html");
}
else
{
string result = "【";
foreach (string codestr in nocodes)
{
result += codestr + ",";
}
result = result.substring(0, result.length - 1);
result += "】";
string message = "";
if (nocodes.count == request.files.count)
{
message = "图像对应的特种设备编号不存在或者操作失败";
}
else
{
message = "部分操作成功，图像对应的特种设备编号：" + result + "不存在或者操作失败";
}
return json(new msgmodel() { message = message, state = 1, code = 1 }, "text/html");
}
}
else
{ return json(new msgmodel() { message = "请上传文件", state = 0 }); }
}
页面有些地方使用了easyui和bootstrap的一些内容。。。没有显示出来。
记录下来，以免忘记，以后方便使用。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论