一、移动端

前端使用jquery写的样式及函数。

基础前端代码：

  1.  <!--H5-->
  2.  <!--非常基础的配置，你放在什么位置都是可以的-->
  3.  //之后为了入库的处理存储位置   主要是上传成功后更新图片路径
  4.  <input id="imgTitleUrl" name="imgTitleUrl" type="text" class="form-control " />
  5.  <input id="image" name="image" type="file" />
  6.  <a href="javascript:;" onclick="SaveImg()" style="background-color: blue;" class="label">上传服务器</a>
  8.  <!--脚本实现-->
  10.     /**
  11.      * 上传图片  单个
  12.      **/
  13.     function SaveImg() {
  14.         // js 获取文件对象
  15.         var fileObj = document.getElementById("image").files[0]; 
  16.         if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
  17.             alert("请选择图片信息！");
  18.             return;
  19.         }
  20.         var formFile = new FormData();
  21.         formFile.append("action", "img");
  22.         formFile.append("file", fileObj); //加入文件对象
  23.         var data = formFile;
  24.         $.ajax({
  25.             url: "/Upload/SaveImg",//负责处理的接口
  26.             data: data,
  27.             type: "Post",
  28.             dataType: "json",
  29.             cache: false,//上传文件无需缓存
  30.             processData: false,//用于对data参数进行序列化处理 这里必须false
  31.             contentType: false, //必须
  32.             success: function (result) {
  33.             /**
  34.             result格式：
  35.             {
  36.                 "state":"success/error",
  37.                 "url":"图片服务器路径"，
  38.                 "msg":"接口返回提示信息(成功/失败)"，
  39.                 "code":"错误编码，自定义"
  40.             }
  41.             **/
  42.                 if (result.state == "success") {
  43.                     $("#imgTitleUrl").val(result.url);
  44.                     alert(result.msg);
  45.                 } else {
  46.                     alert(result.msg);
  47.                 }
  48.             },
  49.         })
  50.     }

后台接口处理： 

  1.         /// <summary>
  2.         /// 本地上传图片信息至服务器处理
  3.         /// </summary>
  4.         /// <returns></returns>
  5.         [HttpPost] 
  6.         public ActionResult SaveImg()
  7.         {
  8.             Hashtable ht = new Hashtable();
  9.             string imgurl = "";
  10.             foreach (string key in Request.Files)
  11.             {
  12.                 //这里只测试上传第一张图片file[0]
  13.                 HttpPostedFileBase file0 = Request.Files[key];
  14.                 //转换成byte,读取图片MIME类型
  15.                 Stream stream;
  16.                 int size = file0.ContentLength / 1024; //文件大小KB
  17.                 if (size > 1024)
  18.                 {
  19.                     ht.Add("state", "error");
  20.                     ht.Add("msg", "图片不能超过1M！");
  21.                     ht.Add("code", "-2");
  22.                     ht.Add("url", "");
  23.                     return Json(ht);
  24.                 }
  25.                 byte[] fileByte = new byte[2];//contentLength，这里我们只读取文件长度的前两位用于判断就好了，这样速度比较快，剩下的也用不到。
  26.                 stream = file0.InputStream;
  27.                 stream.Read(fileByte, 0, 2);//contentLength，还是取前两位
  28.                 //获取图片宽和高
  29.                 //System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
  30.                 //int width = image.Width;
  31.                 //int height = image.Height;
  32.                 string fileFlag = "";
  33.                 if (fileByte != null && fileByte.Length > 0)//图片数据是否为空
  34.                 {
  35.                     fileFlag = fileByte[0].ToString() + fileByte[1].ToString();
  36.                 }
  37.                 string[] fileTypeStr = { "255216", "7173", "6677", "13780" };//对应的图片格式jpg,gif,bmp,png
  38.                 if (fileTypeStr.Contains(fileFlag))
  39.                 {
  40.                     string action = Request["action"];
  41.                     //存储路径    一般情况下都是uploads文件夹
  42.                     string path = "/uploads/"+DateTime.Now.Year+"/"+ DateTime.Now.Month+"/";
  43.                     //文件名称     我用的时间+名称处理  一般会增加一个随机数
  44.                     string fileName = DateTime.Now.Millisecond+Request.Files[key].FileName  ;
  45.                     string fullpath = path;
  46.                     //校验文件夹是否存在  不存在进行创建
  47.                     if (!Directory.Exists(Server.MapPath(fullpath)))
  48.                     {
  49.                         Directory.CreateDirectory(Server.MapPath(fullpath));
  50.                     }
  51.                     //文件保存信息
  52.                     Request.Files[key].SaveAs(Server.MapPath(fullpath)+ fileName);
  53.                     //最后输出存储的图片路径信息
  54.                     imgurl = fullpath + fileName; 
  55.                 }
  56.                 else
  57.                 {
  58.                     ht.Add("state","error");
  59.                     ht.Add("msg", "图片格式不正确！");
  60.                     ht.Add("code","-1");
  61.                     ht.Add("url", "");
  62.                     return Json(ht);
  63.                 }
  64.                 stream.Close();
  65.             }
  66.             ht.Clear();
  67.             ht.Add("state", "success");
  68.             ht.Add("url", imgurl);
  69.             ht.Add("msg", "上传成功！");
  70.             ht.Add("code", "0");
  71.             return Json(ht); 
  72.         }

结语：

  1. 接口处理的时候 为了省事 直接用Json输出了 这样看起来比较方便，
  2. 接口处理是可以进行多个图片的处理的， 上述例子中在传值的时候将file[0]删掉。imgurl处理起来也比较快，先判断是否为空，空就取第一个URL，不为空用，(英文)隔开就行。

    具体实现：

  1. var fileObj = document.getElementById("choose-file").files; 
  2. //原生js获取的DOM集合是一个类数组对象，不能直接利用数组的方法 （例如：forEach，map等），需要进行转换为数组后，才能用数组的方法！
  3. let fileObjList = Array.prototype.slice.call(fileObj);
  5. //处理多张图片上传
  6. for (let i = 0; i<fileObjList.length; i++) {
  7.     formFile.append("file"+i, fileObjList[i]);
  8. }

原理就是formFile append 多个键值对，后台根据Request.Files的key进行循环存储图片。

至于多张图片的样式问题，建议结合jquery使用，特别多张图片的处理。

二、PC端

前端使用Layui框架：

html部分：

  2.  <button type="button" class="layui-btn layui-btn-danger" id="ImgUpload" style="margin-top: 5px"><i class="layui-icon"></i>上传图片</button> 
  3.  <span id="appendTo"></span> 
  4.  <span style="margin-left: 5px">图片大小不超过4M。</span> 
  5.  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 
  6.      预览图： 
  7.      <div class="layui-upload-list" id="demo2"></div> 
  8.  </blockquote>

js部分：

  1. //上传图片，设定文件大小限制
  2. upload.render({
  3. elem: '#ImgUpload',
  4. url: '@Url.Action("Upload", "MISOption")',//此处配置你自己的上传接口即可,
  5. // size: 4096 //限制文件大小，单位 KB, 4096代表4M,
  6. before: function(obj){
  7.   //预读本地文件示例，不支持ie8
  8.   obj.preview(function(index, file, result){
  9.       $('#appendTo').append('<span class="delete-css"><button id="upload_img" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#xe640;</i></button></span>');
  10.       $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="100px" height="200px">');
  11.       //删除某图片
  12.       $("#upload_img").bind('click', function () {
  13.           delete file;
  14.           $("#container").remove();
  15.           var demoText = $('#demoText');
  16.           demoText.html('');
  17.           $("#ImgUpload").attr("disabled",false);
  18.       });
  19.   });
  20. },
  21. done: function(res){
  22.     $("#ImgUpload").attr("disabled","true");
  23.     layer.msg('仅支持上传一张图片！');
  24.   // console.log(res)
  25. }
  26. });

后端部分：

  1. //保存图片，获取图片存储本地的URL，然后存入数据库
  2. [HttpPost]
  3. public ActionResult Upload(HttpPostedFileBase file)
  4. {
  5.     //获取文件
  6.     HttpPostedFileBase proImage = Request.Files["imgUploadName"]; //获取上传的图片
  7.     if (file != null)
  8.     {
  9.         if (file.ContentLength == 0)
  10.         {
  11.             return Json(new {content = "不可上传空图片！", success = true});
  12.         }
  13.         else
  14.         {
  15.             string fileName = file.FileName;
  16.             string fileFormat = fileName.Split('.')[fileName.Split('.').Length - 1]; // 以“.”截取，获取“.”后面的文件后缀
  17.             Regex imageFormat = new Regex(@"^(bmp)|(png)|(gif)|(jpg)|(jpeg)"); // 验证文件后缀的表达式（自己写的，不规范别介意哈）
  18.             if (string.IsNullOrEmpty(fileName) || !imageFormat.IsMatch(fileFormat)) // 验证后缀，判断文件是否是所要上传的格式
  19.             {
  20.                 Json(new {content = "上传图片格式有误！", success = false});
  21.             }
  22.             else
  23.             {
  24.                 string timeStamp = DateTime.Now.Ticks.ToString(); // 获取当前时间的string类型
  25.                 string firstFileName = timeStamp.Substring(0, timeStamp.Length - 4); // 通过截取获得文件名
  26.                 string imageStr = "Upload/"; // 获取保存图片的项目文件夹
  27.                 string uploadPath = Server.MapPath("~/" + imageStr); // 将项目路径与文件夹合并
  28.                 string pictureFormat = fileName.Split('.')[fileName.Split('.').Length - 1]; // 设置文件格式
  29.                 string saveFileName = firstFileName + "." + fileFormat; // 设置完整（文件名+文件格式） 
  30.                 string saveFile = uploadPath + saveFileName; //文件路径
  31.                 file.SaveAs(saveFile); // 保存文件
  32.                 // 如果单单是上传，不用保存路径的话，下面这行代码就不需要写了！
  33.                 Global.imageUrl = imageStr + saveFileName; // 设置数据库保存的路径
  35.                 return Json(new {content = saveFileName, success = true});
  36.             }
  37.         }
  38.     }
  40.     return Json(new {content = "图片保存失败！", success = true});
  41. }