MVC异步上传图片到本地/服务器

这两天朋友问我，有没有异步上传图片到本地/服务器这种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
    }
}