图片下传插件，基于jquery的下传插件，ajax图片下传， 更新更新啦
图片上传插件，基于jquery的上传插件，ajax图片上传， 更新更新啦
说更新不怎么正确，其实是优化吧
(function ($) {
$.extend($.fn, {
upload: function (options) {
options = $.extend(options, {
fileType: "gif|jpg|jpeg|png|bmp",
url: "/upload/upload.aspx",
params: ""
});
//上传主函数
this.each(function () {
var $this = $(this);
var wrap = $this.parent();
//初始化上传控件
var uploador = uploader(options.url, options.params, wrap, "100", "");
uploador.onload();
$this.bind("click", function () {
var inputfile = $(this).parent().find("input:file");
var hiddenfile = $(this).parent().find("input:hidden");
var fileBox = inputfile.parent();
if (inputfile.val() === "") {
alert("请选择要上传的图片！");
return false;
}
//验证图片
if (!uploador.checkFile(inputfile.val(), options.fileType)) {
alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");
return false;
}
//若隐藏域中有图片，先删除图片
if (hiddenfile.val() !== "") {
uploador.delImage(false);
}
//创建表单
var form = uploador.createForm();
//把上传控件附加到表单
inputfile.appendTo(form);
fileBox.html("<img src=\"/images/loading.gif\" /> 正在上传... ");
$this.attr("disabled", true);
try {
//开始ajax提交表单
form.ajaxSubmit({ type: "POST",
success: function (data) {
data = eval("(" + data + ")");
if (data.result !== "1") {
alert(data.msg);
} else {
uploador.showImage(data.imgurl, $this.parent());
$this.parent().find("input:hidden").val(data.imgurl);
}
$this.attr("disabled", false);
fileBox.html("<input type=\"file\" name=\"file\" />");
form.remove();
}
});
} catch (e) {
alert(e.message);
}
});
});
}
});
/// <summary>
/// 初始化上传控件 url=上传路径，不加参数 params=参数如name=jaryway&pass=123
/// </summary>
/// <param name="url" type="string">上传路径</param>
/// <param name="params" type="string">上传的参数 eg:"userid=1&username=xiaoming"</param>
/// <param name="wrap" type="Object">上传体(整个上传体)</param>
/// <param name="width" type="string">显示图的宽,为空则表示自动(给定高度则宽度自动)或默认 eg:"100"</param>
/// <param name="height" type="string">显示图的高,为空则表示自动(给定宽度则高度自动)或默认 eg:"100"</param>
var uploader = function (url, params, wrap, width, height) {
$.extend(uploader, {
methods: {
//检查文件后缀 val1=上传的文件名称，val2=允许的文件类型，如：gif|jpg|jpeg|png|bmp
checkFile: function (val1, val2) {
//获得文件后缀
val1 = val1.substring(val1.lastIndexOf("."), val1.length)
val1 = val1.toLowerCase();
if (typeof val2 !== 'string' || val2 === "") { val2 = "gif|jpg|jpeg|png|bmp"; }
return new RegExp("\.(" + val2 + ")$").test(val1);
},
//创建上传表单
createForm: function () {
var uploadform = document.createElement("form");
uploadform.action = url + "?oper=upload" + params + "&r=" + Math.random();
uploadform.method = "post";
uploadform.enctype = "multipart/form-data";
uploadform.style.display = "none";
//将表单加当document上，
//创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。
document.body.appendChild(uploadform);
return $(uploadform);
},
//创建图片
createImage: function () {
//不能用 new Image() 来创建图片，否则ie下不能改变img 的宽高
var image = $(document.createElement("img"));
image.attr({ "title": "双击图片可删除图片！" });
if (width !== "")
image.attr({ "width": width });
if (height !== "")
image.attr({ "height": height });
return image;
},
//上传后显示图片
showImage: function (imgurl) {
var image = this.createImage();
wrap.find(".imgdiv").html("");
var a = $("<a target=\"_blank\" title=\"查看原图\">查看</a>");
a.attr("href", imgurl);
//要先append再给img赋值，否则在ie下不能缩小宽度。
image.appendTo(wrap.find(".imgdiv"));
image.attr("src", imgurl);
a.appendTo(wrap.find(".imgdiv"));
this.bindDelete();
},
//绑定双击删除事件
bindDelete: function () {
var $this = this;
wrap.find(".imgdiv").find("img").bind("dblclick", function () {
$this.delImage(true);
});
},
//删除图片 isShowBox表示是否弹出提示信息
delImage: function (isShowBox) {
var inputfile = wrap.find("input:hidden");
if (inputfile.val() !== "") {
var data = { oper: "delete", imgurl: inputfile.val(), r: Math.random() };
$.getJSON(url, data, function (data) {
if (isShowBox) { alert(data.msg) }
if (data.result === "1") {
inputfile.val("");
wrap.find(".imgdiv").html("");
}
});
}
},
onload: function () {
var hiddenInput = wrap.find("input:hidden");
if (typeof hiddenInput !== "undefined" && hiddenInput.val() !== "") {
this.showImage(hiddenInput.val())
}
}
}
});
return uploader.methods;
}
})(jQuery)
上一篇：