码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-08 16:53:28      阅读:350      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/29boke/p/5470851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!