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

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

html

<p>

<a href='#' onclick='javascript:viewnone(more1)'>添加附件 </a>

<div id='more1' style='display:none'>

<input type="file" name="attach1" size="50"javascript:viewnone(more2)>

</span>

</div>

<div id='more2' style='display:none'>

<input type="file" name="attach2" size="50"'>

</div>

</p>

js

<SCRIPT language="javascript">

function viewnone(e){

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

}

</script>

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

html

<input type="button" name="button" value="添加附件" onclick="addInput()">

<input type="button"卜升 name="button" value="删除附件" onclick="deleteInput()">

<span id="upload"></span>

js

<script type="text/javascript">

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

<A href="javascript:newUpload()">添加附件</A>

<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">

<TBODY id="fileList"></TBODY>

</TABLE>

<DIV id="uploadFiles" style="display:block"></DIV>

js

<SCRIPT language="javascript">

//---新建上传

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>

没办法直接用JS删除

上传文件成功后 后台返回一个文件路径弯伍手给JS

要删除的时候

JS把文件路径传给后台

后台删除那个路径埋嫌的文件就行橘巧

在前端开发中，我们经常遇到上传文件的需求，以前都是用到时再找资料，但总是感觉对这块不熟，最近翻资料学习了一下，记录一下。

本文中涉及的知识点有：FileList对象，Blob对象，File对象，URL对象、FormData对象等。

本文参考 网道 ，总结而来。另外，强烈推荐网道，可以去 网道的官方 看看，是阮一峰大神发起的项目，提供互联网开发文档，文档非常全面易懂。

FileList对象，是一个像数组的对象，拥有length属性和item()方法，同时，它的每一项都是File对象。

input 标签，将type设为file，之后得到的files属性就是一个FileList对象。

blob 对象表示1个二进制文件的数据内容。blob对象和arraybuffer区别是，blob对象用于 *** 作二进制文件，arraybuffer用于 *** 作内存。

blob 对象拥有2个属性和1个方法，分别是size(单位是字节)、type属性和slice()方法。

File 对象是一种特殊的Blob 对象。它在继承了size、type属性外，还同时有name、lastModified、lastModifiedDate等几个属性。

FileList 对象中的每一项都是File 对象。

拿到File 对象之后就要进行 *** 作，下面是 *** 作。

URL.createObjectURL(file) 允许为File 对象创建一个临时链接，

FileReader 对象的属性和方法比较多，属性中比较重要的是result，方法中比较重要的是

FileReader 对象的所有属性和方法可以参考 这里 ,这里就不再列出来了。

在早期的互联网肆陪迅时候，提交数据都是用表单。表单提交数据有些缺陷，例如无法校验表单数据，会刷新整个页面等。随着Ajax的兴起，页面表单提交数据慢慢退出历史舞台，但有时上传文件时我们偶尔会用到表单提交数据。

在调用构造函数new FormData(form)构造formdata对象时需要传入form节点，如果不传入，则默认构建空表单。如果传入，则按照key=value的时候构建表单。

可以看看效果图

FormData 对象主要的方法有：

cavas压缩图片其实很简单，无非就是几个步骤：

1、选择图片，判断图片是否大于2M（用File对象的裂此size进行判断，size的单位是字节）；

2、用FileReader对象读取文件成base64,

3、然后创建Image对象，赋值src属性，在Image对象加载完成的回调里创建cavas并绘制图片(根据图片是否大于2M动态调整画布大小)；

4、将cavas转成blob，拼在formdata中用ajax上传。

这篇文章到这里也就结束了，这篇文章包含了一些浏览器中提供的对象，可以看到都是很简单乱桐的内容。

---