品种做的是八个录像网站,此种格局得以打开编辑七个附件

 

http://www.bkjia.com/Javascript/505904.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/505904.htmlTechArticle由于在项目中使用遇到了一些情况,之前的方法无法满足这些需求,于是重新修改了一下。遇到什么新的需求呢?项目做的是一个视频网站

 

html代码:
[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>  www.2cto.com
    <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> 
权且先整了到此地,过段时间在写个详细的和豪门享受。

 

要想完毕如此的功效,必须得把upload中的一些主意揭表露来这么就足以在表面中动用了。更新后的写法。
[javascript]
(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); 
调用:
[html]
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”; 
    }); 

图片 1

由于在类型中应用碰着了一部分状态,在此以前的法子不只怕满意那么些须求,于是再次修改了一下。遇到什么样新的须要吗?项目做的是三个摄像网站,想在上传摄像后点击某些按钮自动生成视频的缩略图,借使不想自动生成(自动生成会有点模糊),则足以本人上传图片。大概的界面如下:
图片 2

        {

///获取站点根目录路径

        }

varMode = $.MvcSheetUI.QueryString(“Mode”);

<!–  NTKO使用–>

//-end-

if(fileType.indexOf(‘.’) > -1 && (fileType.indexOf(‘.doc’) > -1
||fileType.indexOf(‘.xls’) > -1 || fileType.indexOf(‘.ppt’) > -1))
{

1.     修改MvcSheetAll.js,伸张如下所示代码:

 

 

 

图片 3

 

4.    Web.config增添陈设:

 

OpenNtko.aspx

if(!!window.ActiveXObject || “ActiveXObject”in window)
{                       

在IE浏览器上浏览且附件类型为Word恐怕Excel时会多八个开辟按钮:

 

varworkitemid = typeof (this.SheetInfo)
== “undefined” ? “” : this.SheetInfo.WorkItemId;

 图片 4

                        }

returnSystem.Configuration.ConfigurationManager.AppSettings[“PortalUrl”];

5.    在Portal下伸张打开页面:

publicstring PortalRootUrl

///<summary>

调整步骤:

//-start-chenghs2016-10-28 

            {

 

varinstanceid = typeof (this.SheetInfo)
== “undefined” ? “” : this.SheetInfo.InstanceId;

///</summary>

 图片 5

可以搜索:actionTd.append($(“<ahref='” + url + “‘ class=’fa
fa-download’
target=’_blank’UC=true>” +SheetLanguages.Current.Download
+ “</a>”))

 图片 6

var_PORTALROOT_GLOBALUrl = “<%=this.PortalRootUrl%>”

3.    MvcSheet.master.Cs页面:

修改classid,version,caption,key.

                            actionTd.append($(“<a
href='” +(url.indexOf(‘http’) == -1 ? _PORTALROOT_GLOBALUrl : ”) +
url.replace(‘ReadAttachment’, ‘OpenNtko’) + “&InstanceId=” +instanceid
+ “&Workitemid=” + workitemid + “&Mode=” + Mode + “&E=” + this.Editable
+ “&dataField=” + this.DataField + “&SchemaCode=” + this.SchemaCode + “‘
class=’fafa-pencil’ target=’_blank’ UC=true>打开</a>”));

图片 7

 

效果图:

点击打开后:

<addkey=”PortalUrl”value=”http://localhost:8010” />(改成IP大概域名,反正要对应)

备注:此种格局可以打开编辑两个附件。

            }

get

7.    修改OpenNtko.aspx.cs文件

 

                            actionTd.append(”  “);

6.    添加JS文件:

 

WFRes/_Scripts/sheets/SheetMy.js

图片 8

2.    修改MvcSheet.master

在那一个地点扩展代码:

 

 图片 9

                    }

相关文章