几种js实现的动态多文件上传
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了几种js实现的动态多文件上传相关的知识,希望对你有一定的参考价值。
参考技术A 方式一:事先写好多个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>本回答被提问者和网友采纳
input实现多文件上传及图片预览
通过使用html的input标签可以实现文件上传比如
<input id="file" type="file" name="upload" multiple onchange="showch();">
其中将type属性设为file。
添加multiple实现多文件上传入下图所示:
通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性
获得文件属性的js代码如下:
<script type="text/javascript"> function showch(){ var files=document.getElementById(\'file\').files,//其中document.getElementById("file").files 会获取一个数组,数组中的元素拥有的属性有lastModifiedDate,name,size,type,webkitRelativePath。 show=document.getElementById(\'show\'); for (var i = 0; i < files.length; i++) { show.innerHTML+=files[i].name+"<br>"; } } } </script>
现在实现图片预览;
出于安全考虑浏览器一般不能直接获得文件的绝对路径;
因此就要用到FileReader用于从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest
一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。
主要有如下几种读取文件的方式:
readAsText()
– 返回文件内容的纯文本格式readAsBinaryString()
–返回文件内容的二进制格式 (不推荐– 推荐使用readAsArrayBuffer()
)readAsArrayBuffer()
– 返回文件内容的ArrayBuffer
格式(图片文件推荐使用)readAsDataURL()
– 返回文件内容的 data URL格式
现在需要预览图片,所以使用readAsDataURL()返回文件内容的data URL格式
由于data URL包含图片的所有内容,所以可以直接赋给img 的src属性
代码如下:
1 var reader=new FileReader(); 2 reader.readAsDataURL(files[i]); 3 reader.onload=function(e){ 4 var img=new Image(); 5 img.src=this.result; 6 show.appendChild(img);
最终效果:
至此所有功能都实现
最终代码如下:
1 <input id="file" type="file" name="upload" multiple onchange="showch();"><!--这个选中多个的方式让人觉得有点不爽啊=-= 不是很好用的样子捏--> 2 <div id="show"></div> 3 </form> 4 <script type="text/javascript"> 5 function showch(){ 6 var files=document.getElementById(\'file\').files,//其中document.getElementById("file").files 会获取一个数组,数组中的元素拥有的属性有lastModifiedDate,name,size,type,webkitRelativePath。 7 show=document.getElementById(\'show\'); 8 for (var i = 0; i < files.length; i++) { 9 show.innerHTML+=files[i].name+"<br>"; 10 var reader=new FileReader(); 11 reader.readAsDataURL(files[i]); 12 reader.onload=function(e){ 13 var img=new Image(); 14 img.src=this.result; 15 show.appendChild(img); 16 console.log(this.result); 17 } 18 } 19 20 } 21 </script>
以上是关于几种js实现的动态多文件上传的主要内容,如果未能解决你的问题,请参考以下文章