几种js实现的动态多文件上传_教程

方式一：事先写好多稿氏个input.在点击时才显示。也就是说上传的最大个数是写死了的。

html

<p>

</span>

</div>

</div>

</p>

function viewnone(e){

e.style.display=(e.style.display=="none")?"":"none"

}

</script>

方式二:这种方式的动态多文件上传是实现了的，很简单的，不说废话看code

html

var attachname = "attach"

var i=1

function addInput(){

if(i>0){

var attach = attachname + i

if(createInput(attach))

i=i+1

}

function deleteInput(){

if(i>1){

i=i-1

if(!removeInput())

i=i+1

}

function createInput(nm){

var aElement=document.createElement("input")

aElement.name=nm

aElement.id=nm

aElement.type="file"

aElement.size="50"

//aElement.value="thanks"

//aElement.onclick=Function("asdf()")

if(document.getElementById("upload").appendChild(aElement) == null)

return false

return true

}

function removeInput(nm){

var aElement = document.getElementById("upload")

if(aElement.removeChild(aElement.lastChild) == null)

return false

return true

}

</script>

方式三：动态多文件上传，只键弊散是在oFileInput.click()这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧！

另外还有一点就是说，click()只有在ie中才能正常运行。

虽说这种方式最终没能实现上传，但还是留下来参考，看看是否有人可以真正实现上传。

html

</TABLE>

//---新建上传

function newUpload(){

var oFileList = document.getElementById("fileList")

var fileCount = oFileList.childNodes.length + 1

var oFileInput = newFileInput("upfile_" + fileCount)

if(selectFile(oFileInput)){

addFile(oFileInput)

}

//----选择文件

function selectFile(oFileInput){

var oUploadFiles = document.getElementById("uploadFiles")

oUploadFiles.appendChild(oFileInput)

oFileInput.focus()

oFileInput.click()//不能这样做，可能是为了安全着想吧！

var fileValue = oFileInput.value

if(fileValue == ""){

oUploadFiles.removeChild(oFileInput)

return false

}

else

return true

}

//---新建一个文件显示列表

function addFile(oFileInput){

var oFileList = document.getElementById("fileList")

var fileIndex = oFileList.childNodes.length + 1

var oTR = document.createElement("TR")

var oTD1 = document.createElement("TD")

var oTD2 = document.createElement("TD")

oTR.setAttribute("id","file_" + fileIndex)

oTR.setAttribute("bgcolor","#FFFFFF")

oTD1.setAttribute("width","6%")

oTD2.setAttribute("width","94%")

oTD2.setAttribute("align","left")

oTD2.innerText = oFileInput.value

oTD1.innerHTML = '<A href="javascript:removeFile('+ fileIndex + ')">删除</A>'

oTR.appendChild(oTD1)

oTR.appendChild(oTD2)

oFileList.appendChild(oTR)

}

//---移除上传的文件

function removeFile(fileIndex){

var oFileInput = document.getElementById("upfile_" + fileIndex)

var oTR= document.getElementById("file_" + fileIndex)

uploadFiles.removeChild(oFileInput)

fileList.removeChild(oTR)

}

//---创建一个file input对象并返回

function newFileInput(_name){

var oFileInput = document.createElement("INPUT")

oFileInput.type = "file"

oFileInput.id = _name

oFileInput.name = _name

oFileInput.size="50"

//oFileInput.setAttribute("id",_name)

//oFileInput.setAttribute("name",_name)

//oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>'

//alert(oFileInput.outerHTML)

return oFileInput

}

</SCRIPT>

7款基于JavaScript和AJAX的文件上传插件，这些插件基本上都能实现以下功能：

多文件上传，拖拽 *** 作，实时上传进度，自定义上传限制

1. jQuery File Upload

具有多文件上传、拖拽、进度条和图像预览功能册灶的文件上传插件，支持跨域、分块、暂停恢复和客户端图像缩放。可与任何服务端平台（如PHP、Python、Ruby on Rails、Java、Node.js、Go等）一起使用，支持标准的HTML表单文件上传。

2. Pixelcone Fileuploader

使用HTML5 API的jQuery文件上传插件，支持AJAX上传和拖拽 *** 作，以及针对老版本浏览器的iframe上传部件。有多种形式来实现多文件上传，每种形式由单一的上传脚本来控制。

3. Ajax Upload

该插件使用XHR来上传多个文件，支持拖拽 *** 作，可以在FF3.6+、Safari4+、Chrome等浏览器中完美运行。

4. Plupload

这是一个针对CMS或类似系统的、高度可用的上传插件。支持分块、拖拽、图像缩放、限制文件大小、显示上传进度等。

5. Uploadify

Uploadify是一个jQuery插件，帮助你在网站中轻松添加多文件上传功能，提供了旅碰两个版本（HTML5、Flash）。支持多文件上传、拖拽、实时进度显示，提供了大量的定制功能。

6. Ajax File Upload

该插件是Ajaxupload插件的修改版本，不具备HTML5功能。

7. jQuery FileDrop

该插件使用HTML5 API，允许用户从桌面拖动多个文件到浏览器中，并上传每个文件到用户指定的URL。该插件使州镇扮用HTML5 FileReader()来读取文件数据。

Web应用中常需要提供文件上传的功能。典型的场景包括用户芹慧头像上传、相册图片上传等。当需要上传的文件比较大的时候，提供一个显示上传进度的进度条就很有必要了。

在PHP

5.4以前，实现这样的进度条并不容易，主要有三种方法:

1.使用Flash,

Java,

ActiveX

2.使用PHP的APC扩展

3.使用HTML5的File

API

第一种方法依赖第三方的浏览器插件，通用性不足，且易带来安全隐患。不过由于Flash的使用比较广泛，因此还是有很多网站使用Flash作为解决方案。

第二种方法的不足在于，它需要安装PHP的APC扩展库，要求用户能够控制服务器端的配置。另外，如果安装APC仅仅是为了实现一个上传进度条，那么显然有点杀鸡用牛刀的意思。

第三种方法应该是最为理想的方法，不需要服务器端的支持，仅在浏览器端使用Javascript即可。但是由于HTML5标准尚未确立，各浏览器厂商的支持也不相同贺首局，所以暂时这种方法还禅让难以普及。

PHP

5.4中引入的基于session的上传进度监视功能(session.upload_progress)，它提供了一个服务器端的上传进度监视解决方案。升级到PHP

5.4之后，可以不必安装APC扩展，仅使用原生PHP和前端的Javascript即可实现上传进度条。

下面我们就详细介绍一下

PHP

5.4

的这个

session.upload_progress

新特性。

原理介绍

当浏览器向服务器端上传一个文件时，PHP将会把此次文件上传的详细信息(如上传时间、上传进度等)存储在session当中。然后，随着上传的进行，周期性的更新session中的信息。这样，浏览器端就可以使用Ajax周期性的请求一个服务器端脚本，由该脚本返回session中的进度信息；浏览器端的Javascript即可根据这些信息显示/更新进度条了。

那么，文件上传信息具体是如何存储的？我们要如何访问它呢？下面我们来详细说明。

PHP

5.4

中引入了一些配置项(在php.ini中进行设置)

复制代码

代码如下:

session.upload_progress.enabled

"1"

session.upload_progress.cleanup

"1"

session.upload_progress.prefix

"upload_progress_"

session.upload_progress.name

"PHP_SESSION_UPLOAD_PROGRESS"

session.upload_progress.freq

"1%"

session.upload_progress.min_freq

"1"

其中enabled控制upload_progress功能的开启与否，默认开启；cleanup

则设置当文件上传的请求提交完成后，是否清除session的相关信息，默认开启。

prefix

和

name

两项用来设置进度信息在session中存储的变量名/键名。关于这两项的详细使用见下文。

freq

和

min_freq

两项用来设置服务器端对进度信息的更新频率。合理的设置这两项可以减轻服务器的负担。

在上传文件的表单中，需要为该次上传设置一个标识符，并在接下来的过程中使用该标识符来引用进度信息。具体的，在上传表单中需要有一个隐藏的input，它的name属性为php.ini中

session.upload_progress.name

的值；它的值为一个由你自己定义的标识符。如下：

复制代码

代码如下:

<input

type="hidden"

name="<?php

echo

ini_get('session.upload_progress.name')

?>"

value="test"

接到文件上传的表单后，PHP会在$_SESSION变量中新建键，键名是一个将session.upload_progress.prefix的值与上面你自定义的标识符连接后得到的字符串，可以这样得到：

复制代码

代码如下:

$name

ini_get('session.upload_progress.name')

$key

ini_get('session.upload_progress.prefix')

$_POST[$name]

$_SESSION[$key]

这里就是此次文件上传的进度信息了

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/12199069.html

几种js实现的动态多文件上传

发表评论

评论列表（0条）