Mvc之Ajax上传图片

MyAjaxForm下载地址,点击此处下载

视图部分:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<form id="fm1" method="post">
    <input type="file" id="btnfile" name="btnfile" value="提交" />
    <input type="button" id="btn"  value="上传" />
</form>
<div id="divimg"></div>
@section scripts{
<script src="/scripts/MyAjaxForm.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
           // alert("ok2");
            $("#fm1").ajaxSubmit({
                url: ‘@Url.Action("Uploadfile")‘,
                type: ‘post‘,
                success: function (data) {
                    data = data.replace(‘<PRE>‘, ‘‘).replace(‘</PRE>‘, ‘‘);
                    $(‘#divimg‘).append(‘<img src="‘ + data + ‘" width="200px"  height="200px" />‘);
                    var file = $(‘#btnfile‘);
                    file.after(file.clone().val(‘‘));
                    file.remove();
                }
            });
        });
    });
</script>
}

  后台控制器部分

   public ActionResult Uploadfile()
        {
            //上传文件
            HttpPostedFileBase img = Request.Files["btnfile"];
            string s = img.FileName;
            string fileExtension = Path.GetExtension(s);
            string path = "/Temp/"  ;
            if (Directory.Exists(Server.MapPath(path)) == false)//如果不存在就创建file文件夹
            {
                Directory.CreateDirectory(Server.MapPath(path));
            }
            string virpath = path + Guid.NewGuid() + fileExtension ;

            img.SaveAs(Server.MapPath(virpath));
            return Content(virpath);
        }

  

时间: 2025-02-01 14:53:44

Mvc之Ajax上传图片的相关文章

在VS2013 MVC项目中上传图片

之前做网站项目时,凡遇到保存图片的,我都将图片上传后存储在服务器的本地文件夹中,在一个Controller的Action中,类似操作如下所示: public ActionResult UpLoad(HttpPostedFileBasearImg) {             //保存图片            if (arImg != null)            {                 string uploadName =arImg.FileName;//获取待上传图片的完整

MVC无刷新上传图片并显示

@{ ViewBag.Title = "Home Page"; } <script src="../../Scripts/swfobject.js" type="text/javascript"></script> <script src="../../Scripts/jquery.uploadify.v2.1.4.js" type="text/javascript">&

MVC中Ajax post Json和Ajax Get

在MVC中用ajax的方式传送数据 先创建实体 using System.ComponentModel; namespace ViewerWeb.Models { public class UserInfo { [DisplayName("用户名:")] public string UserName { get; set; } [DisplayName("年 龄:")] public int Age { get; set; } [DisplayName("

spring mvc 和ajax异步交互完整实例(转自CSDN) 附下载地址

spring mvc 和ajax异步交互完整实例 spring MVC 异步交互demo: demo下载地址:http://download.csdn.net/download/quincylk/9521375 1.jsp页面: [java] view plain copy print? <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-

MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证

原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证 MVC中,关于往后台提交的方法有: 1.Html.BeginForm():同步 2.Ajax.BeginForm():异步 3.js或jQuery提交后台 本文体验Ajax.BeginForm()方法.   View model using System; using System.ComponentModel.DataAnnotations;   namespace XHelent.Models { public

MVC的Ajax异步请求

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @using (Ajax.BeginForm("GetTime","order",new AjaxOptions()           {               Confirm="你确认这么做吗?",               HttpMethod="post",               OnSuccess

自己的项目结合MVC实现ajax跨域调用

好久没写东西了,自我检讨一下,写不完这篇不下班!! 最近在做一个项目模块通用的分享功能插件,由于各个模块调用所以会出现跨域问题,正好之前同事解决过,于是自己亲身实践把这次解决问题的经历记录下来.闲言少叙,书归正传~ 首先,项目背景,一个基于jquery的分享插件开发,自己也是尝试着写这么个东西,第一次写,质量肯定差,下次博文把这次开发经历写出来.由于这次解决ajax跨域的方法很简单,我就粘贴代码简单说明一下. 第一步:编写后台程序,MVC下代码如下:      //这是一个获取某个用户的通讯录分

Spring MVC 通过ajax实现前后台交互

先看前台ajax部分: 1 $('#delMd').click( 2 function(){ 3 if($('#reqState').val() == '2'){ 4 $.Dialog.show("申请单已提交审批,不能再更改"); 5 return false; 6 } 7 if($("#itemNo").val() == '0'){ 8 $.Dialog.show("请选择要删除的主数据"); 9 return false; 10 } 11

spring mvc接收ajax提交的JSON数据,并反序列化为对象

需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; $.ajax({ url: "/book/adddata", type: "POST", dataType: 'json', //必需设定,后台@RequestBody会根据它做数据反序列化 contentType:"application/json&quo