标签:
这两天朋友问我,有没有异步上传图片到本地/服务器这种demo,他有用, 我就想,好吧, 那刚好周末了,整理一套出来。
主要用到的是jquery uploadify 这个juqery的插件 ,可以无刷新,直接后台上传返回地址
下面先看前台的代码:
@{ ViewBag.Title = "Demo"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section styles{ <link href="~/Content/uploadify.css" rel="stylesheet" /> } <h2>Demo</h2> <h2>实例</h2> <div class="form-group"> <input class="form-control" type="file" id="PickImage" name="PickImage" value="浏览图片" /> </div> <div class="form-group"> <img class="img-rounded" id="Rimg" width="200" height="200"/> </div> @section scripts{ <script src="~/Scripts/jquery.uploadify.min.js"></script> <script> jQuery(function () { $(‘#PickImage‘).uploadify({ ‘swf‘: ‘/Content/uploadify.swf‘, ‘buttonText‘: ‘选择图片并上传‘, ‘uploader‘: ‘@Url.Action("UploadImage","Demo")‘, ‘fileTypeDesc‘: ‘图片类型‘, ‘fileTypeExts‘: ‘*.jpg;*.jpeg;*.png‘, "formData": { "folder": "/product/" }, onUploadSuccess: function (localFileObject, serverData, receivedResponse) { console.log(serverData) if (typeof (serverData) == "string") serverData = JSON.parse(serverData); $("#HeadImgurl").val(serverData.ImagePath); $("#Rimg").attr("src", serverData.ImagePath); }, onUploadComplete: function (fileObj) { } }); }); </script> }
后台的代码也很简单:
using System; using System.Collections.Generic; using System.Configuration; using System.IO; using System.Linq; using System.Web; using System.Web.Mvc; namespace Demo_UploadImageToServer.Controllers { public class DemoController : Controller { // GET: Demo public ActionResult Demo() { return View(); } #region 帮助方法 //图片异步上传 public ActionResult UploadImage() { Response.ContentType = "text/plain"; Response.Charset = "utf-8"; HttpPostedFileBase file = Request.Files["Filedata"]; string path = ConfigurationManager.AppSettings["Domain"].ToString(); //填写服务器域名 string basePath = "/UploadPic/"; string uploadPath = Server.MapPath(basePath); //本地路径 if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } string fileName = file.FileName; string ext = fileName.Substring(fileName.LastIndexOf(".")); fileName = DateTime.Now.Ticks + ext; file.SaveAs(uploadPath + fileName); //服务器上传 //return Json(new { ImagePath = string.Format("{0}{1}{2}", path, basePath, fileName) }); //本地上传 return Json(new { ImagePath = string.Format("{0}{1}", basePath, fileName) }); } else { return Json(new { error = 0 }); } } #endregion } }
标签:
原文地址:http://www.cnblogs.com/29boke/p/5470851.html