ajax:html5上传文件,上传之前可以实现本地预览
本主题主要涉及两个新内容:
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上传文件,上传之前可以实现本地预览的更多相关文章
- python自动化之上传文件的3种方法和图片预览
ajax上传文件的三种方法 第一种xhr提交 function xhrSubmit(){ // $('#fafafa')[0] var file_obj = document.getElementBy ...
- ajax方式提交带文件上传的表单,上传后不跳转
ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...
- 怎么样通过php使用html5实现多文件上传?(php多图上传)
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...
- python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)
一.上传文件 上传一个图片 使用input type="file",来上传一个文件.注意:form表单必须添加属性enctype="multipart/form-data ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
- 将Windows上的文件上传到Linux上
下载一个SSH Secure Shell Client即可. SSHSecureShellClient-3.2.9下载地址: 免费下载地址在 http://linux.linuxidc.com/ 用户 ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- jQuery图片上传前先在本地预览
js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...
随机推荐
- SpringMVC08转发和重定向
public class User { private String name; private Integer age; public String getName() { return name; ...
- NuGet学习笔记(1)——初识NuGet及快速安装使用(转)
关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...
- linux 分区
1.硬盘分区分为基本分区和扩展分区, 扩展分区分下去就是逻辑分区,而且逻辑分区没有数量上的限制. 2.查看linux系统分区具体情况 fdisk - l 3.查看某个目录是哪个分区下的 df /boo ...
- [转载] HDFS and Erasure Codes (HDFS-RAID)
The Hadoop Distributed File System has been great in providing a cloud-type file system. It is robus ...
- jquery中的html()、text()、val()的区别
1.html(),text(),val()三种方法都是用来读取选定元素的内容: html()是用来读取元素的HTML内容(包括其Html标签),text()用来读取元素的纯文本内容,包括其后代元素 ...
- 3.3.2 嵌入汇编(摘自<linux内核完全剖析>)
内核C语言程序嵌入式汇编代码又叫内联汇编,具有输入和输出参数的嵌入汇编语句的基本格式为: ************************************************** asm( ...
- jquery判断滚动条到底
$(document).scroll(function(){ var dHeight = $(document).height(); var wHeight = $(window).height(); ...
- 使用 Nuget打包类库
使用 Nuget打包类库 NuGet是个开源项目,项目包括 NuGet VS插件/NuGet Explorer/NuGetServer/NuGet命令行等项目,.NET Core项目完全使用Nuget ...
- 使用minidwep-gtk-PJ-wifi教程中文版
- ubuntu下wine打开自由们找不到MFC42.DLL重新安装的解决方法
一直在找ubuntu下的X墙工具,看到大部分的都是ssh和tor的,但是tor下载不到,找了很多方法,没有办法,只能用FG了.但是Fg是运行在windows系统下的程序. 只好再安装一遍wine,用终 ...