【转】jQuery异步上传文件
用了 jQuery Form插件来解决这个问题:http://malsup.com/jquery/form/#code-samples
有没有不用该插件来实现呢?
解决方法:
可以采用HTML5,用jQuery,Ajax实现文件上传,不仅如此,你可以做文件验证(名称,大小,MIME类型)或利用HTML5的进度标签(或者div)处理进度事件。
最近我也在做文件上传,我不想用flash、iframe或其它插件,经过一番研究,我想出了解决方案。
HTML:
1
2
3
4
5
|
<form enctype= "multipart/form-data" > <input name= "file" type= "file" /> <input type= "button" value= "Upload" /> </form> <progress></progress> |
首先,你可以做一些验证,例如文件的onChange事件:
1
2
3
4
5
6
7
|
$( ':file' ).change(function(){ var file = this .files[0]; name = file.name; size = file.size; type = file.type; //your validation }); |
按钮点击触发Ajax:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$( ':button' ).click(function(){ var formData = new FormData($( 'form' )[0]); $.ajax({ url: 'upload.php' , //server script to process data type: 'POST' , xhr: function() { // custom xhr myXhr = $.ajaxSettings.xhr(); if (myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener( 'progress' ,progressHandlingFunction, false ); // for handling the progress of the upload } return myXhr; }, //Ajax事件 beforeSend: beforeSendHandler, success: completeHandler, error: errorHandler, // Form数据 data: formData, //Options to tell JQuery not to process data or worry about content-type cache: false , contentType: false , processData: false }); }); |
处理进度:
1
2
3
4
5
|
function progressHandlingFunction(e){ if (e.lengthComputable){ $( 'progress' ).attr({value:e.loaded,max:e.total}); } } |
HTML5的文件上传非常简单,但必须在支持HTML5的浏览器中运行。
【转】jQuery异步上传文件的更多相关文章
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
- jquery异步上传文件,支持IE8
http://code.taobao.org/p/upload2/src/ 已经托管至淘宝code 源码:http://code.taobao.org/p/upload2/src/jquery.upl ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
- MVC文件上传 - 使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- MVC文件上传01-使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
随机推荐
- java—数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = input数组中,除了input[i] 之外的所有数的乘积,不用考虑溢出例如 input {2, 3, 4, 5} output: {60, 40, 30, 24}
/** * 小米关于小米笔试题 数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = * input数组中,除了input[i] 之外的 ...
- postgresql流复制配置
一.配置环境: 示例环境 主机名 IP 角色 系统版本 数据目录 pg版本 db1 192.168.128.128 主库 RedHat5.3 /app/postgreSQL/data 9.1.7 db ...
- maven、strutst版本号
struts.2.3.15.3 :大版本号 struts1-->struts2 :分支版本号 增加新功能 :小版本号 修复bug beta:公测版release:发行版(已可以使用)Genera ...
- Eclipse建立Maven项目后无法建立src/main/java资源文件夹
在项目上右键选择properties,然后点击java build path,在Librarys下,编辑JRE System Library,选择workspace default jre就可以了.
- HTML中一些基本的标签用法
姓名输入框:<input type="text" value="默认有值"/> 密码输入框:<input type="text&qu ...
- HDU 5688:2016"百度之星" - 资格赛 Problem D
原文链接:https://www.dreamwings.cn/hdu5688/2650.html Problem D Time Limit: 2000/1000 MS (Java/Others) ...
- js中cookie的使用
js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...
- EventBus使用详解(一)——初步使用EventBus
一.概述 EventBus是一款针对Android优化的发布/订阅事件总线.主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间 ...
- CSS3的chapter5
变形样式——transform: translate() ——指定对象的2D translation(2d平移) transform-orig ...
- WINDOWS Composer & PHPUnit 安装记录
Windows: 安装Composer: 下载了composer_setup.exe 运行之后提示和Xdebug冲突,在php.ini中注释掉php_xdebug.dll,再次运行.通过 compos ...