由于在项目中使用遇到了一些情况，之前的方法无法满足这些需求，，于是重新修改了一下。遇到什么新的需求呢？项目做的是一个视频网站，想在上传视频后点击某个按钮自动生成视频的缩略图，如果不想自动生成(自动生成会有点模糊)，则可以自己上传图片。大概的界面如下：
要想实现这样的功能，必须得把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|bmpcheckFile: 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下载
要温暖还是怕麻烦。
