语法:$.ajaxFileUpload([options])
options参数说明:
参数 | 描述 |
---|---|
url | 上传处理程序地址 |
fileElementId | 需要上传的文件域的ID,即 < input type=”file” id=”” /> 的ID |
secureuri | 是否启用安全提交,默认为false |
dataType | 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断 |
success | 提交成功后自动执行的处理函数,参数data就是服务器返回的数据 |
error | 提交失败自动执行的处理函数 |
data | 自定义参数。这个东西比较有用,当有数据是与上传的文件相关的时候,这个东西就要用到了 |
type | 当要提交自定义参数时,这个参数要设置成post |
错误提示:
1,SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3,SyntaxError: invalid property id错误
如果出现这个错误就需要检查文本域属性ID是否存在
4,SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件name是否一致或不存在
5,其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多
ajaxFileupload多文件上传
ajaxFileupload这个插件用于上传文件,不过它默认是只能上传一个文件。通过修改其源代码,可以方便地实现多个文件上传。
ajaxFileupload的原理挺简单的,它将用户指定(通过ID)的file input添加到form里面,然后将form提交。我们只需要将多个file input的ID通过一个列表传给ajaxFileupload,让它将多个file input添加到form里面就可以了。
打开ajaxfileupload.js,修改如下的地方:
// 实现多文件上传
if (typeof(fileElementId) == 'string') {
fileElementId = [fileElementId];
}
for (var i in fileElementId) {
// 下面是原来的代码
var oldElement = jQuery('#' fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
使用的时候:
$.ajaxFileUpload({
url: "/xxx/xxx/xxx",
secureuri: false,
fileElementId: [file1,file2,file3,...],// 这个地方变成数组了
dataType: 'json',
data:{
name: 'files'
},
success: function(data, status){
},
error: function(XMLHttpRequest)
{
})
一个input上传多个文件
//上传文件的input
<input id="sharerUpload0" name="files" type="file" multiple="multiple" />
//展示上传文件名
<ul id='content'></ul>
//在上传页面展示上传文件
var input = document.getElementById('sharerUpload0');
input.addEventListener('change',readFile, false);
var str = "";
function readFile() {
var listFiles = this.files;
console.log(listFiles);
for (var i = 0, len = listFiles.length; i < len; i++) {
//在上传页面展示所有上传文件名
str += '<li>名称:' + listFiles[i].name;
};
//上传页面展示所有上传文件名
document.getElementById('content').innerHTML = str;
}
function ShareFileUpload() {
$.ajaxFileUpload({
url : webBasePath + 'sharerupload/upload',//用于文件上传的服务器端请求地址
type : "post",
data : params,
dataType : "json",
timeout : 30000,
secureuri : false,// 一般设置为false
fileElementId : "sharerUpload", //后台要用list接收获取的文件名
success : function(data) {
//返回的是一个字符串
// alert(JSON.parse(data).msg);
// console.log("data" +JSON.stringify(data));
console.log(webBasePath + 'sharerupload/upload');
$('#dataList').datagrid('reload');
closeIdDialog("share_add");
showMsg(JSON.parse(data).msg);
},
error : function(data) {
$('#dataList').datagrid('reload');
showMsg("上传失败,请重新上传!!!");
}
});
}
二.ajax
jQuery.post(
url,
data,
success(data, textStatus, jqXHR),
dataType
)
参数 | 是否必选 | 描述 |
---|---|---|
url | 必需 | 规定把请求发送到哪个 URL |
data | 可选 | 映射或字符串值。规定连同请求发送到服务器的数据 |
success(data, textStatus, jqXHR) | 可选 | 请求成功时执行的回调函数 |
dataType | 可选 | 规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html) |
该函数是简写的 Ajax 函数,等价于:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
带加载中的layer的弹窗
$.ajax({
url : webBasePath+'prj/program/startFGSWorkFlow',
type : "POST",
data : jobcontentData,
beforeSend: function (request) {
indexLoad = layer.load();
},
success : function(data){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
layer.load(indexLoad);
layer.msg("数据加载成功!", {time : 1500, icon : 6});
setTimeout(function(){parent.layer.close(index)},1500)//再执行关闭
},
error : function(){
layer.msg("保存失败,请联系开发人员!", {time : 1500, icon : 5});
}
})