我想通过jQuery异步上传文件,这是我的HTML:
1
2
3
|
<span>File</span> <input type= "file" id= "file" name= "file" size= "10" /> <input id= "uploadbutton" type= "button" value= "Upload" /> |
这是我的javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(document).ready(function () { $( "#uploadbutton" ).click(function () { var filename = $( "#file" ).val(); $.ajax({ type: "POST" , url: "addFile.do" , enctype: 'multipart/form-data' , data: { file: filename }, success: function () { alert( "Data Uploaded: " ); } }); }); }); |
我只得到上传的文件名,咋办?
我现在用了 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的浏览器中运行。
评论列表
wuchangliang2013-11-8 18:11:00
var formData = new FormData($('form')[0]);
请问,在ie上有没有好的方法代替呢?
请问,在ie上有没有好的方法代替呢?
s2015-4-30 16:38:00
ewe
3268013878@qq.co2015-8-28 9:12:00
请问为什么我进入了error区间,输出TypeError:Cannot read property 'open' of underfined
3268013878@qq.co2015-8-28 9:12:00
请问为什么我进入了error区间,输出TypeError:Cannot read property 'open' of underfined
122015-9-29 11:10:00
fgsdf
去啊而发2015-12-16 16:06:00
阿什顿飞
大向2015-12-17 19:33:00
我想用异步请求实现与数据库的交换,但是用不好,每次都是死循环。请高人指点!
大向2015-12-17 19:36:00
我有个建议,不知道好不好。左边的文字颜色容易使人看不太清楚,易花眼。建议换成深颜色的。
momo2016-4-15 17:35:00
The current request is not a multipart request 为什么报这个错呢
仍然有2016-7-1 14:44:00
热有人要
你好2016-7-20 14:38:00
可以上传视频和png格式的图片吗
你好2016-7-20 14:38:00
可以上传视频和png格式的图片吗,急等着用。谢谢!
aa2016-9-21 13:59:00
aaaa
aa2016-9-21 14:00:00
aaaa"'</div>'"
只能帮到你这里了2016-10-18 14:30:00
var filename = $("#file").val(); 这个写法本来就得不到文件吧
文件是$("#file").prop("files")[0]
文件是$("#file").prop("files")[0]
发表评论