0 0

关于弹出层中实现多文件上传的问题(js)5

在弹出层中点击“add file” button没有反应,初步定为应该是div标签没找到的问题,
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#BOX_overlay {background:#000;left:0;filter:alpha(opacity=80);-moz-opacity:0.8; opacity: 0.8;position:absolute;top:0;z-index:100;}/**遮罩层的样式**/
#layer_box {background:#fff;border:1px solid #fff;position:absolute;display:none;z-index:999;width:600px;} /**弹出窗口的样式**/
.box_title {background:#FFF;border-bottom:1px solid #DDD;margin:10px 10px 0;padding:0 0 5px 20px;} /**关闭栏目**/
.box_title span {font-size:14px;font-weight:bold;}
.box_title a {color:#000;position:absolute;right:10px;top:10px;}
.box_content{padding:10px;margin:10px;}
</style>

<script>
function BOX_show(e,a)//显示
{

    if (document.getElementById(e) == null) {

        return;
    } 

    if (!a) {
        var selects = document.getElementsByTagName('select');

        for (i = 0; i < selects.length; i++) {


            selects[i].style.visibility = "hidden";
        }
    } 
    BOX_layout(e);
    window.onresize = function() { BOX_layout(e); } //改变窗体重新调整位置
    window.onscroll = function() { BOX_layout(e); } //滚动窗体重新调整位置
   document.onkeyup = function(event) {
       var evt = window.event || event;
        var code = evt.keyCode ? evt.keyCode : evt.which;
        //alert(code); 
        if (code == 27) {
            BOX_remove(e);
        }
    }
}
function BOX_remove(e)//移除

{
    window.onscroll = null;
    window.onresize = null;
    document.getElementById('BOX_overlay').style.display = "none";
    document.getElementById(e).style.display = "none"; 
    var selects = document.getElementsByTagName('select');
    for (i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }

function BOX_layout(e)//调整位置
{

    var a = document.getElementById(e); 
    if (document.getElementById('BOX_overlay') == null)//判断是否新建遮掩层
    { 
       var overlay = document.createElement("div");

        overlay.setAttribute('id', 'BOX_overlay'); 
//overlay.onclick=function(){BOX_remove(e);};
        //a.parentNode.appendChild(overlay);
        document.body.appendChild(overlay);
    } 
    document.getElementById('BOX_overlay').ondblclick = function() { BOX_remove(e); };
    //取客户端左上坐标,宽,高
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 
    var clientWidth;
    if (window.innerWidth) {
        clientWidth = window.innerWidth;
        //clientWidth = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerWidth : Math.min(window.innerWidth, document.documentElement.clientWidth));
    }
   else {
        clientWidth = document.documentElement.clientWidth;
    } 
    var clientHeight;
    if (window.innerHeight) {
        clientHeight = window.innerHeight;
        //clientHeight = ((Sys.Browser.agent === Sys.Browser.Safari) ? window.innerHeight : Math.min(window.innerHeight, document.documentElement.clientHeight));
    }
    else {

        clientHeight = document.documentElement.clientHeight;
    } 

    var bo = document.getElementById('BOX_overlay');
    bo.style.left = scrollLeft + 'px';
    bo.style.top = scrollTop + 'px';
    bo.style.width ='100%';
    bo.style.height = clientHeight + 'px';
    bo.style.display =""; 

    //Popup窗口定位

    a.style.display = 'block'
    a.style.left = scrollLeft + ((clientWidth - a.offsetWidth) / 2) + 'px';
    a.style.top = scrollTop + ((clientHeight - a.offsetHeight) / 2) + 'px';
}

</script>
<script language="javascript">
   function addComponent(){
   alert("aa");
var uploadHTML = document.createElement("<input type='file' name='upload'/>");
//lert("cc");
   document.getElementById("file").appendChild(uploadHTML);
   uploadHTML = document.createElement("<p/>");
   document.getElementById("file").appendChild(uploadHTML);
   }
   </script>
</head> 
<body>
<a href="javascript:BOX_show('layer_box');">点击弹出窗口</a>
<div id="layer_box">
   <div class="box_title"><span>Report Edit page</span><a onclick="BOX_remove('layer_box')" href="javascript:void(0)">X</a></div>
   <div class="box_content">
   <input type = "button" onclick="addComponent();" value="add file"/>
    <br/>
    <form onsubmit="return true;" action="" method="post" enctype="multipart/form-data">
    <span id="files"> <input type="file" name="upload"/></span>
    <input type="submit" value="upload"/>
    </form>
   </div>

</div>
</body>
</html>
2012年2月17日 14:28
目前还没有答案

相关推荐

    div弹出层打包,包括弹出图片浏览

    3. **样式多样性**:资源中提到有多种样式可选,这意味着可能包含多套CSS样式文件,开发者可以根据网站的整体风格选择合适的弹出层外观。 4. **高兼容性**:`highslide-4.1.9`可能是指HighSlide JS,这是一个流行的...

    jquery弹出层插件点击弹出层可拖动,弹出层为umeditor

    在IT领域,尤其是在Web开发中,我们经常遇到各种交互式设计和组件的实现,其中“jQuery弹出层插件点击弹出层可拖动,弹出层为umeditor”就是一个典型的例子。这个功能结合了多个技术,包括jQuery、CSS、iframe以及...

    jquery dialog弹出层

    描述中提到的“基于jquery项目中用到的dialog弹出层”,意味着在实际的jQuery项目开发中,Dialog常被用于增强用户体验,提供额外的信息展示或者获取用户输入。它能够轻松地嵌入到现有的HTML结构中,通过调用jQuery...

    C#MVC和cropper.js实现剪裁图片ajax上传的弹出层

    本文将深入探讨如何使用C# MVC(Model-View-Controller)框架结合cropper.js JavaScript库来实现一个功能强大的图片剪裁并ajax上传的弹出层功能。 首先,我们来了解一下C# MVC框架。它是Microsoft开发的一种基于ASP...

    网页弹出层效果 经典大全

    7. **拖放交互**:允许用户通过拖放操作与弹出层进行交互,常用于文件上传或自定义布局。 8. **响应式设计**:确保弹出层在不同设备和屏幕尺寸上都能正常显示和操作,提供良好的移动体验。 9. **可自定义的样式和...

    文件上传js和jar文件

    本主题涉及的"文件上传js和jar文件"主要关注的是使用JavaScript和Java技术实现这一功能的组件和库。我们将深入探讨这些关键文件的作用以及如何在实际项目中使用它们。 首先,`ajaxupload.js`是JavaScript库,主要...

    jQuery页面弹出框实现文件上传

    此外,页面弹出框实现文件上传的过程中,还可能涉及到一些动态行为,比如弹出框的定位和大小调整、在弹出框中嵌入第三方控件(例如日期选择器)以及动画效果的实现等,这些都可以通过jQuery提供的丰富API进行实现。...

    PHPCMS V9 修改flash上传为H5上传方案 phpcms上传文件statics下js

    2. **dialog.js**:通常用于创建弹出对话框,可能用于H5上传过程中的确认、提示或错误消息显示。 3. **PIE.js**:这是一个CSS3渲染引擎,用于解决IE浏览器对某些CSS3属性的不支持,可能用于美化上传按钮的样式。 4...

    用SSH+ajax实现的上传进度条,仿qq邮箱的大文件上传窗体

    提供的JavaScript代码示例中,通过`functionsAlert(txt)`函数实现了弹出框的功能,用于展示文件上传进度。该函数通过创建DOM元素的方式构建了一个带有遮罩层的弹出框,并通过`XMLHttpRequest`或`ActiveXObject`对象...

    微信小程序学习用demo:豆瓣电影:弹出层.zip

    这个"微信小程序学习用demo:豆瓣电影:弹出层.zip"是一个专门用于教学和实践的微信小程序示例,它模拟了豆瓣电影应用的部分功能,并且重点展示了如何在微信小程序中实现弹出层的效果。 在微信小程序中,弹出层通常...

    点击上传弹出上传对话框extjs+strust2.rar

    【标签】"点击上传弹出上传对话框extjs+strust2.rar" 确认了主题,强调了这个资源是关于文件上传功能的实现,使用了ExtJS和Struts2这两个技术栈。 压缩包内的文件名列表虽然只有一个"a",但通常情况下,这可能会...

    webupload上传与下载文件,web实现文件上传下载,Java源码.zip

    本文将详细介绍如何使用WebUpload实现文件上传,并通过Java源码来讲解文件下载的实现过程。 一、WebUpload简介 WebUpload是一款轻量级的前端文件上传组件,主要由JavaScript编写,它可以与各种后端语言(如Java、...

    基于webuploader的文件上传示例

    【基于WebUploader的文件上传示例】是一种利用WebUploader库实现的在线文件上传功能,它结合了layer弹出层技术,提供了用户友好的交互体验。WebUploader是由阿里大鱼团队开发的一个JavaScript文件上传组件,旨在解决...

    C#实现文件上传以及多文件上传功能

    在视图(页面)中,需要引用uploadify和layer两个插件,并编写相应的JavaScript代码来处理文件上传和弹出层。 四、总结 C#实现文件上传和多文件上传功能是现代Web开发中非常重要的一项技术。通过本文的介绍,...

    javaWeb实现文件的上传和下载(可以返回上一级目录)server.zip

    在处理文件上传和下载时,安全问题不容忽视。确保文件名的安全性(防止路径遍历攻击),验证上传文件的类型和大小,以及防止敏感文件被下载,都是必要的安全措施。 综上所述,实现这个项目需要掌握JavaWeb基础、...

    解决kindeditor 编辑器完美支持IE11 看不见上传文件框问题 无法保存问题

    总的来说,解决KindEditor在IE11上的问题需要深入理解浏览器的兼容性,熟悉JavaScript和CSS的跨浏览器实现。通过调整代码、添加兼容性补丁以及充分利用调试工具,我们可以使KindEditor在IE11上运行得更加顺畅,提高...

    Android-为了修复ReactNative的WebView组件在安卓端不支持文件上传而包装的一个Webview组件

    这可能包括监听`file`类型的输入框点击事件,弹出文件选择对话框,并将选定的文件路径通过JavaScript接口传递回JavaScript层。 4. **JavaScript Bridge**:React Native的JavaScript和Java/Kotlin之间的通信是通过...

    上传多笔、动态显示文件名,而且可以浏览和有选择的删除

    对于图片,可以直接在新窗口或弹出层中显示;对于文本文件,可以使用内嵌的富文本编辑器显示;对于其他类型,可能需要调用第三方应用或者提供下载链接。`01UpAndDownLoad.aspx.cs`中的代码可能包含了处理文件打开...

    jQuery点击弹出图片裁剪上传插件

    弹出层中不仅展示图片,还包含裁剪工具。 3. 图片裁剪:裁剪功能通常是通过JavaScript库如Cropper.js或者Jcrop来实现的。这些库允许用户选择一个矩形区域,然后根据所选区域裁剪图片。用户可以选择图片的任意部分,...

    js 头像编辑 上传

    总结来说,这个"js 头像编辑 上传"项目涵盖了前端开发中的基本技术,包括HTML结构、CSS样式和JavaScript交互,以及头像编辑和文件上传的实现细节。通过学习和实践这个项目,开发者可以提升对前端开发的理解,尤其是...

Global site tag (gtag.js) - Google Analytics