I want to upload files asynchronously via jQuery, here is my HTML:
|
1
2
3
|
<span>File</span>
<input type=
"file"
id=
"file"
name=
"file"
size=
"10"
/>
<input id=
"uploadbutton"
type=
"button"
value=
"Upload"
/>
|
Here is my 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: "
);
}
});
});
});
|
I only get the uploaded filename, what should I do?
I now use the jQuery Form plugin to solve this problem: http://malsup.com/jquery/form/#code-samples
Is there any way to do it without this plugin?
Solution:
You can use HTML5, use jQuery, Ajax to achieve file upload, not only that, you can do file validation (name, size, MIME type) or use HTML5 progress tag (or div) to handle progress events.
I'm also doing file uploads recently and I don't want to use flash, iframes or other plugins, after some research I came up with a solution.
HTML:
|
1
2
3
4
5
|
<form enctype=
"multipart/form-data"
>
<input name=
"file"
type=
"file"
/>
<input type=
"button"
value=
"Upload"
/>
</form>
<progress></progress>
|
First, you can do some validation, such as the onChange event of the file:
|
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
});
|
Button click triggers 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的浏览器中运行。
请问,在ie上有没有好的方法代替呢?
文件是$("#file").prop("files")[0]
success: completeHandler,
error: errorHandler,
未定义。怎么改呢