MVC 通过ajaxSubmit上传图片并显示

js代码
function submitform() {
        $("#form_upload").ajaxSubmit({
            success: showResponse
        });
    }

    function showResponse(responseText) {
        if (responseText != null) {
            alert(‘上传成功!‘);
        } else {
            alert(‘操作失败!‘);
        }
    }

    $(function () {
        $("#upImg").on("change", function () {
            var file = this.files[0];

            if (this.files && file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $(‘#result‘).attr(‘src‘, e.target.result);
                }
                reader.readAsDataURL(file);
            }
        });
    })
前台代码
<table>
                <tr>
                    <td style="padding-top:20px;">生产(经营)许可证证件照片</td>
                    <td>
                        <form id="form_upload" style="height:4px;" action="Upload" target="iframeInfo" method="post" enctype="multipart/form-data">
                            <input name="upImg" id="upImg" type="file" />
                            <input type="submit" value="上传" />
                        </form>                        
                    </td>
                </tr>
                <tr>
                    <td>
                        <img id="result" style="width:200px;height:200px;" src="" >
                    </td>
                    <td>
                        <iframe name="iframeInfo" id="iframeInfo" style="border:0px;"></iframe>
                    </td>
                </tr>
            </table>
            
 (这里添加iframe,因为后台返回时会跳转,把form放入iframe里提交就不会跳转页面)
后台代码 
[HttpPost]        
        public ActionResult Upload(HttpPostedFileBase upImg)
        {
            if (upImg == null)
            {
                return Content("文件上传错误,请重新选择文件!");

            }
            string fileName = System.IO.Path.GetFileName(upImg.FileName);
            string filePhysicalPath = Server.MapPath("~/credimages/" + fileName);
            try
            {
                upImg.SaveAs(filePhysicalPath);
                Session["ImgPath"] = filePhysicalPath;
                return Content("上传成功");
            }
            catch
            {
                return Content("上传异常 !");

            }
        }
时间: 2024-10-09 17:52:08

MVC 通过ajaxSubmit上传图片并显示的相关文章

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图片上传并显示缩略图

前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了,不过图片上传当然只能是图片格式的文件,因此在之前那篇博客中 通过控制格式的上传便能防止恶意上传,这个是文件上传的教程链接:http://www.cnblogs.com/xmfdsh/p/3988868.html 对于数据库的设计的话就随便点: 于是用EF便自动生成了类如下: public part

在VS2013 MVC项目中上传图片

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

Js实现input上传图片并显示缩略图

用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可 具体代码如下: function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; v

Meteor中 用collectionFS上传图片并显示到界面上

用collectionFS上传图片并显示到界面上关键是要,确定是否完全上传完成,再通过Session通知界面显示 .方法 有两种:1,用fileObj.hasStored('你的数据库表名')  2. file.isUploaded() 本文用第一种方法. 原文:http://blog.csdn.net/casun_li/article/details/46356379 1. 服务器端 //图标文件 images = new FS.Collection("imges",{ stores

MVC 5使用ViewData(模型)显示数据

看过此篇<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html 都明白在控制器使用ViewData(object)进行传递数据给View(视图).现在在这基础之上,使用ViewData(模型)来从控制器传递数据给视图. 操作上均是相同的步骤,只是在控制器与视图中写代码不相同而已.在下图中,我们只是comment out #23和#25行代码,改为#27行代码.是直接把实例对象传入View()中. 接下来,看看视图

MVC 5使用ViewData(对象)显示数据

控制器协调处理好数据之后,是交由视图来显示数据.在控制器与视图交互有一个是ViewData.这次练习,Insus.NET就以它来做实例. 前些时间,Insus.NET实现的练习中,也有从控制器传数据给视图的,如:<DataTable数据显示于MVC应用程序>http://www.cnblogs.com/insus/p/3361182.html<MVC用非Entity Framework将数据显示于视图>http://www.cnblogs.com/insus/p/3364235.h

MVC 5使用ViewBag(对象)显示数据

前面Insus.NET有演示使用ViewData来实现控制器与视图的通讯.如果想了解的话,可以从下面两个链接可以查看:<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html<MVC 5使用ViewData(模型)显示数据>http://www.cnblogs.com/insus/p/3377217.html 此篇是学习另外一个方式,是使用ViewBag(object)来实现控制器与视图之间的交互. 在

MVC ajaxSubmit上传图片

1.页面cshtml <form name="frmInput" id="frmInput" method="post" action="@Url.Action(ViewContext.RouteData.Values["Action"].ToString())" enctype="multipart/form-data" > <input id="f1&qu