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