以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!!
1、首先是前端页面代码:
其中, ,需要设置multiple属性
@**@ @**@ |
<div id="append" style="width:100%;height:5px;"></div>
</body>
如图:
2、写选择图片()和清空图片()的事件,图片显示和删除的方法
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
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的一些内容。。。没有显示出来。
记录下来,以免忘记,以后方便使用。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章