java上传视频图片,使用layer弹窗预览

一、JSP代码

<input type="text" id="show"><input type="file" id="upload"><button type="button" id="file_upload">上传</button>

二、JS代码(上传后在线点击预览)

    var m_upload_type = "";
    var m_obj = {};//在线弹窗预览
    var m_obj_upload = {};//上传后台
    $('body').on("change", "#onload", onchange_file);
    $('body').on("click", "#show", show_flie);
    function onchange_file() {
        var objUrl = getObjectURL(this.files[0]);
        var file = $("#onload").val();
        var fileName = getFileName(file);
        var unload_file = $('#onload')[0].files[0];//用来传给后台
        var checkReturn = check_upload_file_type(fileName);//验证上传文件格式
        if(!checkReturn){
            alert("文件格式不正确!");
            return;
        }
        m_obj[fileName] = objUrl;
        m_obj_upload[fileName] = unload_file;
    }
    //返回的url使用layer弹窗可以弹出图片
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    function getFileName(o){
        var pos= o.lastIndexOf("\\");
        var pointIndexs = o.lastIndexOf(".");
        return  o.substring(pos+1,po
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个用于创建交互式地图的JavaScript库。您提到的"openlayer"可能是指在OpenLayers地图中创建口的功能。 首先,为了创建OpenLayers,您需要一个DOM对象来承载内容。这可以通过在HTML页面中添加一个具有唯一ID的div元素来实现。该div元素将用作OpenLayers的容器。您可以在该div元素中添加其他元素,以定义的样式和内容。 为了定义的样式,您可以使用CSS来设置div元素的样式属性。您可以为容器div添加类名或直接为其设置样式属性。通过设置宽度、高度、背景颜色、边框样式等属性,您可以自定义的外观。 一旦您创建了容器和定义了其样式,您可以使用OpenLayers中的功能来处理的显示和关闭事件。通过监听地图上的特定事件,例如单击地图上的某个要素或位置,您可以触发的显示。在显示之后,您可以向其添加标题和内容。 在OpenLayers中,您可以使用Overlay类来实现的显示和关闭机制。Overlay类提供了打开和关闭的方法,以及设置内容的方法。通过将容器div作为Overlay的元素,您可以将其与地图关联起来,并实现在特定事件触发时显示。 总结一下,创建OpenLayers的步骤如下: 1. 在HTML页面中创建一个div元素,作为容器,并为其添加唯一的ID。 2. 使用CSS设置div元素的样式,以定义的外观。 3. 在OpenLayers中创建一个Overlay对象,将容器div作为其元素。 4. 监听地图上的特定事件,例如单击事件,当事件触发时,调用Overlay的打开方法以显示。 5. 在显示后,使用JavaScript动态添加标题和内容。 需要注意的是,的具体实现可能因您使用的OpenLayers版本和您的需求而有所不同。请确保参考OpenLayers的官方文档和示例代码以获取更详细和准确的信息。 参考资料: 目录 一、定义popupdom对象二、定义样式三、定义Overlay四、设置单击地图后显示信息五、设置关闭事件 要展示,我们首先需要一个dom对象来承载。 <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer" onclick="closePopup();"></a> <div id="popup-title" class="popup-title"></div> <div id="popup-content" class="popup-content"></div> </div> 二、定义样式 layer:top.layer到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开,对象内不能存在事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值