ajax:html5上传文件,上传之前可以实现本地预览
2016-09-08 09:57
633 查看
本主题主要涉及两个新内容:
1、上传文件(主要使用了FormData)
2、本地预览(主要使用了FileReader)
html5的FormData其实就是平时的Form表单,只是html5可以直接新建这样一个对象,然后通过ajax提交
FormData对象有一个方法:append(Object name,Object value,[String blobName])
然后上传文件跟平时的流程一样了:
前台有<input type="file" id="upload" />
后台就是直接用postfile接收就可以了
FileReader其实就是一个读取用户选择文件的base64数据的对象
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
相关文章推荐
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
- jQuery插件AjaxFileUpload可以实现ajax文件上传
- 利用html5的FormData对象和ajax实现异步文件上传
- 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
- MVC5:使用Ajax和HTML5实现文件上传功能
- (转)使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- HTML5本地拖拽上传实现图片预览功能的实践总结
- 用html5文件api实现移动端图片上传&预览效果
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 基于HTML5 Ajax实现文件上传并显示进度条
- html5-php的ajax文件上传实现
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- html5用ajax方式实现文件上传并显示进度
- 基于ajax的Html5文件上传插件,带进度并支持图片预览
- 上传文件之前本地预览
- JavaScript实现拖拽预览,AJAX小文件上传
- 利用html5的FileReader对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)
- MVC5:使用Ajax和HTML5实现文件上传功能