图片上传插件，基于jquery的上传插件，ajax图片上传，再更新

由于在项目中使用遇到了一些情况，之前的方法无法满足这些需求，于是重新修改了一下。遇到什么新的需求呢？项目做的是一个视频网站，想在上传视频后点击某个按钮自动生成视频的缩略图，如果不想自动生成(自动生成会有点模糊)，则可以自己上传图片。大概的界面如下：



要想实现这样的功能，必须得把upload中的一些方法暴露出来这样就可以在外部中使用了。更新后的写法。

(function ($) {
$.extend($.fn, {
upload: function (options) {
options = $.extend(options, {
fileType: "gif|jpg|jpeg|png|bmp",
url: "/user/upload.aspx",
params: "",
width: "100",
height: ""
});
var methods = new uploader(options.url, options.params, null, options.width, options.height);
//上传主函数
this.each(function () {
var $this = $(this);
var wrap = $this.parent();
//初始化上传控件
var uploador = new uploader(options.url, options.params, wrap, options.width, options.height);
uploador.onload();
$this.bind("click", function () {
var inputfile = wrap.find("input:file");
var fileBox = inputfile.parent();
if (inputfile.val() === "") {
alert("请选择要上传的图片！");
return false;
}
//验证图片
if (!uploador.checkFile(inputfile.val(), options.fileType)) {
alert("文件格式不正确，只能上传格式为：" + options.fileType + "的文件。");
return 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.delToShow(data.imgurl);
}
$this.attr("disabled", false);
fileBox.html("<input type=\"file\" name=\"file\" />");
form.remove();
}
});
} catch (e) {
alert(e.message);
}
});
});
return methods; //返回methods方便从外部调用
}
});
/// <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, wrap1) {
var image = this.createImage();
wrap = typeof wrap1 === "object" ? wrap1 : wrap;
var hiddenfile = wrap.find("input:hidden");
hiddenfile.val(imgurl);
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(wrap);
},
//删除原图(如果原图存在)后显示
delToShow: function (imgurl, wrap1) {
wrap = typeof wrap1 === "object" ? wrap1 : wrap;
var hiddenfile = wrap.find("input:hidden");
//上传成功后，再删除图片，以免图片丢失
//若隐藏域中有图片，先删除图片
if (hiddenfile.val() !== "") {
this.delImage(imgurl, false, wrap);
}
else {
this.showImage(imgurl, wrap);
}
},
//绑定双击删除事件
bindDelete: function (wrap1) {
var $this = this;
wrap = typeof wrap1 === "object" ? wrap1 : wrap;
wrap.find(".imgdiv").find("img").bind("dblclick", function () {
$this.delImage("",true, wrap);
});
},
//删除图片,如果imgurl不为空则显示新图片
//isShowBox表示是否弹出提示信息
//如果imgurl不等于空字符串则在删除图片后显示新图片
delImage: function (imgurl, isShowBox, wrap1) {
$this = this;
wrap = typeof wrap1 === "object" ? wrap1 : wrap;
var hiddenfile = wrap.find("input:hidden");
if (typeof hiddenfile !== "undefined" && hiddenfile.val() !== "") {
var data = { oper: "delete", imgurl: hiddenfile.val(), r: Math.random() };
$.getJSON(url, data, function (data) {
if (isShowBox) { alert(data.msg) }
if (data.result === "1") {
hiddenfile.val("");
wrap.find(".imgdiv").html("");
}
if (imgurl !== "") {
$this.showImage(imgurl, wrap);
}
});
}
},
onload: function (wrap1) {
wrap = typeof wrap1 === "object" ? wrap1 : wrap;
var hiddeninput = wrap.find("input:hidden");
if (typeof hiddeninput !== "undefined" && hiddeninput.val() !== "") {
this.showImage(hiddeninput.val())
}
}
}
});
return uploader.methods;
}
})(jQuery);

调用：

var uploador;
$(document).ready(function () {
uploador = $("input.upload").upload();
//自动生成图片
$("#genImage").click(function () {
if ($("#txtFilePath").val() == "") {
alert("请先上传视频文件");
return false;
}
Lvegu.Loading.show("正在生成视频缩略图，请等待...");
$.ajax({
type: "get",
dataType: "json",
data: "file=" + $("#txtFilePath").val(),
url: "courseware_ajax.aspx?oper=ajaxGenImage&vsttm=" + (new Date().getTime()),
error: function (XmlHttpRequest, textStatus, errorThrown) { Lvegu.Loading.hide(); alert(XmlHttpRequest.responseText); },
success: function (d) {
Lvegu.Loading.hide();
switch (d.result) {
case '-1':
case '0':
alert(d.msg);
break;
case '1':
uploador.delToShow(d.imgurl, $("#upimg"));
break;
}
}
});
});
});
function delFile(filepath) {
var r = Math.random();
$.getJSON("courseware_ajax.aspx?oper=ajaxDeleteFile&r=" + r + "&file=" + filepath, function (d) {
return d.result === "1";
});
}

html代码：

<tr>
<th align="right">资源路径</th>
<td><asp:TextBox ID="txtFilePath" runat="server" CssClass="ipt" Width="250px"></asp:TextBox>
<span style="display:none">
........ </span>
<br /><span id="tipFilePath">ssss</span>
</td>
</tr>
<tr>
<th align="right">上传课件</th>
<td>...................
<br /><input type="button" value="生成缩略图" id="genImage" />
</td>
</tr>
<tr>
<th align="right">缩略图</th>
<td><div style="width: 100%; float: left;" id="upimg">
<asp:HiddenField runat="server" Value="" ID="hfImg" />
<div class="imgdiv"></div>
<span><input type="file" name="file" /></span>
<input type="button" value="上传" class="upload" /><br />
</div>
</td>
</tr>

暂时先整了到这里，过段时间在写个详细的和大家分享。

Demo下载