Javascript & DHTML上传文件控件第1/4页_javascript技巧

上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D
首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。

也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写。
首先看一个成品截图预览:

一、接下来我们先说思路,首先定义一个upload"类",

一)、这个类的公共访问信息应该有:
1、构造函数中要传递一些必要的参数,比如,在哪个容器构造upload的信息。
2、必须有一个add()方法,用于添加一个upload
3、必须有一个remove()方法,用于删除一个upload

二)、这个类中应该有一些必要的信息,是生成实例本身所具有的信息,(upload对象的一些信息)。
1、得到一共多少个upload信息,
2、一个容器对象,这个对象也是从构造函数中传递。

整个图可以简单的表示为

二、我想我们该想想应该用到哪些知识,哪些是熟悉的,哪些是未知的。

一)、正如我们上面预览图所见到的,需要三个或以上的新控件。(添加,删除,还有一个file控件,也或者还有其它的...但至少眼睛见到的就这么多了),既然是新的信息,就会可能用到document.createElement,要添加进一个容器里就可能用到object.appendChild(obj)或者obj.insertBefore()方法。删除也就是obj.parentNode.removeChild(obj)。这些上一章都已经说过了。

二)、既然是控件,肯定得用function或者是一个对象(object)封装起来,对这部分知识,第一章已经简单的说明了

三)、如何组织呢?在上面的思路中也已经有了文字和图示

接下来就动手写:

一)、构造函数,以及基本的代码(伪代码)

复制代码 代码如下:

<script> 
function upload(target/*容器*/ 
                ) 

  this._cnt = 0; /*计数器*/ 
  this.target = document.getElementById(target); 
}; 

upload.prototype.add = function () { 
  /* 
   *生成一个 file 
   *生成一个 添加 
   *生成一个 删除 
   *计数器+1 
   */ 
}; 

upload.prototype.remove = function () { 
  /* 
   *删除一个 file 
   *删除一个 添加 
   *删除一个 删除 
   */ 
}; 
</script> 

当前1/4页 1234下一页阅读全文

时间: 2024-09-14 17:29:42

Javascript &amp; DHTML上传文件控件第1/4页_javascript技巧的相关文章

网页上有个上传文件控件,如何用程序控制上传

问题描述 公司有个内网,每天固定时间都要上传一个excel文档把数据导入数据库,但如何不用键盘鼠标来做到这点我一直搜不到好的办法.显然,建一个winform放一个webbrowser是不能胜任的,因为对于webbrowser弹新窗口的处理我都做不好,更别提弹出文件浏览框了.而且似乎现在的IE没法直接把文件地址通过代码输入到上传控件里了.其次,用post的办法也是网上搜到的解决办法之一,对于登录网站这种简单的参数post我已经做到了,不过要上传文档的话,通过IE的开发者模式截取到大量数据,单单VI

js控制上传文件控件只能选择不能编辑

方法1: 通过JS直接控制键盘的输入,结合IE独有属性contenteditable="false",但是无法解决Firefox工具栏上的粘贴剪切按钮和Opera下删除键.退格键以及右键粘贴剪切操作 方法2: 非IE下通过透明层遮盖输入框,但是会受到浏览器缩放功能的影响 方法3: 用input和button伪装成上传文件,真正的上传文件输入框透明的浮动在其上面,依旧解决不了Firefox工具栏上的粘贴按钮和Opera下的右键粘贴的操作 方法4: 利用CSS,使透明的上传控件只出现按钮部

Javascript &amp;amp; DHTML DOM基础和基本API第1/5页_javascript技巧

一.什么是DOM? 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.因此,必须要对DOM有一定的认识,才能把J

PHP上传文件时自动分配路径的方法_php技巧

本文实例讲述了PHP上传文件时自动分配路径的方法.分享给大家供大家参考.具体分析如下: 网站上传文件时,如果是小的企业站,放在一个目录还没问题,当网站大了,上传的文件多了,我们就不能放在同一个目录了,这里我们就来讲讲用PHP自动给上传的文件分配路径的方法. PHP分配上传文件的路径实例 主要程序片段如下: 复制代码 代码如下: <?php    /*数字方式分配路径*/    function allotPath($id, $extend='jpg') {       $folders = st

PHP上传图片时判断上传文件是否为可用图片的方法_php技巧

本文实例讲述了PHP上传图片时判断上传文件是否为可用图片的方法.分享给大家供大家参考,具体如下: 这里利用getimagesize函数: function isImage($filename) { $types = '.gif|.jpeg|.png|.bmp'; //定义检查的图片类型 if(file_exists($filename)) { $info = getimagesize($filename); $ext = image_type_to_extension($info['2']);

有关文件上传 非ajax提交 得到后台数据问题_javascript技巧

下文给大家介绍文件上传非ajax提交得到后台数据的操作方法,具体详情如下所示: <form name="configForm" id="configForm" method="post" action="" > .......... </form> 根据id获得表单数据然后发送ajax请求,获得后台返回数据,处理数据,完美. 但是如果需要上传文件, <tr> <td class=&qu

文件上传,iframe跨域数据提交的实现_javascript技巧

1.文件上传,图片上传,第三方uploadify插件,http://www.uploadify.com/about/ 2.用iframe上传文件,提交表单,主要思路就是:  a.js创建form表单,iframe,添加到body里,form的target要和iframe的name一致.  b.form表单里更新数据,submit提交  c.如果上传文件,图片,form里面添加 input-file 元素,绑定onchange事件,js触发,在onchange里面添加submit事件  d.关于回

JS上传组件FileUpload自定义模板的使用方法_javascript技巧

FileUpload 是国外一个纯javascript 写的大文件上传组件,该组件支持分片上传,断点续传,多文件等功能. 下面就为大家分享FileUpload上传组件自定义模板(FineUploaderBasic)的使用方法: 以下是配置代码: 前端配置: <!--定义按钮--> <div id="basic_uploader_fine"><i class="icon-upload icon-white"></i>选择

我做的可上传下载控件,欢迎使用。

控件|上传|下载|下载控件 这是控件的源程序:工程名:MY控件名:TESTFTP Dim FileName As StringDim connect As Boolean Private Sub CmdCd_Click()   Call Link  'Inet1.Execute , "cd c2000"  connect = True   End Sub Private Sub CmdList_Click()   If connect = True Then    Inet1.Exec