效果如图：

示例是基于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. elk之elasticsearch 入门

    一.概述: 1.查看elasticsearch集群的健康状况: [root@node115 kibana]# curl -X GET http://192.168.39.115:9200/_cat/h ...

  2. 【转】TeXmacs：一个真正“所见即所得”的排版系统

    TeXmacs:一个真正“所见即所得”的排版系统 好久没有推荐过自己喜欢的软件了,现在推荐一款我在美国做数学作业的私家法宝:TeXmacs.我恐怕不可能跟以前那么有闲心写个长篇的 TeXmacs 说明 ...

  3. android Jni NDK开发环境搭建及其简单实例的编写

    android  Jni  NDK开发环境搭建及其简单实例的编写 由于工作需要,需要采用开发想要的JNI,由于之前没有接触过安卓的开发,所以更加网上的帖子,学习了下.遇到了些问题,然后总结下学习过程中 ...

  4. [转]@PathVariable和@RequestParam的区别

    请求路径上有个id的变量值,可以通过@PathVariable来获取  @RequestMapping(value = "/page/{id}", method = Request ...

  5. MySQL设置从库只读模式

    常见现象 运维工作中会经常维护MySQL主从服务器,当然Slave我们只是用于读操作. 一般权限开通也只授权只读账号,但是有时候维护工作可能不是一个人在做,你不能保证其他同事都按照这个标准操作. 有同 ...

  6. Android Activity标签属性

    Android Activity标签属性 Activity 是 Android 系统四大应用组件之一,用户可与 Activity 提供的屏幕进行交互,以执行拨打电话.拍摄照片.发送电子邮件等操作开发者 ...

  7. nmap 端口扫描工具

    nmap工具介绍 一.简介 nmap :也就是Network Mapper,最早是Linux下的网络扫描和嗅探工具包. nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务 ...

  8. Windows 7 添加SSD硬盘后重启卡住正在启动

    楼主办公电脑,原来只配置了一块机械硬盘,用着总很不顺心,于是说服领导给加了块SSD固态硬盘. 操作如下: 1.在PE下分区格式化新固态硬盘,将原来机械硬盘的C盘GHOST备份后还原到新固态硬盘: 2. ...

  9. php分享十二：分组取前N记录

    经常看到问题,如何取出每组的前N条记录 http://blog.csdn.net/acmain_chm/article/details/4126306 问题:有表 如下,要求取出各班前两名(允许并列第 ...

  10. memcached（一）：linux下memcached安装以及启动

    一. 安装文件 Linux系统安装memcached,首先要先安装libevent库. 下载memcached与libevent的安装文件 http://memcached.org/files/mem ...