本主题主要涉及两个新内容:

1、上传文件(主要使用了FormData)

2、本地预览(主要使用了FileReader)

html5的FormData其实就是平时的Form表单,只是html5可以直接新建这样一个对象,然后通过ajax提交

FormData对象有一个方法:append(Object name,Object value,[String blobName])

然后上传文件跟平时的流程一样了:

前台有<input type="file" id="upload" />

var el = document.getElementById("upload");
if (el.files.length <= 0) return; var data = new FormData();
data.append("后台取得文件的key", el.files[0]);
$.ajax({
url: "Handler1.ashx",
type: "POST",
data: data,
processData: false, //不处理数据
contentType: false //不修改MIME类型
})

后台就是直接用postfile接收就可以了

HttpPostedFile file = context.Request.Files["前台定义的key"];
string strSavePath = context.Server.MapPath("文件名");
file.SaveAs(strSavePath);

FileReader其实就是一个读取用户选择文件的base64数据的对象

var reader = new FileReader();
reader.onload = function () {
$("<img src='" + this.result + "'/>").appendTo("body");
}
reader.readAsDataURL($("#UploadFile").get(0).files[0]); //读出文件的base64

ajax:html5上传文件,上传之前可以实现本地预览的更多相关文章

  1. python自动化之上传文件的3种方法和图片预览

    ajax上传文件的三种方法 第一种xhr提交 function xhrSubmit(){ // $('#fafafa')[0] var file_obj = document.getElementBy ...

  2. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  3. 怎么样通过php使用html5实现多文件上传?(php多图上传)

    <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...

  4. python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)

    一.上传文件 上传一个图片 使用input type="file",来上传一个文件.注意:form表单必须添加属性enctype="multipart/form-data ...

  5. JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  6. 将Windows上的文件上传到Linux上

    下载一个SSH Secure Shell Client即可. SSHSecureShellClient-3.2.9下载地址: 免费下载地址在 http://linux.linuxidc.com/ 用户 ...

  7. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  8. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  9. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

随机推荐

  1. SpringMVC08转发和重定向

    public class User { private String name; private Integer age; public String getName() { return name; ...

  2. NuGet学习笔记(1)——初识NuGet及快速安装使用(转)

    关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...

  3. linux 分区

    1.硬盘分区分为基本分区和扩展分区, 扩展分区分下去就是逻辑分区,而且逻辑分区没有数量上的限制. 2.查看linux系统分区具体情况 fdisk - l 3.查看某个目录是哪个分区下的 df /boo ...

  4. [转载] HDFS and Erasure Codes (HDFS-RAID)

    The Hadoop Distributed File System has been great in providing a cloud-type file system. It is robus ...

  5. jquery中的html()、text()、val()的区别

      1.html(),text(),val()三种方法都是用来读取选定元素的内容: html()是用来读取元素的HTML内容(包括其Html标签),text()用来读取元素的纯文本内容,包括其后代元素 ...

  6. 3.3.2 嵌入汇编(摘自<linux内核完全剖析>)

    内核C语言程序嵌入式汇编代码又叫内联汇编,具有输入和输出参数的嵌入汇编语句的基本格式为: ************************************************** asm( ...

  7. jquery判断滚动条到底

    $(document).scroll(function(){ var dHeight = $(document).height(); var wHeight = $(window).height(); ...

  8. 使用 Nuget打包类库

    使用 Nuget打包类库 NuGet是个开源项目,项目包括 NuGet VS插件/NuGet Explorer/NuGetServer/NuGet命令行等项目,.NET Core项目完全使用Nuget ...

  9. 使用minidwep-gtk-PJ-wifi教程中文版

  10. ubuntu下wine打开自由们找不到MFC42.DLL重新安装的解决方法

    一直在找ubuntu下的X墙工具,看到大部分的都是ssh和tor的,但是tor下载不到,找了很多方法,没有办法,只能用FG了.但是Fg是运行在windows系统下的程序. 只好再安装一遍wine,用终 ...