效果如图：

示例是基于asp.net mvc实现的

html代码：

<form id="form2" name="form2" class="form-horizontal" enctype="multipart/form-data" action="UploadIcon" method="post" target="ajaxUpload">

    <div class="form-group">

        <label for="inputIcon" class="col-sm-2 control-label">头像</label>

        <div class="col-sm-5">

            <input type="file" id="inputIcon" name="icon" accept="image/*" placeholder="路径" onchange="uploadFile()">

            <iframe name="ajaxUpload" frameborder="0" width="100px" height="100px"></iframe>

        </div>

    </div>

</form>

需要一个页面UploadIcon.cshtml：

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

</head>

<body>

    <img alt="" width="50px" height="50px" src="@ViewData["iconPath"]" />

</body>

</html>

JS代码：

function uploadFile() {

    $('#form2').submit();

}

C#代码：

public ActionResult UploadIcon()

{

    string fileName = Request.Files["icon"].FileName;

    string filePath = "/Data/UserIcon/Temp/" + Guid.NewGuid() + fileName.Substring(fileName.LastIndexOf('.'));

    Request.Files["icon"].SaveAs(Server.MapPath(filePath));

    ViewData["iconPath"] = filePath;

    return View();

}

无刷新文件上传 利用iframe实现的更多相关文章

  1. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  2. 使用PHP和HTML5 FormData实现无刷新文件上传教程

    无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...

  3. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  4. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  5. 实用ExtJS教程100例-009：ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...

  6. ie8实现无刷新文件上传

    ie8由于无法使用FormData,想要无刷新上传文件就显得比较麻烦.这里推荐使用jQuery-File-Upload插件,它能够很方便的解决ie8无刷新文件上传问题.(最低兼容到ie6) jQuer ...

  7. SpringMVC ajax技术无刷新文件上传下载删除示例

    参考 Spring MVC中上传文件实例 SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传 Spring MVC 文件上传下载 (FileOperateUtil.ja ...

  8. php利用iframe实现无刷新文件上传功能

    上传原理很简单就是利用表单的打开方式为iframe的name名,这样就可以在当前页面的iframe打来了,实现文件上传,再利用js返回上传结果. form target .在 action 属性中规定 ...

  9. jquery无刷新文件上传 解决IE安全性问题

    很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...

随机推荐

  1. magento登陆

    magento判断用户登录 Magento 登陆之后返回登录之前的页面 magento 在登陆后一般会自动跳转到 My Account 页面 但是经常会有需求 就是登陆自动跳转到 之前的页面里面 工具 ...

  2. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  3. OpenCV 学习笔记03 凸包convexHull、道格拉斯-普克算法Douglas-Peucker algorithm、approxPloyDP 函数

    凸形状内部的任意两点的连线都应该在形状里面. 1 道格拉斯-普克算法 Douglas-Peucker algorithm 这个算法在其他文章中讲述的非常详细,此处就详细撰述. 下图是引用维基百科的.ε ...

  4. Ilist<object>转换成I<实体> 如何转换

    ml = objects.Cast<menu>().ToList(); //需要 using System.Linq;

  5. 使用JDBC改变Oracle的session參数 NLS_DATE_FORMAT

    近期项目除了一个问题,场景大概是这种,项目在国外开发.在项目开发过程中使用了大量的Oracle函数TO_DATE,可是开发者没有写第二个參数. 所以项目在国外的server上能够正常执行.但是在国内的 ...

  6. springboot 1.5.x 使用tomcat8设置cookie的domain以dot开头报错

    "C:\Program Files\Java\jdk1.7.0_75\bin\java" -XX:TieredStopAtLevel=1 -noverify -Dspring.ou ...

  7. 学习笔记之 curl 命令用法详解

    [前言]     本文翻译和整理自 Linux-2.6.32 中和 curl 相关的 Manual Page 描述文档. 文档目的仅在提醒读者所遗忘的知识点,故在整理时削弱了阅读流畅性,适用于对 cu ...

  8. (面试)Statement和PrepareStatement有什么区别

    (1)Statement用于执行静态sql语句,在执行时,必须指定一个事先准备好的sql语句.PrepareStatement是预编译的sql语句对象,sql语句被预编译并保存在对象中.被封装的sql ...

  9. 使用equals方法时，要注意

    这是我在项目中犯的一个低级错误: 使用equals方法时,要注意这个方法是boolean java.lang.String.equals(Object anObject)传递的是Object,所以传任 ...

  10. Android下Notification,样式style,主题theme的功能实现

    一:Notification 1.NotificationManager nm = (NotificationManager) getSystemService(NOTIFICATION_SERVIC ...