1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
| /**
* v1.1
* 田丰硕 tianfs.com
*/
(function ($) {
$.extend($.fn, {
upload: function (settings) {
var options = $.extend({
fileType: "gif|jpg|jpeg|png|bmp", //允许的文件格式
uploadUrl: "", //上传URL地址
inputName: "upfile",
uploadData: {}, //上传时需要附加的参数 可以是 function
beforeSubmitFn: "", //上传前执行的方法 原型 beforeSubmit(xhr, $this);
successFn: "", //上传成功后执行的方法 uploadSuccess(response, statusText, xhr, $this)
errorFn: "", //上传失败后执行的方法
onProgress:"" //返回上传进度信息
}, settings);
//上传准备函数
var methods = {
//验证文件格式
checkFile: function (filename) {
var pos = filename.lastIndexOf(".");
var str = filename.substring(pos, filename.length);
var str1 = str.toLowerCase();
if (typeof options.fileType !== 'string') { options.fileType = "gif|jpg|jpeg|png|bmp"; }
var re = new RegExp("\.(" + options.fileType + ")$");
return re.test(str1);
},
createInputFile: function(){
/*var new_fileType = options.fileType.replace(/\|/g,",");
new_fileType = "."+new_fileType;
Prompt.topShow(new_fileType)
var $input = $("<input type='file' name='"+options.inputName+"'> accept='"+new_fileType+"'");*/
var $input = $("<input type='file' class='upload_tmp_input' style='display:none' name='"+options.inputName+"'> ");
return $input;
},
onload: function () {
}
};
//上传主函数
this.each(function () {
var $this = $(this);
$this.bind("click", function () {
$(".upload_tmp_input").remove()
//创建input file
var $input = methods.createInputFile();
$this.before($input);
$input.change(function(){
if ($input.val() === "") {
alert("请选择要上传的文件！");
return false;
}
//验证图片
if (!methods.checkFile($input.val())) {
alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");
return false;
}
var pic = $input.get(0).files[0];
var formData = new FormData();
formData.append(options.inputName , pic);
if (typeof options.uploadData == 'function') {
var data = options.uploadData($this);
if (data) {
for (var x in data) {
formData.append(x , data[x]);
}
}
} else {
if (options.uploadData) {
for (var x in options.uploadData) {
formData.append(x , options.uploadData[x]);
}
}
}
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
$.ajax({
type: "POST",
url: options.uploadUrl,
data: formData ,
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,
dataType : "JSON",
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener("progress" , function (evt){
console.log(evt);
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
var onProgress;
try { onProgress = eval(options.onProgress) } catch (err) { };
if (onProgress) {
onProgress(per, $this);
}
}, false);
return xhr;
},
beforeSend:function (xhr) {
$this.attr("disabled", true);
var beforeSubmitFn;
try { beforeSubmitFn = eval(options.beforeSubmitFn) } catch (err) { };
if (beforeSubmitFn) {
var $result = beforeSubmitFn(xhr, $this);
if (typeof ($result) == "boolean")
return $result;
}
},
error : function (response, statusText, xhr) {
var errorFn;
try { errorFn = eval(options.errorFn) } catch (err) { };
if (errorFn) {
errorFn(response, statusText, xhr, $this);
}
$this.attr("disabled", false);
$input.remove();
},
//上传成功
success : function (response, statusText, xhr) {
//response = eval("(" + response + ")");
var successFn;
try { successFn = eval(options.successFn) } catch (err) { };
if (successFn) {
$.ajaxSetup({ cache: false });//这个不能少，否则ie下会提示下载
successFn(response, statusText, xhr, $this);
}
$this.attr("disabled", false);
$input.remove();
}
});
})
$input.click()
});
});
}
});
})(jQuery)
|