由于在项目中使用遇到了一些情况,之前的方法无法满足这些需求,于是重新修改了一下。遇到什么新的需求呢?项目做的是一个视频网站,想在上传视频后点击某个按钮自动生成视频的缩略图,如果不想自动生成(自动生成会有点模糊),则可以自己上传图片。大概的界面如下:
要想实现这样的功能,必须得把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>暂时先整了到这里,过段时间在写个详细的和大家分享。
- 1楼lifefrom昨天 14:44
- 不错~