一、移动端

前端使用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>
  7. <!--脚本实现-->
  8. /**
  9. * 上传图片 单个
  10. **/
  11. function SaveImg() {
  12. // js 获取文件对象
  13. var fileObj = document.getElementById("image").files[0];
  14. if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
  15. alert("请选择图片信息!");
  16. return;
  17. }
  18. var formFile = new FormData();
  19. formFile.append("action", "img");
  20. formFile.append("file", fileObj); //加入文件对象
  21. var data = formFile;
  22. $.ajax({
  23. url: "/Upload/SaveImg",//负责处理的接口
  24. data: data,
  25. type: "Post",
  26. dataType: "json",
  27. cache: false,//上传文件无需缓存
  28. processData: false,//用于对data参数进行序列化处理 这里必须false
  29. contentType: false, //必须
  30. success: function (result) {
  31. /**
  32. result格式:
  33. {
  34. "state":"success/error",
  35. "url":"图片服务器路径",
  36. "msg":"接口返回提示信息(成功/失败)",
  37. "code":"错误编码,自定义"
  38. }
  39. **/
  40. if (result.state == "success") {
  41. $("#imgTitleUrl").val(result.url);
  42. alert(result.msg);
  43. } else {
  44. alert(result.msg);
  45. }
  46. },
  47. })
  48. }

后台接口处理:

  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);
  4. //处理多张图片上传
  5. for (let i = 0; i<fileObjList.length; i++) {
  6. formFile.append("file"+i, fileObjList[i]);
  7. }

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

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

二、PC端

前端使用Layui框架:

html部分:

  1. <button type="button" class="layui-btn layui-btn-danger" id="ImgUpload" style="margin-top: 5px"><i class="layui-icon"></i>上传图片</button>
  2. <span id="appendTo"></span>
  3. <span style="margin-left: 5px">图片大小不超过4M。</span>
  4. <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  5. 预览图:
  6. <div class="layui-upload-list" id="demo2"></div>
  7. </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; // 设置数据库保存的路径
  34. return Json(new {content = saveFileName, success = true});
  35. }
  36. }
  37. }
  38. return Json(new {content = "图片保存失败!", success = true});
  39. }