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

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 noCodes = new 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的一些内容。。。没有显示出来。

记录下来，以免忘记，以后方便使用。