根据项目需要写了一个单文件无刷新上传功能,供大家参考:
/*
* 作者:gaobin
*
* 邮箱:31705252@qq.com
*
* 日期:2017-10-20
*
* 编写目的:
* 项目中之前使用是ajax-upload.js,版本是Version 3.5 (23.06.2009),
* 官网主页是http://valums.com/ajax-upload,不过现在已经不更新了,
* 为了减少体积方便在移动端应用,且不能改变原项目源码的情况下重新开发类似插件
*
* 开放目的:供大家参考!
使用示例:
<script>
new AjaxUpload("upload", {
action: "/area/public/uploadImg/",
name: 'AttachmentFile',
accept: "image/*",
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|png|jpeg|gif)$/i.test(ext))) {
alert("只支持 JPG, PNG和 GIF 格式的图片");
return false;
}
//alert_status.text("上传中...");
},
data: {
//"path": "/app_Content/upload/Corporation/",
"__RequestVerificationToken": $("input[name=__RequestVerificationToken]").val(),
},
getData:function(){
return {};
},
onComplete: function (file, res) {
//alert_status.html("");
if (res.state) {
$("#LOGO").val(res.path);
$("#logo_img").attr("src", res.path);
// $("#GRZPFM").css("display", "block").attr("src", res.path + "?" + (new Date).getSeconds());
} else {
alert(res.msg);
}
}
});
</script>
/*
/*=====================以下是上传功能的代码封装=====================*/
+(function ($, w, d, undefined){
w.AjaxUpload = function (o, options) {
var _default = {
action: '/subject/upload',
name: 'AttachmentFile',
accept: 'image/*',
data: {},
responseType: "json",
ifrmame: "uplFrame",
getData:function(){},
onChange: function (file, extension) { },
onSubmit: function (file, extension) { return true; },
onComplete: function (file, response) { }
};
this._settings = $.extend({}, _default, options);
this._settings.btn = o;
init(this._settings);
};
var init = function (paras) {
var _frame = $("<iframe>", {
"id": paras.ifrmame,
"style": "display:none"
});
_frame.on("load", function (event) {
//获取上传的值 // this.contentWindow.document.body.innerHTML;//innerText
var jsonstr = _frame.contents().find("body").html();
if ($.trim(jsonstr) === "") {
//这是初始加载
} else {
paras.complete($.parseJSON(jsonstr));
}
//重置iframe
fillIframe(_frame, paras);
event.stopPropagation();
// throw { "e": "test" };
}).appendTo("body");
//
$("#" + paras.btn).bind("click", function () {
//触发上传
_frame.contents().find("#" + paras.name).click();
});
return _frame;
};
var fillIframe= function (o,paras) {//填充IFRAME Func
var _iframe = $(o).contents();
_iframe.find("body").html("").append($("<form>", {
"method": "post",
"id": "form_id",
"action": paras.action,//上传路径
"enctype": "multipart/form-data"
}).append($("<input>", {
"id": paras.name,
"type": "file",
"name": paras.name,//上传文件的名称,需要与action参数的名称一致
change: function () {
//文件框变更时
paras.onChange(this, getExt(this.value));
//提交表单前
var _checkResult = paras.onSubmit(this, getExt(this.value));
if ( _checkResult==false) {
return false;
}
var form = _iframe.find("#form_id");
var jsondata = paras.getData();// Func();
jsondata = $.extend(jsondata, paras.data);
for (var key in jsondata) {
$("<input>", {
"type": "hidden",
"value": jsondata[key],
"name": key
}).appendTo(form);
}
form.submit();
}
})));
};
var getExt= function (file){
return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
};
w.AjaxUpload = AjaxUpload;
})(jQuery, window, document);